Ajax原理，技术封装与完整示例代码

在做项目和学习的时候，经常用到Ajax的相关技术，但是这方面的技术总是运用的不是十分好，就寻找相关博客来学习加深Ajax技术相关。

• 一、Ajax简介
• 二、同步、异步传输区别
  • 2.1 异步传输
  • 2.2 同步传输
• 三、Ajax所包含的技术
• 四、基础Ajax示例
• 五、完整Ajax示例
• 六、AJAX状态值与状态码区别
• 七、AJAX运行步骤与状态值说明
• 八、AJAX状态码说明
• 九、AJAX运行步骤示例图
• 参考链接

---

---

---

一、Ajax简介

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。AJAX 技术的广泛使用，对B/S模式应用慢慢取代了桌面软件起到了很大的推动作用。

二、同步、异步传输区别

异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。

2.1 异步传输

具体来说，异步传输是将比特分成小组来进行传送。一般每个小组是一个8位字符，在每个小组的头部和尾部都有一个开始位和一个停止位，它在传送过程中接收方和发送方的时钟不要求一致，也就是说，发送方可以在任何时刻发送这些小组，而接收方并不知道它什么时候到达。

一个最明显的例子就是计算机键盘和主机的通信，按下一个键的同时向主机发送一个8比特位的ASCII代 码，键盘可以在任何时刻发送代码，这取决于用户的输入速度，内部的硬件必须能够在任何时刻接收一个键入的字符。这是一个典型的异步传输过程。

异步传输存在 一个潜在的问题，即接收方并不知道数据会在什么时候到达。在它检测到数据并做出响应之前，第一个比特已经过去了。这就像有人出乎意料地从后面走上来跟你说 话，而你没来得及反应过来，漏掉了最前面的几个词。因此，每次异步传输的信息都以一个起始位开头，它通知接收方数据已经到达了，这就给了接收方响应、接收 和缓存数据比特的时间；在传输结束时，一个停止位表示该次传输信息的终止。按照惯例，空闲（没有传送数据）的线路实际携带着一个代表二进制1的信号。步传输的开始位使信号变成0，其他的比特位使信号随传输的数据信息而变化。最后，停止位使信号重新变回1，该信号一直保持到下一个开始位到达。例如在键盘上数字“1”，按照8比特位的扩展ASCII编码，将发送“00110001”，同时需要在8比特位的前面加一个起始位，后面一个停止位。

2.2 同步传输

同步传输的比特分组要大得多。它不是独立地发送每个字符，每个字符都有自己的开始位和停止位，而是把它们组合起来一起发送。我们将这些组合称为数据帧，或简称为帧。

数据帧的第一部分包含一组同步字符，它是一个独特的比特组合，类似于前面提到的起始位，用于通知接收方一个帧已经到达，但它同时还能确保接收方的采样速度和比特的到达速度保持一致，使收发双方进入同步。

帧的最后一部分是一个帧结束标记。与同步字符一样，它也是一个独特的比特串，类似于前面提到的停止位，用于表示在下一帧开始之前没有别的即将到达的数据了。

同步传输通常要比异步传输快速得多。接收方不必对每个字符进行开始和停止的操作。一旦检测到帧同步字符，它就在接下来的数据到达时接收它们。另外，同步传输的开销也比较少。例如，一个典型的帧可能有500字节（即4000比特）的数据，其中可能只包含100比特的开销。这时，增加的比特位使传输的比特总数增加2.5%，这与异步传输中25 %的增值要小得多。随着数据帧中实际数据比特位的增加，开销比特所占的百分比将相应地减少。但是，数据比特位越长，缓存数据所需要的缓冲区也越大，这就限制了一个帧的大小。另外，帧越大，它占据传输媒体的连续时间也越长。在极端的情况下，这将导致其他用户等得太久。

