AJAX

AJAX是非同步JavaScript和XML（Asynchronous JavaScript And XML)，它是一種方法，允許網頁在不重新加在整個頁面的情況下更新一部分網頁。

AJAX非同步請求的過程

AJAX的核心是XMLHttpRequest物件，其中的方法可以用來在瀏覽器和伺服器之間傳輸資料。

1.建立XMLHttpRequest物件

var xhr=new XMLHttpRequest();

2.連線伺服器

xhr.open('GET',url,true);  //設定請求的引數（method，url，async）

method有get和post兩種
URL是檔案的路徑，後面可以帶引數
async為true（非同步，預設）或false（同步）

3.向服務端傳送請求

xhr.send();  //傳送請求

4.監聽伺服器狀態並對返回結果執行相應回撥

if(xhr.readyState==4&&xhr.status==200||xhr.status==304){  //readyState==4說明請求已完成
            fn.call(this,xhr.responseText);
        }
    }
}

XMLHttpRequest取得的響應資料

• responseText:獲得字串形式的響應資料
• responseXML：獲得xml形式的響應資料
• status和statusText：以數字和文字形勢返回http轉態碼
• getAllResponseHeader():獲得所有的相應
• getResponseHeader()：查詢相應中的某個欄位的值
• readState屬性

readystate的五種返回值所代表的意義

• 0（未初始化） 還沒呼叫open()方法
• 1（載入）已經呼叫send(),正在傳送請求
• 2（載入完成）send()方法已經完成，已收到響應
• 3（解析）正在解析響應內容
• 4（完成）響應內容解析完成，可在客戶端呼叫。

完整程式碼實現

GET:
GET是直接在URL上傳資料的。

function AJAX(url,fn){
    var xhr=new XMLHttpRequest();  //建立非同步物件
    xhr.open('GET',url,true);  //設定請求的引數
    xhr.send();//傳送請求
    xhr.onreadystatechange=function(){  //監聽狀態變化，執行相應的回撥
        if(xhr.readyState==4&&xhr.status==200){  //readyState==4說明請求已完成
            fn.call(this,xhr.responseText);
        }
    }
}
 

POST：
POST需要新增請求頭，資料通過send()來傳輸。

function post(url,data,fn){
    var xhr=new XMLHttpRequest();
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.open('post',url,true)；
    xhr.send(data);
    xhr.onreadystatechange=function(){  //監聽狀態變化，執行相應的回撥
        if(xhr.readyState==4&&xhr.status==200||xhr.status==304){  //readyState==4說明請求已完成
            fn.call(this,xhr.responseText);
        }
    }
}