1. 程式人生 > >封裝的ajax.js

封裝的ajax.js

不能 quest ret dsta 查詢參數 onload obj lower resp

(function () {

// 將json對象轉換成查詢字符串
var buildQueryString = function (parameter) {
var queryString = null;
if (parameter && typeof(parameter) === ‘object‘) {
for (var key in parameter) {
if (queryString) {
queryString = queryString + key + ‘=‘ + parameter[key];
}
else {
queryString = key + ‘=‘ + parameter[key];
}
}
}
return queryString;
};

var getMethod = function (options) {
// 檢查參數是否有效
if (options == null || typeof(options) !== ‘object‘) {
throw ‘參數必須為json對象.‘;
}

// 檢查url是否有效
if (options.url == null || options.url.length == 0) {
throw ‘url不能為空.‘;
}

// 檢查請求參數是否有效
if (options.param && typeof(options.param) !== ‘object‘) {
throw ‘請求參數必須為json對象.‘;
}

// 檢查回調函數是否有效
if (options.start && typeof(options.start) !== ‘function‘
|| options.complete && typeof(options.complete) !== ‘function‘
|| options.success && typeof(options.success) !== ‘function‘) {
throw ‘回調必須為函數類型.‘;
}

// 構建查詢參數
var queryString = null;

if (options.param) {
queryString = buildQueryString(options.param);
}

// 重新構建請求的url
var url = options.url;
if (null != queryString) {
url = url + ‘?‘ + queryString;
}

// 異步請求
var xhr = new XMLHttpRequest();
xhr.open(‘GET‘, url, true);
if (options.start) {
xhr.onloadstart = options.start;
}
if (options.complete) {
xhr.onloadend = options.complete;
}
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
if (options.success) {
// 根據請求方的需求,返回特定格式的數據
if (options.returnType && options.returnType.toLowerCase() === ‘json‘) {
// json
options.success(JSON.parse(this.responseText));
}
else {
// 字符串
options.success(this.responseText);
}

}
}
};
xhr.send(null);

};
var postMethod = function (options) {
var formData = new FormData();
// 封裝請求參數
if (options.param && typeof(options.param) === ‘object‘) {
for (var key in options.param) {
formData.append(key, options.param[key]);
}
}

var xhr = new XMLHttpRequest();
xhr.open(‘POST‘, options.url, true);
if (options.start) {
xhr.onloadstart = options.start;
}
if (options.complete) {
xhr.onloadend = options.complete;
}
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
if (options.success) {
// 根據請求方的需求,返回特定格式的數據
if (options.returnType && options.returnType.toLowerCase() === ‘json‘) {
// json
options.success(JSON.parse(this.responseText));
}
else {
// 字符串
options.success(this.responseText);
}
}
}
}
xhr.send(formData);
};

// 封裝ajax的get與post請求
window.ajax = {
get: getMethod,
post: postMethod
};
})();

用到原生JS,ajax請求,此腳本直接引用,無副作用。

封裝的ajax.js