工作之余簡(jiǎn)單封裝了ajax的請(qǐng)求忠怖，但是工作中還是用jquery，axios，angular內(nèi)部封裝好了http模塊（笑）暴凑。
ajax一般分為簡(jiǎn)單的四部：
- 創(chuàng)建ajax對(duì)象（這里兼容ie的話要做一下處理）
- 連接，即請(qǐng)求對(duì)象的open方法（get和post還有點(diǎn)不同赘来，get參數(shù)要放在url后面现喳，post要設(shè)置請(qǐng)求頭）
- 發(fā)送，即請(qǐng)求對(duì)象的send函數(shù)（post參數(shù)則放在send里面）
- 接收犬辰，在onreadystatechange（存儲(chǔ)函數(shù)或函數(shù)名嗦篱，每當(dāng)readyState屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)幌缝。）函數(shù)里面處理灸促。
還可以加上超時(shí)這些
onreadystatechange分析
-
要先判斷readyState的狀態(tài)（有四個(gè)狀態(tài)）
①： 0，請(qǐng)求未初始化；
②： 1腿宰，服務(wù)器連接已建立呕诉；
③： 2，請(qǐng)求已接收吃度；
④： 3甩挫，請(qǐng)求處理中；
⑤： 4椿每，請(qǐng)求已完成伊者，且響應(yīng)已就緒
當(dāng)readyState等于4時(shí)，你又要判斷status的狀態(tài)
請(qǐng)求成功時(shí)status狀態(tài) 200-300（不包括300） 间护，還有304（是緩存）（具體狀態(tài)可以去參考文檔）
在成功（失斠嗌）的回掉函數(shù)里面將xhr.responseText的值返回出去。
代碼
'use strict';
var $ = {};
$.ajax = ajax;
function ajax(options) {
// 解析參數(shù)
options = options || {};
if (!options.url) return;
options.type = options.type || 'get';
options.timeout = options.timeout || 0;
// 1 創(chuàng)建ajax
if (window.XMLHttpRequest) {
// 高級(jí)瀏覽器和ie7以上
var xhr = new XMLHttpRequest();
} else {
//ie6,7,8
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2 連接
var str = jsonToUrl(options.data);
if (options.type === 'get') {
xhr.open('get', `${options.url}?${str}`, true);
// 3 發(fā)送
xhr.send();
} else {
xhr.open('post', options.url, true);
// 請(qǐng)求頭
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 3 發(fā)送
xhr.send();
}
// 接收
xhr.onreadystatechange = function() {
// 完成
if (xhr.readyState === 4) {
// 清除定時(shí)器
clearTimeout(timer);
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
// 成功
options.success && options.success(xhr.responseText);
} else {
options.error && options.error( xhr.status );
}
}
};
// 超時(shí)
if (options.timeout) {
var timer = setTimeout(function(){
alert("超時(shí)了");
xhr.abort(); // 終止
},options.timeout);
}
}
// json轉(zhuǎn)url
function jsonToUrl(json) {
var arr = [];
json.t = Math.random();
for(var name in json) {
arr.push(name + '=' + encodeURIComponent(json[name]));
}
return arr.join('&');
}
