原生ajax封装

1.ajax简述：ajax通信是一种页面无刷新技术，即无需刷新页面就可以从服务器取得数据，但不一定是xml数据。最大的好处就是给用户带来了更好的用户体验，就目前来说，熟练的运用ajax已经成为了web开发人员必备的一种技能。

2. XMLHttpRequest对象

可以说ajax的核心对象就是XMLHttpRequest对象，不过浏览器对其实现不同，在IE中xhr对象是通过MSXML库中的ActiveX对象实现的，MSXML库存在三种不同的xhr对象，即MSXML2.XMLHttp MSXML2.XMLHttp.3.0 MSXML2.XMLHttp.6.0，除此之外在IE7+和其他浏览器中可以使用XMLHttpRequest构造函数：var xhr = new XMLHttpRequest(); 来创建xhr对象。考虑到兼容性，最好是编写一个函数来封装：

createXHR函数返回的是是一个xhr对象，里面的arguments.callee是一个指针，指向的是拥有arguments对象的函数，在这里就是createXHR,关于函数内部两个特殊对象arguments和this我就不介绍了。

3.XHR对象用法

• 上面xhr对象采用了get方式给demo.php发送了一个请求，并带了一个参数rand,值为随机数，这主要是为了兼容IE,因为在IE低版本中会在第一调用之后利用缓存，第三个参数false代表的是同步，默认true为异步，两者的区别是同步就像一个队列，必须先执行完ajax代码在去执行下面的代码，而异步就像是一个人做两件事，即一边执行ajax代码，一边执行下面的代码，一般来说异步能给用户带来更好的用户体验。下面的send()代表的是发送一个请求，注意上面的open方法并没有发送，它只是初始化。

• 如果换成异步的方式，用法就不同了。我们想想一个人要想做两件事，是不是要在做一件事的时候有一些提示？对，我们这边理解为onreadystateStatechange事件，当程序在执行下面的代码时，通过改事件的改变来提示我们该做ajax部分的事了。

• xhr对象readyState属性，表示请求/响应的过程。分为五个：0 未初始化，尚未代用open方法，1 启动，已经调用open方法但未调用send方法，2 发送 已调用send但未接收到相应，3 接收到部分数据，4 数据全部接收，响应完成。我们关注的主要是4,也就是可以用了。

• xhr对象responseText属性，即响应被返回的文本。

• xhr对象status属性，响应的状态，比如200表示成功，404表示页面找不到。

4.ajax封装

细节就不多说了，里面涉及了对象字面量传参，回调函数的使用，测试需要编写一个php页面，并在Apache服务器上运行，不哔哔了，直接上代码：

//封装ajax

function ajax(obj) { //接收一个对象

var xhr = createXHR();

obj.url = obj.url + ‘?rand=’ + Math.random(); //rurl

obj.data = params(obj.data); //提交的数据

//判断是那种方式提交的

if (obj.method === ‘get’) {

obj.url += obj.url.indexOf(‘?’) == -1 ? ‘?’ + obj.data : ‘&’ + obj.data;

}

alert(obj.url);

if (obj.anync === true) { //如果是同步则执行

xhr.onreadystatechange = function () { //return 并不能传递给ajax函数

if (xhr.readyState == 4) {

callback();

}

}

}

xhr.open(obj.method, obj.url, obj.anync); //准备发送

if (obj.method == ‘post’) {

xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’); //模拟表单提交

xhr.send(obj.data);

} else {

xhr.send(null);

}

if (obj.anync === false) {

if (xhr.readyState == 4) {

callback();

}

}

function callback() {

if (xhr.status == 200) { //响应状态码

obj.success(xhr.responseText); //回调函数并传参 并在这里执行

} else {

alert(‘数据返回失败，状态码：’ + xhr.status + ‘状态信息:’ + xhr.statusText);

}

}

}

//名值对转换为字符串

function params(data) {

var arr = [];

for (var i in data) {

arr.push(encodeURIComponent(i) + ‘=’ + encodeURIComponent(data[i])); //编码 防止其他字符串混进来

}

return arr.join(‘&’); //数组转换成字符串

}

//调用ajax

addEvent(document, ‘click’, function () {

ajax({ //对象传参

method: ‘post’,

url: ‘demo.php’,

data: { //传入的是一个对象 里面是名值对的形式

‘name’: ‘xia&ohe’,

‘age’: 100

},

success: function (text) {

alert(text);

},

anync: false

});

});

至此，ajax封装完成，上面我只是抛砖引玉，其实我也是个半吊子，希望和大家共同学习进步，如果喜欢，那就关注我吧！