對ajax理解及原生封裝

onreadystatechange 事件

當請求被髮送到服務器時，我們需要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性	描述
onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 對象已建立，但請求未初始化 1: 服務器連接已建立，尚未調用send() 2: 請求已接收,send()方法已調用，但是當前的狀態及http頭未知 3: 請求處理中，已接受部分數據，因爲響應機http頭不全，這時通過responseText獲取部分數據會出現錯誤 4: 請求已完成，且響應已就緒
status	200: "OK" 404: 未找到頁面

在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。

當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

//封裝Ajax

function(method, url, success, fail, data) {
//第一個參數:method用來表示請求的傳送方式GET/POST
//最後一個參數是一個對象，裏面存儲了要提交的數據
var ajax = window.XMTLHttpRequest ? window.XMLHttpRequest() : window.ActiveXObject('Microsoft.XMLHTTP');
var str = '';
if (data instanceof Object) {
//判斷data是不是一個對象
for(var k in data){
str = str + k + '=' + data.k + '&';
}
//去掉最後一個&符號
str = str.substring(0,str.length - 1);
//至此data中的數據已經轉換成指定格式的字符串
}
//處理method的字符串
method = method.toUpperCase();
if(method == 'GET'){
url = url + '?' + str;
}
ajax.onreadystatechange = function(){
if (ajax.readyState == 4) {
if (ajax.status == 200) {
if (success instanceof Function) {
success(ajax.responseXML || responseText);
}
}else{
if (fail instanceof Function) {
fail(ajax.status);
}
}
}
}
ajax.open(method, url, true);
if (method == 'GET') {
//如果是get方式，則send方法中的參數爲null
ajax.send(null);

}else if(method == 'POST'){

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //POST中，這句必須

//如果是post方式，則send方法中的參數爲要傳送的數據，就是上面拼接好的字符串
ajax.send(str);
}
}