jquery中ajax原生代码的分析模仿

function ajax(obj){

    var defaults = {

        url: "#",

        data: {},

        type: "get",

        async: true,

        dataType :"text",

        jsonp: "callback",

        //jsonpCallback的值为success函数的名称，一般不用自己制定

        success:function(data){console.log(data);}

    };

 

    for(var key in obj){

        defaults[key] = obj[key];

    }

 

    if(defaults.dataType == 'jsonp'){

        ajax4jsonp(defaults);

    }else{

        ajax4json(defaults);

    }

}

 

function ajax4json(defaults){

    //1、创建XMLHttpRequest对象

    var xhr = new null;

    if(window.XMLHttpRequest){

        xhr = new XMLHttpRequest();

    }else{

        xhr = new ActiveXObject('Microsoft.XMLHTTP');

    }

 

    //2、准备发送请求

    //把对象形式的参数转换成字符串形式的参数

    var param = '';

    for(var attr in defaults.data){

        param += attr + '=' + defaults.data[attr] + '&';

    }

    if(param){

        param = param.substring(0,param.length - 1);

    }

    //处理get请求并处理中文乱码问题

    if(defaults.type == 'get'){

        defaults.url += '?' + encodeURI(param);

    }

    xhr.open(defaults.type,defaults.url,defaults.async);

 

    //3、执行发送请求

    //处理post请求并设置请求头

    var  data = null;

    if(defaults.type == 'post'){

        data = param;

        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    }

    xhr.send(data);

 

    //处理同步请求，不会调用回调函数

    if(!defaults.async){

        if(defaults.dataType == 'json'){

            return JSON.parse(xhr.responseText);

        }else{

            return xhr.responseText;

        }

    }

 

    //4、指定回调函数

    xhr.onreadystatechange = function(){

        if(xhr.readyState == 4){

//xhr.readyState：0     未发送

                                 1     已发送但未发送完

                                 2     发送完毕

                                 3     开始接收数据但是没有接收完

                                 4     接收完数据

            if(xhr.status == 200){

                var data = xhr.responseText;

                if(defaults.dataType == 'json'){

                    data = JSON.parse(data);

                }

                defaults.success(data);

            }

        }

    }   

}

 

function ajax4jsonp(defaults){

    //系统随机生成一个回调函数的名称,callback = cbName，cbName就是success函数

    var cbName = 'jQuery' + ('1.11.1' + Math.random()).replace(/\D/g,"") + '_' + (new Date().getTime());

    if(defaults.jsonpCallback){

        cbName = defaults.jsonpCallback;

    }

    window[cbName] = function(data){

        defaults.success(data);

    }

 

    var param = '';

    for(var attr in defaults.data){

        param += attr + '=' + defaults.data[attr] + '&';

    }

    if(param){

        param = param.substring(0,param.length-1);

        param = '&' + param;

    }

 

    //将callback = cbName，cbName函数添加到url地址中,传到服务器中，在服务器端执行success中的函数

    var script = document.createElement('script');

    script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param;

    var head = document.getElementsByTagName('head')[0];

    head.appendChild(script);

}