在做项目和学习的时候，经常用到Ajax的相关技术，但是这方面的技术总是运用的不是十分好，就寻找相关博客来学习加深Ajax技术相关。
- Ajax简介
-
同步、异步传输区别
- 异步传输
- 同步传输
- Ajax所包含的技术
- 基础Ajax示例
- 完整Ajax示例
- 参考链接
Ajax简介
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。AJAX 技术的广泛使用，对B/S模式应用慢慢取代了桌面软件起到了很大的推动作用。
同步、异步传输区别
异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。
异步传输
具体来说，异步传输是将比特分成小组来进行传送。一般每个小组是一个8位字符，在每个小组的头部和尾部都有一个开始位和一个停止位，它在传送过程中接收方和发送方的时钟不要求一致，也就是说，发送方可以在任何时刻发送这些小组，而接收方并不知道它什么时候到达。
一个最明显的例子就是计算机键盘和主机的通信，按下一个键的同时向主机发送一个8比特位的ASCII代 码，键盘可以在任何时刻发送代码，这取决于用户的输入速度，内部的硬件必须能够在任何时刻接收一个键入的字符。这是一个典型的异步传输过程。
异步传输存在 一个潜在的问题，即接收方并不知道数据会在什么时候到达。在它检测到数据并做出响应之前，第一个比特已经过去了。这就像有人出乎意料地从后面走上来跟你说 话，而你没来得及反应过来，漏掉了最前面的几个词。因此，每次异步传输的信息都以一个起始位开头，它通知接收方数据已经到达了，这就给了接收方响应、接收 和缓存数据比特的时间；在传输结束时，一个停止位表示该次传输信息的终止。按照惯例，空闲（没有传送数据）的线路实际携带着一个代表二进制1的信号。步传输的开始位使信号变成0，其他的比特位使信号随传输的数据信息而变化。最后，停止位使信号重新变回1，该信号一直保持到下一个开始位到达。例如在键盘上数字“1”，按照8比特位的扩展ASCII编码，将发送“00110001”，同时需要在8比特位的前面加一个起始位，后面一个停止位。
同步传输
同步传输的比特分组要大得多。它不是独立地发送每个字符，每个字符都有自己的开始位和停止位，而是把它们组合起来一起发送。我们将这些组合称为数据帧，或简称为帧。
数据帧的第一部分包含一组同步字符，它是一个独特的比特组合，类似于前面提到的起始位，用于通知接收方一个帧已经到达，但它同时还能确保接收方的采样速度和比特的到达速度保持一致，使收发双方进入同步。
帧的最后一部分是一个帧结束标记。与同步字符一样，它也是一个独特的比特串，类似于前面提到的停止位，用于表示在下一帧开始之前没有别的即将到达的数据了。
同步传输通常要比异步传输快速得多。接收方不必对每个字符进行开始和停止的操作。一旦检测到帧同步字符，它就在接下来的数据到达时接收它们。另外，同步传输的开销也比较少。例如，一个典型的帧可能有500字节（即4000比特）的数据，其中可能只包含100比特的开销。这时，增加的比特位使传输的比特总数增加2.5%，这与异步传输中25 %的增值要小得多。随着数据帧中实际数据比特位的增加，开销比特所占的百分比将相应地减少。但是，数据比特位越长，缓存数据所需要的缓冲区也越大，这就限制了一个帧的大小。另外，帧越大，它占据传输媒体的连续时间也越长。在极端的情况下，这将导致其他用户等得太久。
了解了同步和异步的概念之后，大家应该对ajax为什么可以提升用户体验应该比较清晰了，它是利用异步请求方式的。打个比方，如果现在你家里所在的小区因 某种情况而面临停水，现在有关部门公布了两种方案，一是完全停水8个小时，在这8个小时内完全停水，8个小时后恢复正常。二是不完全停水10 个小时，在这10个小时内水没有完全断，只是流量比原来小了很多，在10个小时后恢复正常流量，那么，如果是你你会选择哪种方式呢？显然是后者。
Ajax所包含的技术
- 使用CSS和XHTML来表示。
- 使用DOM模型来交互和动态显示。
- 使用XMLHttpRequest来和服务器进行异步通信。
- 使用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.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,"application/x-www-form-urlencoded");
ajax.send(data)
} //调用Ajax示例
ajax({
method:'post',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.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)
}
参考链接
从0到1 JavaScript封装一个自己的Ajax并完善与拓展Ajax
作者：俞圣磊
Ajax原理学习