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

《野生前端工程师》专辑中所有文章均为@拭目以待 原创，转载请注明出处。