ajax的工作原理

一、什么是ajax

ajax是一種異步通信技術。在ajax出現之前，客戶端與服務端之間直接通信。引入ajax之后，客戶端與服務端加了一個第三者--ajax。有了ajax之后，通過在后台與服務器進行少量數據交換，可以達到在不刷新整個頁面的情況下實現局部刷新。其原理如圖

二、XHR對象

ajax技術的核心是XMLHttpRequest對象(簡稱XHR)。IE7+、FireFox、Opera、Chrome和Safari都支持原生的XHR對象，創建XHR對象可以這樣寫

var xhr = new XMLHttpRequest();

那如果要兼容IE6、7又該怎么寫

var xhr = new ActiveXObject("MSXML2,XMLHTTP");

因此兼容寫法如下

var xhr = '';
window.ActiveXObject ? xhr = new ActiveXObject('MSXML2,XMLHTTP') : xhr = new XMLHttpRequest();

三、XHR用法

創建完XHR對象后，要調用open()方法創建請求，open()方法接受三個參數：

1.要發送的請求的類型(如"get"、"post"等)

2.請求的URL

3.表示是否異步發送請求的布爾值(默認為true，表示異步)

xhr.open("get","index.php",true);

post()請求方法如下面代碼

xhr.open("get","index.php",true);
//post()方法必須在send()方法之前加上下面這段代碼
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

說明一點：URL相對於執行代碼的當前頁面，也可以用絕對路徑

准備工作做好后，調用send()方法發送請求，

xhr.send(null);

這里get方法傳輸的數據已經放到url中，可以將參數設置為null

在調用send()方法后，請求就會被分派到服務器，onreadychange捕獲請求的狀態碼，並進行檢測

onreadychange對象有個readyState屬性，該屬性的值表示當前的活動階段，其值有如下幾個：

0：未初始化。尚未調用open()方法

1：啟動。已經調用open()方法，但尚未調用send()方法

2：發送。已經調用send()方法，但尚未接收到響應

3：接收。已經接受到部分響應數據

4：完成。已經接受到全部響應數據，並且可以在客戶端使用

我們只需判斷readyState的值是否為4就可以知道所有數據已經就緒。

xhr.onreadystatechange = function(){
    if (xhr.readyState==4) {
        //判斷狀態碼是否成功
        if (xhr.status>=200&&xhr.status<=207||xhr.status==304) {
            //調用ajax的responseText屬性返回數據
            alert(xhr.responseText);
        }else{
            alert(xhr.status);
    }  
}      

四、總結

原生ajax的請求總結為一下六個步驟

1.創建XHR對象

2.調用open()方法創建請求

3.調用send()方法發送請求

4.onreadychange捕獲請求的狀態碼

5.判斷狀態嗎是否成功

6.調用ajax的responseText屬性返回數據

//拼接路徑
function toUrl(url, data) {
    //獲取時間戳
    var time = new Date().getTime();
    data.time = time;
    var arr = [];
    for(var i in data) {
        var str = i + "=" + data[i];
        //["user"='lili',"pass"="4564522",time="145486456"]
        arr.push(str);
    }
    var str = arr.join("&"); //"user=lili&pass=4564522&time=145486456"
    var path = url + "?" + str;
    return path;
}
function fnAjax(obj) {
    var data = obj.data||{};//可選，如果沒有data就新建一個
    var path = toUrl(obj.url,data);
    var sendType = obj.sendType||"get";
    var succFn = obj.succFn||false;
    var failFn = obj.failFn||false;
    //1、創建一個XMLHttpRequest對象
    //兼容寫法
    if(window.ActiveXObject) {
        var ajax = new ActiveXObject("MSXML2,XMLHTTP");//兼容IE6、7
    } else {
        var ajax = new XMLHttpRequest();//現代瀏覽器
    }
    //2、創建一個請求
    var time = new Date().getTime();
    //判斷傳送的類型
    if (sendType=="get") {
        ajax.open("get", path);
        ajax.send(path);
    }else{
        var pathArr = path.split("?");
        ajax.open("post", pathArr[0]);// pathArr[0]?之前的內容
        //url = "test.txt?time=12365478"
        //3、發送請求
        //get方法傳輸的數據已經放到url中，可以將參數設置為null
        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        ajax.send(pathArr[1]);//pathArr[1]?之后的內容
    }
    //4、檢測請求的狀態
    ajax.onreadystatechange = function() {
        //如果ajax對象的准備狀態發生改變執行事件
        //onreadystatechange事件是在readyState屬性發生改變時觸發的，
        //readyState的值表示當前請求的狀態，在事件處理程序中可以根據這個值來進行不同的處理。
        //5、判斷請求的狀態
        if(ajax.readyState == 4) {
            //6、判斷請求結果
            if(ajax.status >= 200 && ajax.status <= 207 || ajax.status == 304) {
                //7、請求成功拿到返回的結果
                if (succFn) {
                    succFn(ajax.responseText);
                }
            } else {
                if (failFn) {
                    failFn(ajax.status);
                }                
            }
        }
    }
}