JQ——Ajax1，基本

标签：duration   一个   请求   dup   方法调用   返回   用户名   lse   两种   

名称由来：Asynchronous Javascript And XML：
    Asynchronous ：异步
    JavaScript：通过Javascript技术实现和应用
    XML：XMLHttpRequest对象，在IE5中首次引入，是Ajax的核心


 主要特点：
    仍然是一个HTTP请求，所以遵守HTTP协议
    无页面刷新的交互，提升了用户体验
    可以只获取“部分页面”甚至是简单数据，降低了流量消耗

实际上：(通过JQ触发事件后通过ajax发送请求，然后该怎么就怎么了，最后成功返回回来)改是怎么个流程就是怎么个流程，只不过这个流程发起人是Ajax(例如点赞：我们给 赞添加了一个点击事件，然后再调用Ajax)

调用Ajax返回的三种形式：
1.partialviewResult（复杂的：例如评论）
2.JsonResult（简单的：点赞）（默认相应的post请求，要想相应get在返回的时候还要添加一个参数（,JsonRequestBehavior.AllowGet））
3.void
------------------------------------------------------------------
           二、MVC内置Ajax （内置服务器端）
--------------------
[Remote]（内置）：远程验证：（场景表单验证）
（需要using System.Web.Mvc;）
1.首先在需要验证的属性上添加[Remote]特性，指定 action/controller等

        [Remote("IsNameDuplicated", "Register", ErrorMessage = "* 用户名重复", HttpMethod = "GET")]
        public string UserName { get; set; }
2.然后按照上述action和controller，添加一个Action：

        //必须返回一个JsonResult
        public JsonResult IsNameDuplicated(string UserName)//UserName就是需要验证的属性名称
        {
            return Json(UserName != "zyfei",  //true：通过验证
                JsonRequestBehavior.AllowGet);//JsonResult在默认的情况下不能作为对HTTP-GET请求的响应，因为【remote】是get请求
        }
3.生成的HTML代码里面就会包含相关信息：
4当用户输入用户名后，焦点移出输入框，Ajax请求会自动发起

缺点：在输入框里每输入一个字符就会进行一次Ajax的请求有点浪费性能，推荐jQuery的。
----------------------

Ajax Form（内置）：（场景提交评论）（用的少）
解释：把一个表单当做ajax提交
首先需要引入jquery.unobtrusive-ajax.js （Nuget去安装）


@using (Ajax.BeginForm("Post", "Problem",
    new { id = ViewContext.RouteData.Values["id"] },
    new AjaxOptions
    {
        Confirm = "确认提交",   //提交之前确认
        AllowCache = false,
        HttpMethod = "POST",
        UpdateTargetId = "comments",    //返回数据替换id=comments的DOM元素
        InsertionMode = InsertionMode.InsertAfter,  //更新方式，加载从服务器返回的插入顺序
        LoadingElementDuration = 3,//从服务器返回数据需要的时间
        LoadingElementId = "wait", //等待的时候显示的DOM元素。
        OnBegin = "alert(‘开始Ajax提交了‘)",//可以直接写js的名称
        OnSuccess = "alert(‘提交成功‘)",
        OnFailure = "alert(‘提交失败‘)",
        OnComplete = "alert(‘提交完成，无论成功还是失败‘)",
    }))
{
    @Html.TextAreaFor(m => m.NewPost)
    提交
}

注意在："Problem" controller的action为Post的返回只需要返回一个partialview就行了（可以是自己的想要的那部分）
-----------------------------------------------------------------
        三、Ajax-客户端
$(selector).load()：将结果直接填充到DOM元素
注意：异步和callback。比较这两种写法的区别：
            alert(‘加载开始！‘);
            $(‘div‘).load("/WebApi/GetLatestChats", function (data) {
                alert(‘加载中……‘);
            });
            alert(‘加载结束！‘);
三个常用的Ajax回调函数参数：responseText, textStatus, jqXHR（XmlHttpRequest）
                console.log(‘responseText:‘ + responseText);
                console.log(‘textStatus:‘ + textStatus);
                console.log(‘jqXHR:‘ + jqXHR);
---------------------
 $.ajax()：最底层最全面JQuery实现

    核心参数：url
    callback函数执行顺序：
        beforeSend：（跟function）$.ajax()方法调用之后，ajax请求发送之前，一般用于提示或防重复提交
        success：（跟function）ajax请求成功完成，客户端获得请求结果：data
        error：（跟function）服务器端未能成功返回请求结果。推荐总是使用，弹出错误提示（尤其是开发调试时）
        complete：（跟function）无论成功失败，Ajax请求完成之后，通常用于恢复DOM状态
    其他：
        method/type：GET/POST/PUT/DELETE……
        cache：默认true
        contentType：request的类型，分为：
        dataType：response的类型，分为：text/html/json……
        async：是否异步
        statusCode：根据repsonse的statusCode（比如404）设置相应的回调函数

JQ——Ajax1，基本

标签：duration   一个   请求   dup   方法调用   返回   用户名   lse   两种   

原文地址：https://www.cnblogs.com/chenbaiwanbichenqianwanshaohaoduowan/p/14256001.html