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所包含的技术

  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)  
}

参考链接

从0到1 JavaScript封装一个自己的Ajax并完善与拓展Ajax
作者:俞圣磊

Ajax原理学习

相关文章
相关标签/搜索