jquery 源码分析5-ajax()ajax原理，可以加载的类型

jquery 源码分析5-ajax()ajax原理，可以加载的类型

很多框架都有自己的一套ajax，其实都是封装了浏览器器提供的对像XMLHttpRequest ，XMLHttpRequest从发起一个http请求到返回一个服务器传回的数据有以下一个步骤

1. 创建 XMLHttpRequest对象

   // Create the request object; Microsoft failed to properly
       // window.ActiveXObject 是IE7 对应的发去ajax对象，其他浏览器是通过  new XMLHttpRequest(), 
       var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
   

2. open一个连接,(如果服务端设置了username，需要用户名，密码，默认都是不需要的)

   if( username )
           xhr.open(type, s.url, s.async, s.username, s.password);
       else
           xhr.open(type, s.url, s.async);

3. 设置请求头

   xhr.setRequestHeader("Content-Type", s.contentType);

4. 执行send()方法

   xhr.send();

5. 执行绑定在xhr上的方法onreadystatechange(),处理返回的数据,onreadystatechange是浏览器定义的XMLHttpRequest对象http请求完成后的回调函数

可以加载资源类型

    xml: "application/xml, text/xml",
    html: "text/html",
    script: "text/javascript, application/javascript",
    json: "application/json, text/javascript",
    text: "text/plain",

dataType 有xml,html,script,json,text和JSONP(用于跨域使用，本质和script一样)

封装了ajax的方法

    get: function( url, data, callback, type ) {
        return jQuery.ajax();
    },

    getScript: function( url, callback ) {
        return jQuery.get(url, null, callback, "script");
    },

    getJSON: function( url, data, callback ) {
        return jQuery.get(url, data, callback, "json");
    },

    post: function( url, data, callback, type ) {
        return jQuery.ajax({
            type: "POST",
            url: url,
            data: data,
            success: callback,
            dataType: type
        });
    },
    ajax： function(s){
    //这里进行了简化，实际是在这里做了很多判断，
        var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
        xhr.open(type, s.url, s.async, s.username, s.password);
        xhr.setRequestHeader("Content-Type", s.contentType);
         xhr.send();
         onreadystatechange(callBackData);
    }

默认就是上面这些方法，从上面看，我们主要关注ajax方法，ajax方法的参数是一个对象，这种用法在定义函数参数很有好，这样我们在函数内部可以根据键值对的模式拿到参数，如果用ajax（a，b，c,d）,假设a,b,c,d中某个参数没有传入，在函数内部做判断也是很麻烦的，而通过一个我定义好了的对象属性名来判断就比较方便，都是可读性也比较强