本文主要跟大家分享ajax簡單封裝詳細介紹，希望能版助到大家。
ajax一般分為簡單的四部：
建立ajax物件（這裡相容ie的話要做一下處理）
連接，也就是請求物件的open方法（get和post還有點不同，get參數要放在url後面，post要設定請求頭）
發送，也就是請求物件的send函數（post參數則放在send裡面）
接收，在onreadystatechange（儲存函數或函數名，每當readyState屬性改變時，就會呼叫函數。）函數裡面處理。
還可以加上超時這些
要先判斷readyState的狀態（有四個狀態）
①： 0，請求未初始化；
②： 1，伺服器連線已建立；
③： 2，請求已接收;
④ ： 3，請求處理中；
⑤： 4，請求已完成，且回應已就緒
當readyState等於4時，你又要判斷status的狀態
請求成功時status狀態200-302 ，還有304（是快取）
'use strict';
var $ = {};
$.ajax = ajax;
function ajax(options) {
// 解析参数
options = options || {};
if (!options.url) return;
options.type = options.type || 'get';
options.timeout = options.timeout || 0;
// 1 创建ajax
if (window.XMLHttpRequest) {
// 高级浏览器和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 发送
xhr.send();
} else {
xhr.open('post', options.url, true);
// 请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 3 发送
xhr.send();
}
// 接收
xhr.onreadystatechange = function() {
// 完成
if (xhr.readyState === 4) {
// 清除定时器
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 );
}
}
};
// 超时
if (options.timeout) {
var timer = setTimeout(function(){
alert("超时了");
xhr.abort(); // 终止
},options.timeout);
}
}
// json转url
function jsonToUrl(json) {
var arr = [];
json.t = Math.random();
for(var name in json) {
arr.push(name + '=' + encodeURIComponent(json[name]));
}
return arr.join('&');
}相關推薦：
以上是ajax簡單封裝詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
