jQuery中ajax做了什么

缘起

最近参加一面试，面试中间提到了XMLHttpRequest对象的readyState，被问到readyState 都有哪些状态啊，小白的自己没答上来，愧疚万分啊，哎都是jQuery给害的啊，哈哈，笑笑罢了。

W3C官方对readyState的定义在这儿，

UNSEND  0  xmlHttp对象已经被构建

OPENED  1  open方法已经被成功调用

HEADERS_RECEIVED 2  服务器返回响应头，这时可以通过xmlHttp.getResponseHeader()来获取响应头

LOADING  3  服务器返回部分响应内容，不能保证数据完整

DONE  4  服务器处理完毕，数据完整

写到这里想起以前写异步请求时写过下面的代码

if(xmlHttpRequest.readyState == 4){
  if(xmlHttpRequest.status == 200){
    document.getElementById("id").value=xmlHttpRequest.responseText;
  }
}

呵呵。

jQuery会如何封装xmlHttpRequest对象呢？

带着这个疑问，开始了探寻$.ajax之旅，ajax对象的处理过程步骤比较多，下面是ajax的主要执行流程（jQuery版本1.10.1）

• get s = option +　$.ajaxSettings

• state=0； the ajax state
  

• Fake xhr jqXHR

• make jqXHR a deferred object

• reset s.url

• reset s.type

• set s.dataTypes use s.dataType

• determine crossDomain 

• convert data by $.param, if s.data is not a string 

• prefilter 

• trigger ajaxStart

• 判断本次请求是否有发送内容（判断请求头是否为GET或者HEAD），如果请求本身不需要发送内容，则将数据添加到url后面，如果不需要缓存则在url后面追加时间戳

• 为jqXHR设置请求头If-Modified-Since和If-None-Match，Content-Type，Accept，和其他header

• 执行用户自定义函数beforeSend，

• bind callback function for  jqXHR ( scuess , error ,complete )

• get transport 

• trigger ajaxSend 

• set  timeoutTimer if has s.timeout

• state= 1, and transport.send()

            

             in transport.send 

             new xhr use s.xhr() , 

             xhr.open(), 

             xhr.overrideMimeType() , 

             xhr.setRequestHeader, 

             xhr.send , 

             bind callback function for xhr.onreadystatechange event

                         

                         in callback function 

                         get status, statusText, responses, responseHeaders                                                                                                from xhr.status,xhr.statusText, xhr.responseText, xhr.getAllResponseHeaders , 

                         invoke done function with these params.

                                          

                                     in done function 

                                     clear timeoutTimer

                                     set transport = undefined

                                     set responseHeadersString

                                     set jqXHR.readyState

                                     set isSuccess use HTTP status code

                                     convert response

                                    set Last-Modified and etag

                                    set status , statusText for jqXHR

                                    resolve deferred if successs or reject deferrred if fail 

                                    set jqXHR statusCode

                                    trigger ajaxSuccess or ajaxError

                                    fire completeDeferred

                                    trigger ajaxComplete

                                    trigger ajaxStop

处理的工序非常多，需要重点理解的地方有

perfilter ， transport ,  convert response , 这几个是理解ajax的难点，后续分析这几处的实现。