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

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

基础Ajax示例

  1. function ajax(a){
  2. var ajax = new XMLHttpRequest();
  3. ajax.onreadystatechange = function(){
  4. if (ajax.readyState == 4 && ajax.status == 200) {
  5. a.success(JSON.stringify(ajax.responseText))
  6. }
  7. }
  8. ajax.open(a.method,a.url,true)
  9. ajax.send(a.data)
  10. }
  11.  
  12. ajax({
  13. method:'get',url:'http://localhost:8080/test',success:function(res){
  14. console.log(res)
  15. }
  16. })

调用ajax的open方法,open方法里有三个参数,第一个是请求方式(如:get或post),第二个是请求的URL地址,第三个是一个bool值,是否要异步请求。

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

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

  1. ajax.onreadystatechange = function(){
  2. if (ajax.readyState == 4 && ajax.status == 200) {
  3. a.success(JSON.stringify(ajax.responseText))
  4. }else{
  5. a.error(ajax)
  6. }
  7. }

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

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

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

map[]

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

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

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

  1. function ajax(a){
  2. a.method = a.method || 'get';
  3. a.ajax = a.ajax || true;
  4. a.error = a.error || function(){
  5. console.warn('Ajax请求失败');
  6. };
  7. var ajax = new XMLHttpRequest();
  8. ajax.onreadystatechange = function(){
  9. if (ajax.readyState == 4 && ajax.status == 200) {
  10. a.success(JSON.stringify(ajax.responseText))
  11. }else{
  12. a.error(ajax)
  13. }
  14. }
  15. ajax.open(a.method,a.ajax)
  16. ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  17. ajax.send(a.data)
  18. }

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

  1. a=1&b=2

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

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

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

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

  1. function ajax(a){
  2. a.method = a.method || 'get';
  3. a.ajax = a.ajax || true;
  4. a.dataType = a.dataType || 'string';
  5. a.error = a.error || function(){
  6. console.warn('Ajax请求失败');
  7. };
  8. var ajax = new XMLHttpRequest();
  9. ajax.onreadystatechange = function(){
  10. if (ajax.readyState == 4 && ajax.status == 200) {
  11. a.success(JSON.stringify(ajax.responseText))
  12. }else{
  13. a.error(ajax)
  14. }
  15. }
  16. var data = a.data;
  17. if (a.dataType == 'json') {
  18. var nowData = "";
  19. for (var i in data) {
  20. nowData += (nowData != ''?'&':'')+i+'='+data[i];
  21. }
  22. data = nowData;
  23. }
  24. ajax.open(a.method,"application/x-www-form-urlencoded");
  25. ajax.send(data)
  26. } //调用Ajax示例
  27. ajax({
  28. method:'post',dataType:'json',data:{
  29. a:'1',b:'2'
  30. },success:function(res){
  31. console.log(res)
  32. }
  33. })

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

  1. if (a.requestHeader) {
  2. for (var i in a.requestHeader) {
  3. ajax.setRequestHeader(i,a.requestHeader[i])
  4. }
  5. }

完整Ajax示例

  1. function ajax(a){
  2. a.method = a.method || 'get';
  3. a.ajax = a.ajax || true;
  4. a.dataType = a.dataType || 'string';
  5. a.error = a.error || function(){
  6. console.warn('Ajax请求失败');
  7. };
  8. var ajax = new XMLHttpRequest();
  9. ajax.onreadystatechange = function(){
  10. if (ajax.readyState == 4 && ajax.status == 200) {
  11. a.success(JSON.parse(ajax.responseText))
  12. }else if (ajax.readyState != 4 && ajax.status != 200){
  13. a.error(ajax)
  14. }
  15. }
  16. var data = a.data;
  17. if (a.dataType == 'json') {
  18. var nowData = "";
  19. for (var i in data) {
  20. nowData += (nowData != ''?'&':'')+i+'='+data[i];
  21. }
  22. data = nowData;
  23. }
  24. ajax.open(a.method,a.ajax)
  25. if (a.requestHeader) {
  26. for (var i in a.requestHeader) {
  27. ajax.setRequestHeader(i,a.requestHeader[i])
  28. }
  29. }
  30. ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  31. ajax.send(data)
  32. }

参考链接

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

Ajax原理学习

猜你在找的Ajax相关文章