AJAX的实现原理以及封装

作为一名撸啊撸玩家，Ajax的中文名，让我不禁想起了当年在S3赛季威风凛凛的武器大师，贾克斯！

难得这份熟悉感，学好AJAX（阿贾克斯），应该不是难事。

下面言归正传： 那何为AJAX？

首先我们从名字入手，

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

异步，JS,XML，这几个词我们都认识，又或者听说过，这样一来，我们是不是可以大胆地能推测出AJAX并非一种新的编程语言？

没错，骚年，正是如此！

这只不过是新罐子装旧药，一种使用现有标准的新方法。而它的作用，是在不重新加载整个页面的情况下，能够与服务器交换数据并更新部分网页。

用W3School里面的话来说，这是一种艺术。

好比git提交东西时，没有提示便是最好的提示，这更是一种哲理思想。

满分！

其实AJAX内部实现并不麻烦，主要通过一个叫XMLHttpRequest的对象，而这个对象在现有的浏览器均被支持。

可以说，它是整个AJAX实现的基础，是浏览器用于后台与服务器交换数据的对象，有了它，才有了AJAX，也便有了部分页面刷新的艺术！

创建 XMLHttpRequest 对象的语法很简单，如下：

var xhr=new XMLHttpRequest();

有了这个对象，我们就能使用其自身携带的方法，来做到与服务器交互数据。

发送请求的方法必不可少：send()；

但在发送之前，是不是得规定一下请求里面的东西， 于是有了open();方法。

两语法如下：

xhr.open("GET","test1.txt",true);
xhr.send();

这是具体的参数描述：
open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string): 将请求发送到服务器。
string：仅用于 POST 请求

至于GET与POST，该如何选择？下面引用W3School 的一段话：

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET与POST请求本身也是一个不小的知识点，请自行学习，起码得了解，GET请求，参数是拼接到url上面；而POST请求需要设置请求头，用来传递参数，不然下面的封装，会有点烦躁。

发送请求就绪，接下来是响应。当请求被发送到服务器时，我们需要执行一些基于响应的任务。

在客户端能做的事情不多，无非就是看一下自己的请求状态，再监听一下服务器响应回来的东西，从而进行判断，做出处理。

请求状态如何，可以通过XMLHttpReques对象的readyState属性的值来查看，分为：

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

那这请求状态值有什么用呢？

它是以其中一个判断条件的作用存在，只有当状态值为4时，才证明响应的数据被解析完成，返回给客户端。

而每当 readyState状态值被改变时，就会触发一个叫 onreadystatechange 事件，这个事件是XMLHttpRequest对象的一个属性。

onreadystatechange 事件一共会被触发 5 次（0 - 4），对应着 readyState 的每个变化。

所以说，只要当状态值为4时，我们就可以获得响应回来的数据。

但是刚才说了，状态值只是作为其中的一个判断条件，还有一个判断条件是监听服务器的状态码。

status
200: 表示"OK"
404: 表示未找到页面

这个状态码是在服务器连接建立的时候就能监听到（readyState状态值为1的时候）。具体的工作流程，请下面的图示：



到这一步，readyState为4 且status为200时，我们已经进入到拿数据的环节。

至于怎么拿数据？更简单，通过XMLHttpRequest的两个属性。

responseText ：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。

辗辗转转，终于到了封装的重头戏。这次不废话，直接上代码，原理都在上面了，注释会简单备注一下。

var $={
/*传递参数对象，返回拼接之后的字符串*/
/*{‘name’:’jack,’age’:20}=>  name=jack&age=20&*/
getParmeter:function(data){
var result="";
for(var key in data){
result=result+key+"="+data[key]+"&";
}
/*将结果最后多余的&截取掉*/
return result.slice(0,-1);
},
/*实现ajax请求*/
ajax:function(obj){
/*1.判断有没有传递参数，同时参数是否是一个对象*/
if(obj==null || typeof obj!="object"){
return false;
}
/*2.获取请求类型,如果没有传递请求方式，那么默认为get*/
var type=obj.type || 'get';
/*3.获取请求的url  location.pathname:就是指当前请求发起的路径*/
var url=obj.url || location.pathname;
/*4.获取请求传递的参数*/
var data=obj.data || {};
/*4.1获取拼接之后的参数*/
data=this.getParmeter(data);
/*5.获取请求传递的回调函数*/
var success=obj.success || function(){};

/*6:开始发起异步请求*/
/*6.1:创建异步对象*/
var xhr=new XMLHttpRequest();
/*6.2:设置请求行,判断请求类型，以此决定是否需要拼接参数到url*/
if(type=='get'){
url=url+"?"+data;
/*重置参数，为post请求简化处理*/
data=null;
}
xhr.open(type,url);
/*6.2:设置请求头:判断请求方式，如果是post则进行设置*/
if(type=="post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
/*6.3:设置请求体,post请求则需要传递参数*/
xhr.send(data);

/*7.处理响应*/
xhr.onreadystatechange=function(){
/*8.判断响应是否成功*/
if(xhr.status==200 && xhr.readyState==4){
/*客户端可用的响应结果*/
var result=null;
/*9.获取响应头Content-Type ---类型是字符串*/
var grc=xhr.getResponseHeader("Content-Type");
/*10.根据Content-Type类型来判断如何进行解析*/
if(grc.indexOf("json") != -1){
/*转换为js对象*/
result=JSON.parse(xhr.responseText);
}
else if(grc.indexOf("xml") != -1){
result=xhr.responseXML;
}
else{
result=xhr.responseText;
}
/*11.拿到数据，调用客户端传递过来的回调函数*/
success(result);
}
}

}
};

调用方式与jquery类似的：
$.ajax({
url:'',
type:'',
data: {},
success:function(result){
//code...
}
});

参考文章：

http://www.w3school.com.cn/ajax/index.asp

http://lylgxy0704wht.blog.163.com/blog/static/57048039201151693116644/

若是有误人子弟的地方，务必指出，大谢大谢。

——龙猫村庄1号村民敬上！