我们了解了Ajax是如何实现的，何为异步通信，Ajax的请求方式，其实都是比较零散的知识，我们平时开发并不会这样拆解来用，而是封装成一个方法，便于调用。那如何封装呢？先别急，先看jquery是如何封装Ajax方法的。
本文梗概：
<a href="#tip1">1. 分析jquery对Ajax的封装</a>
<a href="#tip2">2. 封装原生Ajax</a>
<a href="#tip3">3. 总结</a>
<h2 id="tip1">1. 分析jquery对Ajax的封装</h2>
jquery已经帮我们封装好了Ajax，也有很简便的$.get()方法和$.post()方法，可能大家平时都已经用上了，但是这个封装的方法是如何实现的呢？我们今天不是分析源码的，而是根据分析它是如何把原生Ajax封装成一个方法的。
jquery的Ajax用法
$('document').ready({
$('html').click(function(){
$.ajax({
ulr:'server.php?rand='+Math.random(),
type:'GET',
data:{
name:'kuohao',
age:21
},
dataType:'text',
success: function(msg){
alert(msg);
}
});
});
});
由上面我们可以知道jquery封装了一个名为ajax的函数，然后传进一个对象，这个对象包含了我们要设置的信息。这个对象比较复杂，储存了普通字符串，对象，还有方法。实际上jquery还有更多的参数，这里只是列举出了我们常用的一些参数。
那我们是否也能够这样写原生的js
window.onload = function (){
//创建一个ajax方法
function ajax(obj){
//do something
};
//调用这个ajax方法，传进参数,这个参数为一个对象
ajax({
//设置url
ulr:'server.php?rand='+Math.random(),
//设置请求类型
type:'GET',
//设置请求数据
data:{
name:'kuohao',
age:21
},
//请求响应数据类型
dataType:'text',
//回调响应数据
success: function(msg){
alert(msg);
}
})
}
我们也使用原生的js函数，传入一个对象，去设置ajax请求，但是这个ajax函数如何实现，我们现在还不能知道，不过我们已经掌握了ajax请求的基本要领，慢慢地摸索，可以写出来的。这也是面向对象编程的一个基本特征，封装性，尽可能地屏蔽内部细节，只开放部分接口将处理好的数据返回给上下文使用。
让我们回忆一下上文是如何写ajax请求的……
- 新建对象
- 使用open方法设置并启动请求
- 使用onreadychange事件监听数据接收
- 如果是POST方法先设置请求头类型，GET方法则省略此步
- 使用send方法发送请求，如果是get请求则参数设置为null，post请求参数设置要发送的数据
<h1 id="tip2">2. 封装原生Ajax</h1>
ok，那下面就可以开始封装我们自己的原生Ajax了。
function ajax(obj){
//新建对象
var xhr = new XMLHttpRequest();
var sendValue = ''; //send方法参数初始化为''字符串
//处理传入的请求数据;
var data = [];
for(var i in obj.data){
data.push(i+'='+obj.data[i]);
}
obj.data = data.join('&');
//判断是否使用缓存，默认不使用
if(obj.cache === false || obj.cache === undefined){
obj.url += '?rand='+Math.random();
}
//判断请求类型，对url和要发送的请求数据作出处理
if(obj.type == 'get'){
obj.url += obj.url.indexOf('?') == -1 ? '?'+'&'+ obj.data : '&'+obj.data;
sendValue = null;
//判断url有没有存在的查询字符？，如果没有加上，再拼接url参数。
}else if(obj.type == 'post'){
sendValue =obj.data;
}
//准备就绪，启动请求
xhr.open(obj.type,obj.url);
//第三个参数缺省值为true，可不设置。
//监听数据接收
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
//设置判断希望接收的响应数据的类型
var dataType = obj.dataType;
if(dataType == 'text'){
dataType = 'responseText';
}else if(dataType == 'xml'){
dataType ='responseXML';
};
//使用回调函数接收数据
obj.success(xhr[dataType]);
}
};
//判断是否为POST请求，是则设置请求头类型，模拟表单
if(obj.type == 'post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
xhr.send(sendValue);
}
因为ajax函数传的参数是一个对象，要在封装的函数里作适当处理，方能使用，所以就多了前两几个步骤，还有是否使用缓存，对希望接收的响应数据类型也分别做了判断。但是基本的步骤还是那样,还有很多方法可以自己扩展，道理都一样，想清楚需求，再在封装的方法里修改，生产出想要东西，那就ok了。
注意的是，HTML如果和php脚本的编码不一致可能会造成通信数据乱码，解决办法就是给发送的请求数据进行编码，使用encodeURIComponent方法，一般设置两者设置为 “utf-8” 编码就没问题了。
<h2 id="tip3">3. 总结</h2>
Ajax初探三篇讲的就是Ajax的基本知识和基本应用，实际上都不难，使用jquery封装好的方法很简单，但是自己动手封装原生的Ajax，才能更透切地理解其中信息的传递过程和js编程的方法。我也是刚接触Ajax，如有纰漏，烦请指教，谢谢。
网友评论