ajax用jquery使用确实方便，但如果只用ajax，难道我们还会为了使用而引入jquery吗？不仅如此，用原生js实现ajax，对理解其调用过程也有帮助。下面就简单封装一个ajax.
/* 封装ajax函数
* @param {string} obj.method http连接的方式，包括POST和GET两种方式
* @param {string} obj.url 发送请求的url
* @param {boolean} obj.async 是否为异步请求，true为异步，false为同步的
* @param {object} obj.data 发送的参数，格式为对象类型
* @param {function} obj.success ajax发送并接收成功调用的回调函数
*/
function ajax(obj) {
//初始化
obj = obj || {};
obj.method = obj.method.toUpperCase() || 'POST';
obj.url = obj.url || '';
obj.async = obj.async || true;
obj.data = obj.data || null;
obj.success = obj.success || function(){};
//创建一个异步调用对象
var xmlHttp = null;
if(XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//参数处理
var params = [];
for(var key in obj.data) {
params.push(key + '=' + obj.data[key]);
}
var postData = params.join('&');
//发送http请求
if(obj.method.toUpperCase() ==='POST') {
xmlHttp.open(obj.method, obj.url, obj.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset= utf-8')
xmlHttp.send(postData);
}else if(obj.method.toUpperCase() === 'GET') {
xmlHttp.open(obj.method, obj.url + '?' + postData, obj.async);
xmlHttp.send(null);
}
//响应http状态变化函数，成功后回调
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
obj.success(xmlHttp.responseText);
}
}
}
