Ajax 技术原理（转）

时间  2019-11-13
标签 ajax 技术 原理 栏目 Ajax 繁體版
原文   原文链接

Ajax 技术原理

2010-01-04javascript

原文出处：http://www.nowamagic.net/ajax/ajax_AjaxPrinciple.phpphp

     在写这篇文章以前，曾经写过一篇关于AJAX技术的随笔，不过涉及到的方面很窄，对AJAX技术的背景、原理、优缺点等各个方面都不多涉及null。此次写这篇文章的背景是由于公司须要对内部程序员作一个培训。项目经理找到了我，而且征询我培训的主题，考虑到以前Javascript、CSS等WEB开发技术都已经讲解过了，因此决定针对AJAX这一块作一个比较系统的培训，因此这篇文章其实是一个培训的材料。java

 

AJAX技术的背景

不能否认，ajax技术的流行得益于google的大力推广，正是因为google earth、google suggest以及gmail等对ajax技术的普遍应用，催生了ajax的流行。而这也让微软感到无比的尴尬，由于早在97年，微软便已经发明了ajax中的关键技术，而且在99年IE5推出之时，它便开始支持XmlHttpRequest对象，而且微软以前已经开始在它的一些产品中应用ajax，好比说MSDN网站菜单中的一些应用。遗憾的是，不知道出于什么想法，当时微软发明了ajax的核心技术以后，并无看到它的潜力而加以发展和推广，而是将它搁置起来。对于这一点来讲，我我的是以为很是奇怪的，由于以微软的资源和它的战略眼光来讲，应该不会看不到ajax技术的前景，惟一的解释也许就是由于当时它的主要竞争对手Netscape的消失反而使它变得麻痹和迟钝，毕竟巨人也有打盹的时候，好比IBM曾经在对微软战略上的失误。正是这一次的失误，成就了它如今的竞争对手google在ajax方面的领先地位，而事实上google目前在ajax技术方面的领先是微软所没法达到的，这一点在后面我讲述ajax缺陷的时候也会提到。如今微软也意识到了这个问题，所以它也开始在ajax领域奋起直追，好比说推出它本身的ajax框架atlas，而且在.NET2.0也提供了一个用来实现异步回调的接口，即ICallBack接口。那么微软为何对本身在ajax方面的落后如此紧张呢？如今就让咱们来分析一下ajax技术后面隐藏的深入意义。程序员

ajax技术的意义

咱们在平时的开发中都多多少少的接触或者应用到了ajax，谈到ajax技术的意义，咱们关注得最多的毫无疑问是提高用户的体验。可是，若是咱们结合未来电脑和互联网的发展趋势，咱们会发现ajax技术在某些方面正好表明了这种趋势。为何这样说呢？咱们知道，自从电脑出现以来，一直是桌面软件占据着绝对主导的地位，可是互联网的出现和成功使这一切开始发生着微妙的变化。至关一部分的人都相信，早晚有一天，数据和电脑软件将会从桌面转移到互联网。也就是说，未来的电脑有可能抛弃笨重的硬盘，而直接从互联网来获取数据和服务，我记得我念大学的时候，有位教授给咱们上课的时候，曾经设想过这样一种情景，也许在未来的电脑桌面上，没有任何多余的软件和程序，而仅仅只有一个IE，虽然如今看起来咱们距离这一天还很遥远，而且这其中还有不少的问题须要解决，可是我以为这个并不是梦想，而是早晚将实现的现实。那么，这其中的主要问题就是互联网的链接不稳定，谁也不肯意看着本身的电脑从服务器一点一滴的下载数据，那么，ajax是否是解决了这个问题呢，说实话，与其说ajax解决了这个问题，倒不如它只是掩盖了这个问题，它只是在服务器和客户端之间充当了一个缓冲器，让用户误觉得服务没有中断。精确的说，ajax并不能提升从服务器端下载数据的速度，而只是使这个等待不那么使人沮丧。可是正是这一点就足以产生巨大的影响和震动，它实际上也对桌面软件产生了巨大的冲击。这一点我用一个例子来讲明，咱们能够比较一下Outlook Express和Gmail，前者是典型的桌面软件，后者是ajax所实现的B/S模式，实际上后者目前已经在慢慢取代前者了，Gmail在收发邮件的时候已经和Outlook Express的功能几乎没有差异了，并且它不须要安装客户端程序。这就是为何微软对ajax所带来的冲击有着如此的恐惧心理，而且在它前不久所进行的调查之中，将google看作他们将来十年内的主要竞争对手的主要缘由之一。固然，这种变化也并不会将桌面软件所有淘汰，现有的浏览器尚未一个能像PhotoShop等桌面程序那样处理复杂的图像。可是咱们也不能忽视它带来的影响和冲击。web

关于ajax的名字

ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。ajax

