// ajax操作
/*options = {
type : "get|post", // 請求方式，默認(rèn) "get"
url : "xxx.php", // 請求資源的URL
async : true, // 是否異步請求，默認(rèn)為 true
data : {}, // 向服務(wù)器傳遞的數(shù)據(jù){username:"xiaoming", password:"abc", phone:"123"}
dataType : "text|json", // 預(yù)期從服務(wù)器返回的數(shù)據(jù)格式
success : function(data){},? // 請求成功執(zhí)行的函數(shù)
error : function(errMsg){} // 請求失敗執(zhí)行的函數(shù)
}*/
function ajax(options) {
if (!options) // 未傳遞參數(shù)，結(jié)束函數(shù)執(zhí)行
return;
// 獲取請求的URL
var url = options.url;
if (!url) // 沒有請求的服務(wù)器資源，結(jié)束函數(shù)執(zhí)行
return;
// 獲取請求方式
var method = options.type || "get";
// 是否異步
var async = options.async;
if (async === undefined)
async = true;
// 處理查詢字符串
var queryString = null;
if (options.data) { // 有向服務(wù)器傳遞的數(shù)據(jù)，則連接查詢字符串
queryString = [];
for (var attr in options.data) {
queryString.push(attr + "=" + options.data[attr]);
}
queryString = queryString.join("&");
}
// 如果是 get 提交數(shù)據(jù)，將數(shù)據(jù)用 ? 號(hào)串聯(lián)在 url 中
if (method === "get" && queryString) {
url += "?" + queryString;
queryString = null;
}
// 創(chuàng)建核心對象
var xhr;
if (window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else
xhr = new ActiveXObject("Microsoft.XMLHTTP");
// 建立連接
xhr.open(method, url, async);
// 如果要像表單一樣POST提交數(shù)據(jù)，則設(shè)置請求頭
if (method === "post")
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 發(fā)送請求
xhr.send(queryString);
if (async) { // 異步
// 處理響應(yīng)
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 獲取響應(yīng)文本
var data = xhr.responseText;
// 判斷預(yù)期返回的數(shù)據(jù)格式
if (options.dataType === "json")
data = JSON.parse(data);
// 請求成功時(shí)數(shù)據(jù)處理業(yè)務(wù)
options.success && options.success(data);
} else {
// 請求失敗處理情況
options.error && options.error(xhr.statusText);
}
}
}
} else { // 同步
if (xhr.status === 200) {
// 獲取響應(yīng)文本
var data = xhr.responseText;
// 判斷預(yù)期返回的數(shù)據(jù)格式
if (options.dataType === "json")
data = JSON.parse(data);
// 請求成功時(shí)數(shù)據(jù)處理業(yè)務(wù)
options.success && options.success(data);
} else {
// 請求失敗處理情況
options.error && options.error(xhr.statusText);
}
}
}
//封裝完成后，根據(jù)自身情況選擇
// 用于處理get請求
function get(url, data, success, dataType) {
ajax({
type : "get",
url : url,
data : data,
dataType : dataType,
success : success
});
}
// 用于處理post請求
function post(url, data, success, dataType) {
ajax({
type : "post",
url : url,
data : data,
dataType : dataType,
success : success
});
}
// 用于處理get請求，響應(yīng)數(shù)據(jù)的格式為json格式
function getJSON(url, data, success) {
ajax({
type : "get",
url : url,
data : data,
dataType : "json",
success : success
});
}