了解了同步和异步的概念之后，大家应该对ajax为什么可以提升用户体验应该比较清晰了，它是利用异步请求方式的。打个比方，如果现在你家里所在的小区因 某种情况而面临停水，现在有关部门公布了两种方案，一是完全停水8个小时，在这8个小时内完全停水，8个小时后恢复正常。二是不完全停水10 个小时，在这10个小时内水没有完全断，只是流量比原来小了很多，在10个小时后恢复正常流量，那么，如果是你你会选择哪种方式呢？显然是后者。

三、Ajax所包含的技术

1. 使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3. 使用XMLHttpRequest来和服务器进行异步通信。
4. 使用javascript来绑定和调用。

四、基础Ajax示例

function ajax(a){
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function(){
        if (ajax.readyState == 4 && ajax.status == 200) {
            a.success(JSON.stringify(ajax.responseText))
        }
    }
    ajax.open(a.method, a.url,true)
    ajax.send(a.data)
}  
ajax({
    method:'get',
    url:'http://localhost:8080/test',
    success:function(res){
        console.log(res)
    }
})  

调用ajax的open方法，open方法里有三个参数，第一个是请求方式（如：get或post），第二个是请求的url地址，第三个是一个bool值，是否要异步请求。

最后使用send方法带上参数发送请求即可。

再来完善一下这个新生的ajax。我们只需要在onreadystatechange方法里增加一个条件，当请求不成功时调用自身的error方法：

ajax.onreadystatechange = function(){
    if (ajax.readyState == 4 && ajax.status == 200) {
        a.success(JSON.stringify(ajax.responseText))
    }else{
        a.error(ajax)
    }
}  

在ajax请求的时候加上error方法，当ajax请求失败的时候执行我们想要执行的操作。现在我们抛除跨域请求的问题，当你发送post请求时，你会发现后台接收不到传过来的参数，调用如下：

ajax({
    method:'get',
    url:'http://localhost:8081/test',
    data:'a=1',
    success:function(res){
        console.log(res)
    },
    error:function(res){
        console.log(res)
    }
})  

后端打印一下传过来的参数，为空。

map[]

出现这个问题的原因主要是请求头没有声明，这时候我们需要初始化声明一下请求头，那我们加入一行代码：

ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

设置Conten-type为application/x-www-form-urlencoded，现在后端应该是已经可以收到参数了。

function ajax(a){
    a.method = a.method || 'get';
    a.ajax = a.ajax || true;
    a.error = a.error || function(){
        console.warn('Ajax请求失败');
    };
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function(){
        if (ajax.readyState == 4 && ajax.status == 200) {
            a.success(JSON.stringify(ajax.responseText))
        }else{
            a.error(ajax)
        }
    }
    ajax.open(a.method, a.url,a.ajax)
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.send(a.data)
}  

ajax还存在一个问题，在post请求的时候，如果我们要传参，是需要通过字符串传参的。

a=1&b=2  

一般框架的传参都是通过json的格式来输入的，我们也不能偏离大众习惯搞独立，当然我们也要保留字符串的传参方式，只是要扩展功能。

加一个控制格式的参数，我们这里用dataType这个参数来控制传参格式，默认是字符串格式传参好了，可以选择json格式进行传参即可。如果是json格式传参，我们需要把json转化成字符串类型，代码如下：

a.dataType = a.dataType || 'string';
var data = a.data;
if (a.dataType == 'json') {
    var nowData = "";
    for (var i in data) {
        nowData += (nowData != ''?'&':'')+i+'='+data[i];
    }
    data = nowData;
}  

这样，我们的ajax也就可以通过json格式进行传参了。现在的ajax完整代码和调用方式如下：

function ajax(a){
    a.method = a.method || 'get';
    a.ajax = a.ajax || true;
    a.dataType = a.dataType || 'string';
    a.error = a.error || function(){
        console.warn('Ajax请求失败');
    };
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function(){
        if (ajax.readyState == 4 && ajax.status == 200) {
            a.success(JSON.stringify(ajax.responseText))
        }else{
            a.error(ajax)
        }
    }
    var data = a.data;
    if (a.dataType == 'json') {
        var nowData = "";
        for (var i in data) {
            nowData += (nowData != ''?'&':'')+i+'='+data[i];
        }
        data = nowData;
    }
    ajax.open(a.method, a.url,a.ajax)
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.send(data)
}
//调用Ajax示例
ajax({
    method:'post',
    url:'http://localhost:8081/test',
    dataType:'json',
    data:{
        a:'1',
        b:'2'
    },
    success:function(res){
        console.log(res)
    }
})  