关于同步和异步

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

具体来讲，异步传输是将比特分红小组来进行传送。通常每一个小组是一个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所包含的技术

你们都知道ajax并不是一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

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

在上面几中技术中，除了XmlHttpRequest对象之外，其它全部的技术都是基于web标准而且已经获得了普遍使用的，XMLHttpRequest虽然目前尚未被W3C所采纳，可是它已是一个事实的标准，由于目前几乎全部的主流浏览器都支持它。

ajax原理和XmlHttpRequest对象

Ajax的原理简单来讲经过XmlHttpRequest对象来向服务器发异步请求，从服务器得到数据，而后用javascript来操做DOM而更新页面。这其中最关键的一步就是从服务器得到请求数据。要清楚这个过程和原理，咱们必须对 XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript能够及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

因此咱们先从XMLHttpRequest讲起，来看看它的工做原理。

首先，咱们先来看看XMLHttpRequest这个对象的属性。

它的属性有：

属性 描述
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，好比常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值

对象状态值：

readyState 含义
0 (未初始化) 对象已创建，可是还没有初始化（还没有调用open方法）
1 (初始化) 对象已创建，还没有调用send方法
2 (发送数据) send方法已调用，可是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，由于响应及http头不全，这时经过responseBody和responseText获取部分数据会出现错误
4 (完成) 数据接收完毕，此时能够经过经过responseXml和responseText获取完整的回应数据

可是，因为各浏览器之间存在差别，因此建立一个XMLHttpRequest对象可能须要不一样的方法。这个差别主要体如今IE和其它浏览器之间。下面是一个比较标准的建立XMLHttpRequest对象的方法。

view plain copy to clipboard print ?
  1. function CreateXmlHttp()   
  2.    {   
  3.    //非IE浏览器建立XmlHttpRequest对象   
  4.     if(window.XmlHttpRequest)   
  5.     {   
  6.      xmlhttp=new XmlHttpRequest();   
  7.     }   
  8.     //IE浏览器建立XmlHttpRequest对象   
  9.      if(window.ActiveXObject)   
  10.     {   
  11.     try  
  12.     {   
  13.      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");       
  14.     }   
  15.     catch(e)   
  16.     {   
  17.     try{   
  18.      xmlhttp=new ActiveXObject("msxml2.XMLHTTP");   
  19.      }   
  20.      catch(ex){}   
  21.     }   
  22.     }   
  23.    }   
  24.   
  25. function Ustbwuyi()   
  26.    {   
  27.     var data=document.getElementById("username").value;     
  28.         CreateXmlHttp();   
  29.         if(!xmlhttp)   
  30.         {   
  31.          alert("建立xmlhttp对象异常！");   
  32.          return false;   
  33.         }         
  34.         xmlhttp.open("POST",url,false);   
  35.         xmlhttp.onreadystatechange=function()   
  36.         {     
  37.          if(xmlhttp.readyState==4)   
  38.            {   
  39.            document.getElementById("user1").innerHTML="数据正在加载...";   
  40.              if(xmlhttp.status==200)   
  41.              {   
  42.               document.write(xmlhttp.responseText);   
  43.              }        
  44.            }   
  45.          }   
  46.         xmlhttp.send();   
  47.    }    
function CreateXmlHttp()
   {
   //非IE浏览器建立XmlHttpRequest对象
    if(window.XmlHttpRequest)
    {
     xmlhttp=new XmlHttpRequest();
    }
    //IE浏览器建立XmlHttpRequest对象
     if(window.ActiveXObject)
    {
    try
    {
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    
    }
    catch(e)
    {
    try{
     xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
     }
     catch(ex){}
    }
    }
   }

function Ustbwuyi()
   {
    var data=document.getElementById("username").value;  
        CreateXmlHttp();
        if(!xmlhttp)
        {
         alert("建立xmlhttp对象异常！");
         return false;
        }      
        xmlhttp.open("POST",url,false);
        xmlhttp.onreadystatechange=function()
        {  
         if(xmlhttp.readyState==4)
           {
           document.getElementById("user1").innerHTML="数据正在加载...";
             if(xmlhttp.status==200)
             {
              document.write(xmlhttp.responseText);
             }     
           }
         }
        xmlhttp.send();
   }

如上所示，函数首先检查XMLHttpRequest的总体状态而且保证它已经完成（readyStatus=4），即数据已经发送完毕。而后根据服务器的设定询问请求状态，若是一切已经就绪（status=200），那么就执行下面须要的操做。

对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：

  1. 向服务器提交数据的类型，即post仍是get。
  2. 请求的url地址和传递的参数。
  3. 传输方式，false为同步，true为异步。默认为true。若是是异步通讯方式(true)，客户机就不等待服务器的响应；若是是同步方式(false)，客户机就要等到服务器返回消息后才去执行其余操做。咱们须要根据实际须要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，然后一个是会覆盖前一个的，这个时候固然要指定同步方式。

