这两天仔细理解了一下Ajax,然后整理封装了一下，如果有什么不对的地方，请指教，谢谢！
AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
XHR 的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。
虽然Ajax 中的x 代表的是XML，但Ajax 通信和数据格式无关，也就是说这种技术不一定使用XML。
详细标准可以去W3C：http://www.w3school.com.cn/ajax/ajax_intro.asp
首先是创建一个XHR对象：
function createXHR() {
if( typeof XMLHttpRequst !== 'undefined') {
return new XMLHttpRequest();
} else if( typeof ActiveXObject !== 'undefined') {//否则判断ActiveXObject ,IE6及以下
if( typeof arguments.callee.activeXString != 'string') {
var versions = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
for(var i = 0, len = versions.length; i < len; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch(ex) {
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else{
throw new Error('No XHR object available');
}
}
IE7+、Firefox、Opera、Chrome 和Safari 都支持原生的XHR 对象，在这些浏览器中创建XHR 对象可以直接实例化XMLHttpRequest 即可，如果是IE6 及以下，那么我们必须还需要使用ActiveX 对象通过MSXML 库来实现。在低版本IE 浏览器可能会遇到三种不同版本的XHR 对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。将这三个不同版本放在一个数组里，然后循环尝试创建一个XHR对象，成功则跳出循环，若都不支持则抛出一个错误。具体可以查阅JavaScript 高级程序设计（第3版）。
这里我们要进行封装，然后通过引入调用：
//调用ajax
JR.ajax({
method : 'post',
url : 'demo.php',
data : {
'name' : 'JR',
'age' : 22
},
timeout : 5000,
success : function (response) {
alert(response);
},
error : function (status,statusText) {
alert('获取数据错误！错误代号：' + status + '，错误信息：' + statusText);
},
complete : function () {
alert("请求完成");
},
async : true
});
对于封装，自己搜索了一些资料，但还是不是很透彻，所以如果我的封装方式有问题，还望指正，非常感谢！
JR.ajax = function(obj){
//初始化对象，没填某项时使用默认值代替
obj = {
//请求方法，默认POST
method: obj.method || "POST",
//请求的URL
url:obj.url || "",
//发送的请求数据参数
data: obj.data || "",
//请求超时的时间，默认5秒
timeout: obj.timeout || 5000,
//请求成功时执行的函数
success: obj.success || function(){},
//请求失败时执行的函数
error: obj.error || function(){},
//请求完成（不管成功还是失败都会调用）时执行的函数
complete: obj.complete || function(){},
//同步还是异步，默认异步
async : obj.async || true
};
//创建XHR对象
var xhr = (function(){
if( typeof XMLHttpRequst !== 'undefined') {
return new XMLHttpRequest();
} else if( typeof ActiveXObject !== 'undefined') {//否则判断ActiveXObject
if( typeof arguments.callee.activeXString != 'string') {
var versions = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
for(var i = 0, len = versions.length; i < len; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch(ex) {
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else{
throw new Error('No XHR object available');
}
})();
var requestDone = false,//标志请求是否完成
//通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
obj.url = obj.url + '?rand=' + Math.random();
//将名值对转换成字符串
obj.data = (function(data){
var arr = [];
for (var i in data) {
//特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
})(obj.data);
//若是GET请求，则将数据加到url后面
if (obj.data !== '' && obj.method === 'get') {
obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
}
//在使用XHR对象时，必须先调用open()方法，
//它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
xhr.open(obj.method, obj.url, obj.async);
//初始化一个5秒的回调函数，用于取消请求（如果尚未完成的话）
setTimeout(function(){
requestDone = true;
}, obj.timeout);
if (obj.async === true) { //true表示异步，false表示同步
//使用异步调用的时候，需要触发readystatechange 事件
//监听文档状态的更新
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && !requestDone) { //判断对象的状态是否交互完成
callback(); //回调
}
};
}
if (obj.method === 'post') {
//post方式需要自己设置http的请求头，来模仿表单提交。
//放在open方法之后，send方法之前。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data); //post方式将数据放在send()方法里
} else {
xhr.send(null); //get方式则填null
}
if (obj.async === false) { //同步
callback();
}
function callback() {
if (xhr.status == 200) { //判断http的交互是否成功，200表示成功
obj.success(xhr.responseText); //成功
} else {
obj.error(xhr.status,xhr.statusText) //失败
}
//调用完成回调函数
opt.complete();
//避免内存泄漏，清理文档
xhr = null;
}
return this;
};
如果有自己封装的JS库的话，这个可以作为一个插件引入，至于这点，我将继续努力，将常用到的JS方法封装成自己的JS库，加油！
PS：Ajax请求中POST方式和GET方式的对比:
|
POST方式 |
GET方式 |
| 每次都执行 | 同一个地址不重复执行 |
| 不可缓存 | 可被缓存 |
| 通过HTTP POST机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址，用户看不到这个过程 | 把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一 一对应，在URL中可以看到 |
| 服务器端用Request.Form 获取提交的数据 | 服务器端用Request.QueryString 获取变量的值 |
| 传送的数据量较大，一般被默认为不受限制，但理论上，因服务器的不同而异 | 传送的数据量较小，不能大于2KB |
| 安全性较高 | 安全性非常低 |
| method 为post时，action页面后边带的参数列表不忽视，故不一样 | method 为get时，action页面后边带的参数列表会被忽视 |
| 数据是放在HTTP主体中的，其组织方式不止一种，有&连接方式，也有分隔符方式，可隐藏参数，传递大批数据，比较方便 | 它将数据添加到URL中，通过这种方式传递到服务器，通常利用一个问号？代表URL地址的结尾与数据参数的开端，后面的参数每一个数据参数以“名称=值”的形式出现，参数之间用&区分 |