浅谈ajax

Ajax 回顾

最本质的 ajax 其实是这样的：

function Ajax(){ 
    var xmlHttpReq = null;
    if (window.ActiveXObject){//IE5 IE6
        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest){
        xmlHttpReq = new XMLHttpRequest();
    }
    if( xmlHttpReq != null ){
        xmlHttpReq.open("GET","/echo/xml/",true);    //采用异步方式
        xmlHttpReq.onreadystatechange=RequestCallBack; // 回调

        // get， send不出去，自觉置为 null
        // open 里用 post，下面才可以 send(data)
        xmlHttpReq.send(null);
    }
    function RequestCallBack(){ //一旦readyState值改变，将会调用这个函数
        if( xmlHttpReq.readyState == 4 ){ // 依次 0，1，2，3，4
                if( xmlHttpReq.status == 200 ){
                    // xmlHttpReq.responseText;
                }
        }
    }
}

jQuery 出现后，在发出Ajax请求时，jQuery 会帮我们确定取得数据的最佳方式。可用的方式包括标准的 XMLHttpRequest 对象、微软 ActiveX 的 XMLHTTP对象 或 script 标签。

由于不同请求使用的数据传输方式不一样，所以需要一个公共的接口与这些通信交互。为此，jqXHR 对象提供了这种接口在 XMLHttpRequest 对象可用的情况下，封装该对象的行为；在 XMLHttpRequest 对象不可用的情况下，则尽可能模拟它。jqXHR 提供给我们的属性和方法包括：

• 包含返回数据的 .responseText或.responseXML；
• 包含状态码和状态描述的 .status和.statusText；
• 关于HTTP头部的 setRequestHeader/getRequestHeader；
• 提早中断通信的.abort()

jQuery的所有 Ajax 方法都会有对象返回，只要把这个对象保存起来，随后就可以方便地使用这些属性和方法。

可以多次调用 .done()和.fail() 这两个方法，根据需要添加多个处理程序。如果把调用 $.ajax() 的结果保存在一个变量中，那么就可以考虑代码的可读性，在后面再添加处理程序。

Promise 对象和 Deferred 对象

jQuery 1.5 以后，Ajax 函数（$.ajax、$.get 及$.post）都会返回Promise 对象。Promise 对象代表一项有两种可能结果（成 功或失败）的任务，它还持有多个回调，出现不同结果时会分别触发相应的回调。

使用Promise 对象的最大优势仍然在于，它可以轻松从现有 Promise 对象 派生出新的 Promise 对象。

Deferred 就是 Promise！更准确地说，Deferred 是Promise 的超集，它 相比 Promise 是可以直接触发的。纯 Promise 实例只允许添加多个调用，而且必须由其他什么东西来触发这些调用。

它们的底层是 $.Callbacks.

    // jQuery 1.4 
    // 回调函数大而全，很臃肿
    $.get('/mydata', {
        success: onSuccess,
        failure: onFailure,
        always: onAlways
    });

    // jQuery 1.5
    // 优雅的分布式
    var promise = $.get('/mydata');
    promise.done(onSuccess);
    promise.fail(onFailure);
    promise.always(onAlways);

jQuery 1.5 修改了 Ajax 实现。修改后所有 Ajax 函数（$.ajax、$.get 及$.post）现在都会返回 Promise（承诺）对象。

Promise 对象代表一项有两种可能结果（成功或失败）的任务，它还持有多个回调，出现不同结果时会分别触发相应的回调。

简单总结一下，Promise 对象接受 3 种回调形式：done、fail 和 progress。 执行(resolve) Promise 对象时，运行的是 done 回调；拒绝(reject) Promise 对象时，运行的是fail 回调; 对处于挂起状态的Deferred 对象调用 notify 时，运行的是progress 回调.

获得jQuery 中的Promise 对象：或者生成一个$.Deferred 实例，或者进行一次可返回 Promise 对象的 API 调用。

$.when 及其他能取用Promise 对象的jQuery 方法均支持非 Promise 对象作为参数。这些非Promise 参数会被当成因相应参数位置已赋值而执行的Promise 对象来处理。

例如

$.when('foo')

会生成一个因赋值'foo'而立即执行的 Promise 对象。 再譬如

var promise = $.Deferred().resolve('bar');
$.when('foo', promise)

针对，动画也可以使用 promise，，jQuery 对象也可以有promise 方法 因此，如果想生成一个在抓取某些数据且已完成 #loading 动画之后执行的Promise 对象：

var fetching = $.get('/myData');
$.when(fetching, $('#loading'));

必须要在动画开始之后再执行 $.when 生成的那个 Promise 对象。如果#loading 的动画队列为空，则立即执行相应的 Promise 对象。

pipe 的原理为： "请针对这个 Promise(getPromise) 对象给我一个回调，我会归还一个 Promise (postPromise) 对象以表示回调运行的结果"

var getPromise = $.get('/query');

var postPromise = getPromise.pipe(function(data) { return $.post('/search', data); });

jQuery 1.8后 pipe 已经为不推荐用法，改推为 $.then.