jQuery.ajax()方法笔记

1.快速查询jQuery之ajax方法对象参数的众多属性的作用

2.封装ajax方法的例子

3.与服务端互动   参考 (与ASP.NET MVC互动)

官方API jQuery.ajax()

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});

This object will be the context of all Ajax-related callbacks. 
用context设置的对象将成为ajax相关回调函数的上下文,如上面的例子,document.body这个DOM对象会成为第5行this对象的所指代的对象.

根据ajax 自定义reponse标识,封装回调函数, 如返回  {"success":true} 这样的JSON字符串,执行相应的回调部分

部分一: 定义原始成功回调函数,如下第9行至11行

addTag: function (_data, fnError) {//在这里,调用addTag处,fnError未定义,但不影响addTag被调用
    return $.wzAjax({
        type: "post",
        url: "/api/tag/post",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(_data),
        dataType: "json",
        customErrorCb: fnError,//customErrorCb 自定义
        success: function (data,textStatus,jqXHR) {
            console.log("addTag_success");
        }
    })
},

部分二

$.wzAjax = function (requestParamObj) {
    var _fnError = requestParamObj.customErrorCb || function (reponseResult) {//fnError:由参数传入的自定义错误处理函数
        console.info(reponseResult);
        $.alert(reponseResult)
    }
    , _iniFnSuccess, _fnSuccess, dfd;  //当传入参数定义success时, _fnSuccess:根据response的结果,封装定义成功处理函数, _iniFnSuccess保留原定义的成功回调函数
    return requestParamObj.success ? (_iniFnSuccess = requestParamObj.success, //逻辑1,请求参数定义success, 即成功回调函数,
        _fnSuccess = function (_data, textStatus, _jqXHR) {
            _data.success != undefined && _data.success === !1 && _data.message ? _fnError(_data.message) : _iniFnSuccess(_data, textStatus, _jqXHR)//返回值没有定义success属性,运行_fnSuccess
        },
        requestParamObj.success = _fnSuccess,//重新绑定success回调函数,而原来的success回调函数
        $.ajax(requestParamObj)) : (dfd = $.Deferred(), //逻辑2,没有定义成功回调函数时,即requestParamObj.success=false
            $.ajax(requestParamObj).then(function (n, r, u) {
                //then 当只有一个参数时,表示done回调函数,即成功返回时的回调
                if (n.success != undefined && n.success === !1 && n.message) {
                    _fnError(n.message);
                }
                else {
                    return dfd.resolve(n, r, u)
                }
            }
                // ,function(n,r,u){  
                //     return dfd.resolve(n, r, u)//返回调用点:wz_popup@936 getMyTags
                // }
            ), //当有2个参数,程序执行到这
            dfd.promise()) //返回新的Deferred对象
};

当浏览器加载上面的代码时JS引擎从上至下执行,即从第7行开始执行,第10行之前requestParamObj.success还是外部声明的自定义success回调函数

第8行,重新封装回调,赋值给第11行,第9行:内部再调用原success回调函数

运行时,$ajax执行成功,回调第8行_fnSuccess

理解参数dataType: "json"

从服务端response的数据由$.ajax()方法转成json格式,即无需再使用 var i = JSON.parse(_data); 进行处理