@拭目以待：首發于原生js實現ajax及get post方法
ajax原生實現，含 post與get方法。原碼如下:
/*
* ajax
* type === GET: data格式 name=baukh&age=29
* type === POST: data格式 { name: 'baukh', age:29 }
* 與 jquery 不同的是,[success, error, complete]返回的第二個參數, 并不是返回錯誤信息, 而是錯誤碼
* */
var extend = require('./extend');
var utilities = require('./utilities');
function ajax(options) {
var defaults = {
url: null,// 請求地址
type: 'GET',// 請求類型
data: null,// 傳遞數據
headers: {},// 請求頭信息
async: true,// 是否異步執行
beforeSend: utilities.noop,// 請求發送前執行事件
complete: utilities.noop,// 請求發送后執行事件
success: utilities.noop,// 請求成功后執行事件
error: utilities.noop// 請求失敗后執行事件
};
options = extend(defaults, options);
if (!options.url) {
utilities.error('jTool ajax: url不能為空');
return;
}
var xhr = new XMLHttpRequest();
var formData = '';
if (utilities.type(options.data) === 'object') {
utilities.each(options.data, function (key, value) {
if(formData !== '') {
formData += '&';
}
formData += key + '=' + value;
});
}else {
formData = options.data;
}
if(options.type === 'GET' && formData) {
options.url = options.url + (options.url.indexOf('?') === -1 ? '?' : '&') + formData;
formData = null;
}
xhr.open(options.type, options.url, options.async);
for (var key in options.headers) {
xhr.setRequestHeader(key, options.headers[key]);
}
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 執行發送前事件
options.beforeSend(xhr);
// 監聽onload并執行完成事件
xhr.onload = function() {
// jquery complete(XHR, TS)
options.complete(xhr, xhr.status);
};
// 監聽onreadystatechange并執行成功失敗事件
xhr.onreadystatechange = function() {
if (xhr.readyState !== 4) {
return;
}
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
// jquery success(XHR, TS)
options.success(xhr.response, xhr.status);
} else {
// jquery error(XHR, TS, statusText)
options.error(xhr, xhr.status, xhr.statusText);
}
};
xhr.send(formData);
}
function post(url, data, callback) {
ajax({ url: url, type: 'POST', data: data, success: callback });
}
function get(url, data, callback) {
ajax({ url: url, type: 'GET', data: data, success: callback });
}
module.exports = {
ajax: ajax,
post: post,
get: get
};
代碼中調用了 extend與 utilities類，如果想了解更多，請關注 jTool
@拭目以待
個人站點：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
微信公眾賬號：loveJavascript
