关于Ajax需要知道的部分

Ajax技术核心是XMLHttpRequest对象（简称XHR）

ajax的使用能够以异步的方式从服务器获取信息，意味着用户单击后，可以不必刷新页面也能取得新数据。

为保证浏览器对XHR的支持,使用以下方法

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

总的来说，我们只是使用了xhr方法来实现向服务端发请求，获取返回数据，在实现页面上的局部刷新，更改数据。

这里我们主要研究下，如何用原生js封装一个类似jquery的ajax请求,具体的ajax细节方法，大家可以在网上查询，或者高程三上讲解的很详细

//toData方法是将data传入的数据取到并且拼接，为拼到URL上做准备
function toData(obj){
    if (obj == null){
        return obj;
    }
    var arr = [];
    for (var i in obj){
        var str = i+"="+obj[i];
        arr.push(str);
    }
    return arr.join("&");
}

function ajax(opts){
    //创建ajax对象，以及一系列需要的参数
    var xhr = null,
        abortTimeout = null,
        empty = function(){},
        ajax_url = "",
        opts = {
            type : ( opts.type && opts.type.toUpperCase() ) || "GET",
            url : opts.url || "",
            data : opts.data || "",
            dataType : opts.dataType || "json",
            success : opts.success || empty,
            err :opts.error || empty,
            timeout : opts.timeout || 30000   //默认超时时间: 30s
        };
    //判断浏览器是否有xhr
    if (window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }
    else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
        
      //处理传入的参数
    opts.data = toData(opts.data);

       //通过请求方式不同，来拼接URL
    if(opts.type == "GET"){
        if(opts.url.indexOf("?")>-1){
            if(opts.data == ""){
                ajax_url = opts.url;
            }else{
                ajax_url = opts.url + "&" +opts.data;
            }
        }else{
            ajax_url = opts.url + "?" + opts.data;
        }
        xhr.open('GET',ajax_url,true);
        xhr.send();
    }else(opts.type == "POST") {
        xhr.open('POST',opts.url,true);
        //如果需要像html表单那样post数据，需要设置http头
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(opts.data);
    }

    //处理返回的数据
    xhr.onreadystatechange = function(){
    /*
        ** 每当readyState改变时，就会触发onreadystatechange事件
        ** readyState属性存储有XMLHttpRequest的状态信息
        ** 0 ：请求未初始化
        ** 1 ：服务器连接已建立
        ** 2 ：请求已接受
        ** 3 : 请求处理中
        ** 4 ：请求已完成，且相应就绪
      */
      if(xhr.readyState == 4){
        var res, 
            error;
        xhr.onreadystatechange = empty;
        clearTimeout(abortTimeout);

        if((xhr.status >= 200 && xhr.status < 300) ||xhr.status ==304){
            res = xhr.responseText;
            try{
                if(opts.type == "GET"){
                    if(opts.dataType == "json"){
                        res = JSON.parse(xhr.responseText);
                    }else if(opts.dataType == "script") {
                        eval(res);
                    }else if(opts.dataType == "xml"){
                        res = xhr.responseXML;
                    }
                }
            }catch(e) {
                error = e;
            }
            if(error){
                opts.error(error,'parsererror',xhr);
            }else{
                opts.success(res);
            }
        }else{
            opts.error(xhr.statusText || 'unknown' ,'status:' +xhr.status,xhr);
        }
      }
    };

    if(opts.timeout > 0){
        xhr.ontimeout = function(){
                      opts.error('Request.timeout','timeout',xhr);
              }
    }

    return xhr;
}
module.exports = ajax;

下面我们将调用这个封装的ajax请求

ajax({
    url : url,
    dataType : 'json',
    data : {
        "param1" : "111",
        "param2" : "222"
    },
    success: function(result){
        console.log(result);
    },
    timeout: 30000,
    error : function(error,type,xhr){
        console.log("error" : error,"type:",type,"xhr:",xhr);
    }
});