Send方法用来发送请求。

知道了XMLHttpRequest的工做流程，咱们能够看出，XMLHttpRequest是彻底用来向服务器发出一个请求的，它的做用也局限于此，但它的做用是整个ajax实现的关键，由于ajax无非是两个过程，发出请求和响应请求。而且它彻底是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通讯的问题因此才会如此的重要。

如今，咱们对ajax的原理大概能够有一个了解了。咱们能够把服务器端当作一个数据接口，它返回的是一个纯文本流，固然，这个文本流能够是XML格式，能够是Html，能够是Javascript代码，也能够只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是同样的，不一样的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，而后再显示在页面。至于如今流行的不少ajax控件，好比magicajax等，能够返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并无什么太大的区别。

ajax的优势

Ajax的给咱们带来的好处你们基本上都深有体会，在这里我只简单的讲几点：

  1. 最大的一点是页面无刷新，在页面内与服务器通讯，给用户的体验很是好。
  2. 使用异步方式与服务器通讯，不须要打断用户的操做，具备更加迅速的响应能力。
  3. 能够把之前一些服务器负担的工做转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。而且减轻服务器的负担，ajax的原则是“按需取数据”，能够最大程度的减小冗余请求，和响应对服务器形成的负担。
  4. 基于标准化的并被普遍支持的技术，不须要下载插件或者小程序。

ajax的缺点

下面我着重讲一讲ajax的缺陷，由于平时咱们大多注意的都是ajax给咱们所带来的好处诸如用户体验的提高。而对ajax所带来的缺陷有所忽视。

下面所阐述的ajax的缺陷都是它先天所产生的。

  1. ajax干掉了back按钮

    ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，可是它无法和js进行很好的合做。这是ajax所带来的一个比较严重的问题，由于用户每每是但愿可以经过后退来取消前一次操做的。那么对于这个问题有没有办法？答案是确定的，用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是能够后退的，可是，它也并不能改变ajax的机制，它只是采用的一个比较笨可是有效的办法，即用户单击后退按钮访问历史记录时，经过建立或使用一个隐藏的IFRAME来重现页面上的变动。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，而后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。） 可是，虽说这个问题是能够解决的，可是它所带来的开发成本是很是高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个很是严重的问题。

  2. 安全问题

    技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据创建了一个直接通道。这使得开发者在不经意间会暴露比之前更多的数据和服务器逻辑。ajax的逻辑能够对客户端的安全扫描技术隐藏起来，容许黑客从远端服务器上创建新的攻击。还有ajax也难以免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。

  3. 对搜索引擎的支持比较弱

     

  4. 破坏了程序的异常机制

    至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题，我曾经在开发过程当中遇到过，可是查了一下网上几乎没有相关的介绍。后来我本身作了一次试验，分别采用ajax和传统的form提交的模式来删除一条数据……给咱们的调试带来了很大的困难。

  5. 其余方面的一些问题

    另外，像其余方面的一些问题，好比说违背了url和资源定位的初衷。例如，我给你一个url地址，若是采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不一样的。这个和资源定位的初衷是相背离的。

  6. 一些手持设备（如手机、PDA等）如今还不能很好的支持ajax

    一些手持设备（如手机、PDA等）如今还不能很好的支持ajax，好比说咱们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的，固然，这个问题和咱们没太多关系。

ajax的几种框架

目前咱们采用的比较多的ajax框架主要有ajax.dll,ajaxpro.dll,magicajax.dll 以及微软的atlas框架。Ajax.dll和Ajaxpro.dll这两个框架差异不大，而magicajax.dll只是封装得更厉害一些，好比说它能够直接返回DataSet数据集，前面咱们已经说过，ajax返回的都是字符串，magicajax只是对它进行了封装而已。可是它的这个特色能够给咱们带来很大的方便，好比说咱们的页面有一个列表，而列表的数据是不断变化的，那么咱们能够采用magicajax来处理，操做很简单，添加magicajax以后，将要更新的列表控件放在magicajax的控件以内，而后在pageload里面定义更新间隔的时间就ok了，atlas的原理和magicajax差很少。可是，须要注意的一个问题是，这几种框架都只支持IE，没有进行浏览器兼容方面的处理，用反编译工具察看他们的代码就能够知道。

除了这几种框架以外，咱们平时用到的比较多的方式是本身建立xmlHttpRequest对象，这种方式和前面的几种框架相比更具备灵活性。另外，在这里还提一下aspnet2.0自带的异步回调接口，它和ajax同样也能够实现局部的无刷新，但它的实现实际上也是基于xmlhttprequest对象的，另外也是只支持IE，固然这是微软的一个竞争策略。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程