现在这个Ajax基本上已经可以满足业务上的所以需求，不过还有一点没有实现，我们的Ajax不能设置请求头？！为了一些特殊需求的情况下，我们还是要把这一功能加上的：

if (a.requestHeader) {
    for (var i in a.requestHeader) {
        ajax.setRequestHeader(i,a.requestHeader[i])
    }
}  

五、完整Ajax示例

function ajax(a){
    a.method = a.method || 'get';
    a.ajax = a.ajax || true;
    a.dataType = a.dataType || 'string';
    a.error = a.error || function(){
        console.warn('Ajax请求失败');
    };
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function(){
        if (ajax.readyState == 4 && ajax.status == 200) {
            a.success(JSON.parse(ajax.responseText))
        }else if (ajax.readyState != 4 && ajax.status != 200){
            a.error(ajax)
        }
    }
    var data = a.data;
    if (a.dataType == 'json') {
        var nowData = "";
        for (var i in data) {
            nowData += (nowData != ''?'&':'')+i+'='+data[i];
        }
        data = nowData;
    }
    ajax.open(a.method, a.url,a.ajax)
    if (a.requestHeader) {
        for (var i in a.requestHeader) {
            ajax.setRequestHeader(i,a.requestHeader[i])
        }
    }
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.send(data)
}  

六、AJAX状态值与状态码区别

AJAX状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。如：正在发送，正在响应等，由AJAX对象与服务器交互时所得；使用“ajax.readyState”获得。（由数字1~4单位数字组成）

AJAX状态码是指，无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成，详细查看RFC）

这就是我们在使用AJAX时为什么采用下面的方式判断所获得的信息是否正确的原因。

if(ajax.readyState == 4 && ajax.status == 200) { putData(ajax.responseText);}

七、AJAX运行步骤与状态值说明

在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是。

0 - (未初始化)还没有调用send()方法

1 - (载入)已调用send()方法，正在发送请求

2 - (载入完成)send()方法执行完成，

3 - (交互)正在解析响应内容

4 - (完成)响应内容解析完成，可以在客户端调用了

对于上面的状态，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。

八、AJAX状态码说明

1**：请求收到，继续处理

2**：操作成功收到，分析、接受

3**：完成此请求必须进一步处理

4**：请求包含一个错误语法或不能完成

5**：服务器执行一个完全有效请求失败

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功

201——提示知道新文件的URL

202——接受和处理、但处理未完成

203——返回信息不确定或不完整

204——请求收到，但返回信息为空

205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到

301——删除请求数据

302——在其他地址发现了请求数据

303——建议客户访问其他URL或访问方式

304——客户端已经执行了GET，但文件未变化

305——请求的资源必须从服务器指定的地址得到

306——前一版本HTTP中使用的代码，现行版本中不再使用

307——申明请求的资源临时性删除

400——错误请求，如语法错误

401——请求授权失败

402——保留有效ChargeTo头响应

403——请求不允许

404——没有发现文件、查询或URl

405——用户在Request-Line字段定义的方法不允许

406——根据用户发送的Accept拖，请求资源不可访问

407——类似401，用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的饿时间内完成请求

409——对当前资源状态，请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

500——服务器产生内部错误

501——服务器不支持请求的函数

502——服务器暂时不可用，有时是为了防止发生系统过载

503——服务器过载或暂停维修

504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长

505——服务器不支持或拒绝支请求头中指定的HTTP版本

九、AJAX运行步骤示例图

参考链接

从0到1 JavaScript封装一个自己的Ajax并完善与拓展Ajax

作者：俞圣磊

Ajax原理学习

AJAX的一些硬知识