jquery 源码分析6-ajax(B)ajax参数组装过程

jquery 源码分析6-ajax(B)ajax参数组装过程

把整个$.ajax(),拆开，主要有以下几个方面

• 全局ajax函数ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess,ajaxSend
• ajax参数组装过程
  
  • 常见类型json，html，xml，text
  • 跨域 JSONP，script
• XMLHttpRequest完成后回调处理服务器端返回的数据

首先将ajax参数组装之常见类型json，html，xml，text，把$.ajax方法简化一下如下

var ajaxF = {
     ajax : function(s){
            //主要处理处
            ajaxSettings(s);
            param(s.data);
            ..... 
            xMLHttpRequestSend();
            onreadystatechange();
        }
    ,
    ajaxSettings:{
        url: location.href,
        global: true,
        type: "GET",
        timeout: 0,
        contentType: "application/x-www-form-urlencoded",
        processData: true,
        async: true,
        data: null,
        accepts: {
            xml: "application/xml, text/xml",
            html: "text/html",
            script: "text/javascript, application/javascript",
            json: "application/json, text/javascript",
            text: "text/plain",
            _default: "*/*"
        }
        ....
    },
   xMLHttpRequestSend :function(s){
   var xhr = new XMLHttpRequest();
   xhr.setRequestHeader("Content-Type", s.contentType);
   xhr.open();
   xhr.send(s.data);
   },
   optionJSONPAndScript:function(s){},
    onreadystatechange : function(){
        httpData()
    } //xMLHttpRequest回调函数
    ,
    httpData : function(xMLHttpRequest){}, //处理服务器返回的数据，组装成json格式，服务器返回的都是text，xml格式诗句
    param : function(data){data}  //负责将我们{a:1,b:2}参数拼成a=1&b=2

}

ajaxSettings函数主要负责提供各种默认的参数，我们在使用$.ajax()时大部分时间都是给些必要参数，有时候多个参数，有时候漏掉个参数都能返回正常数据，主要就是ajaxSettings会提供默认参数，没传参的都用这些默认参数，

param方法就是我们在$.ajax({data:{…..}})中的data拼装成a=1&b=2

下面简化下ajax方法

var ajaxF = {
     ajax : function(s){
            //主要处理处
            s =  ajaxSettings(s);
            var data  = param(s.data);
            if(s.dataType == "json"){
                s.url = s.url + "?"+data         //所以本质参数都是都是以这种方式传给后台
            }
            if(s.dataType == "jsonp"||s.dataType == "script"){
                optionJSONPAndScript(s);
            }else{
                xMLHttpRequestSend(s);
            }
            if ( !s.async )
            onreadystatechange();
        }
    }

首先赋值给参数s默认参数，接着拼接url，根据dataType不同调用不同方法，

这个有个彩蛋，就是同步，异步问题，我们在参数中设置async = false时，jQuery做了一个判断，如果是同步，就等着xhttpRequest的回调函数onreadystatechange，这个太棒了，一行代码就解决了同步异步问题

接着看xMLHttpRequestSend方法

    function xMLHttpRequestSend(s){
        var xhr = new XMLHttpRequest();
        xhr.setRequestHeader("Content-Type", s.contentType);
        xhr.open(s.type, s.url, s.async);
        xhr.send(s.data);
    }

根据type不同分别发送get和post请求，请求完成回调onreadystatechange方法；这样一个ajax就基本完成了；