AJAX入门及应用

AJAX入门及应用

引自： http://xly.mentor100.com/2007/07/28/ajax%E5%85%A5%E9%97%A8%E5%8F%8A%E5%BA%94%E7%94%A8/

    前 言

一、 AJAX的介绍

     1．AJAX的定义

     2．AJAX的对象

二、 AJAX的核心及工作原理

     1．AJAX的核心

     2．AJAX的工作原理

三、 AJAX的应用场景

     1．数据校验

     2．按需取数据

     3．自动更新页面

四、 AJAX实用技术

     1．JavaScript

     2．XmlHttpRequest

     3．DOM

     4．XML

五、 AJAX的综合应用

     1．如何发出XML HTTP请求

     2．综合使用XML HttpRequest和HTML

六、 结束语 

 

前  言

        当我们进行网络编程时，客户希望得到一个功能更完备的应用，而开发人员想避开繁琐的部署工作，不想把可执行文件逐个地部署到数以千计的工作站上。我们的开发人员已经做过很多尝试，但是任何一种方法都不像他们原来标榜得那么完美。

        而今天，我们可以解决这个问题了。因为我们有了它，AJAX。坦率的说，AJAX也不是什么新鲜事物，它不是某项特定的技术，它是此前多项技术的综合，更应是一种技巧。

        本篇文章为本人在学习AJAX所搜集的一些资料及本人的学习心得以整理编辑而成，有不正之处，望大家批评指出。谢谢！

 

一、AJAX的介绍

         Ajax（即异步 JavaScript 和 XML）是一种 Web 应用程序开发的手段，它采用客户端脚本与 Web 服务器交换数据。所以，不必采用会中断交互的完整页面刷新，就可以动态地更新 Web 页面。使用 Ajax，可以创建更加丰富、更加动态的 Web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。这两项性能在多年来一直被网络开发者所忽略，直到最近Gmail, Google suggest和Google Maps的横空出世才使人们开始意识到其重要性。

         AJAX是一种运用于浏览器中的技术。在浏览器和服务器之间，它使用异步数据进行转换，并允许网页向服务器索取少量信息而非整个网页。这项技术标志着网络应用程序的微小化、迅捷化以及便捷化。

         AJAX是一种不需依靠服务器软件而独立运做的浏览器技术。

         AJAX基于以下一些公共标准： XML 可扩展标记语言，HTML 超文本标记语言，CSS 层叠样式表。

         运用于ALAX的公共标准被很好的定义并且得到一些主要的常用浏览器的支持。

1． AJAX的定义：

         AJAX（Asynchronous JavaScript and XML）是多种技术的综合，包括JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。AJAX是一种运用JavaScript和可扩展标记语言(XML)，在网络浏览器和服务器之间传送或接受数据的技术。

2．   AJAX的对象：

         AJAX的对象包括JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。它们在AJAX中所起的作用分别是：

          1） 使用XHTML和CSS标准化呈现；

          2） 使用DOM实现动态显示和交互；

          3） 使用XML和XSTL进行数据交换与处理；

          4） 使用XMLHttpRequest对象进行异步数据读取；

          5） 使用JavaScript绑定和处理所有数据。 

二、 AJAX的核心及工作原理

1．   AJAX的核心

          Ajax的核心是JavaScript对象XmlHttpRequest，它目前提供了以下两种核心技术：

          1）支持 Javascript 和支持 XMLHTTP 和 XMLHttpRequest 对象的浏览器；

          2）能够以 XML 响应的 HTTP 服务器技术。

          因为所有流行的浏览器都支持 Javascript 和必要的 XMLHTTP 请求对象，且几乎所有 Web 服务器技术均可生成 XML（或任何标记），所以核心 AJAX 技术普遍适用。最简单的 AJAX 应用程序实质上就是一个带有 Javascript 函数的标准 HTML 用户界面，该界面可与能动态生成 XML 的 HTTP 服务器进行交互。任何动态 Web 技术都可充当服务器端AJAX 技术。

          核心 AJAX 应用程序的主要组件包括：

          1)        HTML 页面，其中包含： 与 AJAX JavaScript 函数交互的UI元素； 与 AJAX 服务器交互的JavaScript函数。

          2)        可处理 HTTP 请求并以 XML 标记响应的服务器端 Web 技术。这些元素如图 1 所示。

     

                              图1    核心AJAX 体系结构<选自www.oracle.com>  

示例：

         了解了关键元素后，我们就可以设计一个包含输入域、按钮或任何可链接至 Javascript 的元素的 HTML 用户界面了。例如，按下按钮可激活某个 Javascript 函数，或者更深入些，在用户向输入域键入内容时可激活某个 Javascript 函数。为此，您可以将 οnkeyup= 赋予 Javascript 函数的值来处理输入域中的数据。

         例如，当发生 onkeyup 事件（即键入内容）时，输入域“searchField”将调用 Javascript 函数lookup( )。

        <input type="text" id="searchField"

        size="20" οnkeyup="lookup(’searchField’);">

除了响应用户界面交互外，AJAX Javascript 函数还可根据自己的计时器进行独立操作。如可以使用该方法执行AJAXautosave（自动保存）特性。

2． AJAX的工作原理

         一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始。它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上。

         现在，记住Ajax如何首先处于异步处理状态？当你发送HTTP请求，你不希望浏览器挂起并等待服务器的响应，取而代之的是，你希望通过页面继续响应用户的界面交互，并在服务器响应真正到达后处理它们。要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器，当服务器响应到达时，回调函数将会被调用。

         在JavaWeb服务器上，到达的请求与任何其它HttpServletRequest一样。在解析请求参数后，servlet执行必需的应用逻辑，将响应序列化到XML中，并将它写回HttpServletResponse。

 

三、 AJAX的应用场景

        Ajax不是万能的，在适合的场合使用Ajax，才能充分发挥它的长处，改善系统性能和用户体验，绝不可以为了技术而滥用。Ajax的特点在于异步交互，动态更新web页面，因此它的适用范围是交互较多，频繁读取数据的web应用。现在来看几个Ajax的应用实例，读者可以了解如何使用Ajax技术改进现有的web应用系统。

         1．数据校验：

         在填写表单内容时，需要保证数据的唯一性（例如新用户注册填写的用户名），因此必须对用户输入的内容进行数据验证。数据验证通常有两种方式：一种是直接填写，然后提交表单，这种方式需要将这个页面提交到服务器端进行验证，整个过程不仅时间长而且造成了服务器不必要的负担；第二种方式是改进了的验证过程，用户可以通过点击相应的验证按钮，打开新窗口查看验证结果，但是这样需要新开一个浏览器窗口或者对话框，还需要专门编写验证的页面，比较耗费系统资源。而使用Ajax技术，可以由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担。

         2．按需取数据：

         分类树或者树形结构在web应用系统中使用得非常广泛，例如部门结构，文档得分类结构常常使用树形空间呈现。以前每次对分类树得操作都会引起页面重载，为了避免这种情况出现，一般不采用每次调用后台得方式，而是一次性将分类结果中得数据一次性读取出来并写入数组，然后根据用户的操作，用JavaScript来控制节点的呈现，这样虽然解决了操作响应速度，不重复载入页面以及避免向服务器频繁发送请求的问题，但是如果用户不对分类进行操作或者只对分类树中的一部分数据进行操作的话（这种情况很普遍的），那么读取的数据中就会有相当大的冗余，浪费了用户的资源。特别是在分类结构复杂，数据庞大的情况下，这种弊端就更加明显了。

         现在应用Ajax改进分类树的实现机制。在初始化页面时，只获取第一级子分类的数据并且显示；当用户点开一级分类的第一节点时，页面会通过Ajax向服务器请求当前分类所属的二级子分类的所有数据；如果再请求已经呈现的二级分类的某一节点时，再次向服务器请求当前分类所属的三级子分类的所有数据，以此类推。页面会根据用户的操作向服务器请求它所需要的数据，这样就不会存在数据的冗余，减少了数据下载总量。同时，更新页面时不需要重载所有内容，只更新需要更新的那部分内容即可，相对于以前后台处理并且重载的方式，大大缩短了用户的等待时间。

         3．自动更新页面：

         在web应用中有很多数据的变化时十分迅速的，例如最新的热点新闻，天气预报以及聊天室内容等。在Ajax出现之前，用户为了及时了解相应的内容必须不断刷新页面，查看是否有新的内容变化，或者页面本身实现定时刷新的功能（大多数聊天室页面就有此功能）。还有可能会发生这种情况：有一段时间网页的内容没有发生任何变化，但是用户并不知道，仍然不断的刷新页面；或者用户失去了耐心，放弃了刷新页面，却很有可能在此有新的消息出现，这样就错过了第一时间得到消息的机会。

         应用Ajax可以改善这种情况，页面加载以后，会通过Ajax引擎在后台进行定时的轮询，向服务器发送请求，查看是否有最新的消息。如果有则将新的数据（而不是所有数据）下载并且在页面上进行动态的更新，通过一定的方式通知用户（实现这样的功能正是JavaScript的强项）。这样既避免了用户不断手工刷新页面的不便，也不会因为重复刷新页面造成资源浪费。

 

四、AJAX实用技术

    1. JavaScript

         J avaScript是种脚本语言，它是一种基于对象和事件驱动的编程语言，因而它本身提供了非常丰富的内部对象供程序设计人员使用。它可以被嵌入 HTML 的文件之中。通过 JavaScript 可以做到响应用户的需求事件，如表单的输入。这样当一位使用者输入一项信息时，它不需要通过网络传送到服务器端进行处理再传回来的过程，而可以直接在客户端进行事件的处理。因此，在AJAX中用JavaScript来绑定和处理数据。

    2．XmlHttpRequest

         Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面)，这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以使桌面应用程序只同服务器进行数据层面的交换，而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做，这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。

XMLHttpRequest及XHMHTTP在JS中的应用：

       1)        XMLHttpRequest对象在JS中的应用：var xmlhttp = new XMLHttpRequest()；

       2)       微软的XMLHTTP组件在JS中的应用：

                  var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP)；

                  var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP)；

XMLHttpRequest 对象方法

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	作为字符串返问完整的headers
getResponseHeader("headerLabel" )	作为字符串返问单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])	设置未决的请求的目标 URL, 方法, 和其他参数
send(content)	发送请求
setRequestHeader("label", "value" )	设置header并和请求一起发送

  

XMLHttpRequest 对象属性

属性	描述
onreadystatechange	状态改变的事件触发器
readyState	对象状态(integer)： 0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成
responseText	服务器进程返回的数据文本信息
responseXML	服务器进程返回数据的兼容DOM的XML文档对象
status	服务器返回的状态码, 如:404 = "文件末找到" 、200 ="成功"
statusText	服务器进程返回的状态文本信息

 

3． DOM

        DOM是给HTML和XML文件使用的一组API(应用编程接口)。它提供了文件的结构表述，让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。

所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现。例如，document 就代表“文件本身“这个对像，table 对象则代表 HTML 的表格对象等等。这些对象可以由当今大多数的浏览器以 Script 来取用。

一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM(Document Object Model)中，DOM提供了网页中各个对象的读写的支持。

4． XML

        可扩展的标记语言(Extensible Markup Language)具有一种开放的、可扩展的、可自描述的语言结构，它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言，就正如他的名字一样。他使对某些结构化数据的定义更加容易，并且可以通过他和其他应用程序交换数据。

五、AJAX的综合应用

   1.  如何发出 XML HTTP 请求

       上面，我们知道了AJAX的基本原理，现在我们来学习如何调用AJAX Javascript代码。请看以下 Javascript 代码，该代码可发出一个 XML HTTP 请求：

         if (window.XMLHttpRequest) {   req = new XMLHttpRequest();}

         else if (window.ActiveXObject) {   req = newActiveXObject("Microsoft.XMLHTTP");}  

利用该段代码，主要的浏览器（Internet Explorer 和 Mozilla/Safari）都可向服务器发出独立的 HTTP 请求。该代码首先检查浏览器是否支持上文提及的两个支持的 XMLHTTP 对象，然后对其中之一进行实例化。一旦对 XMLHttpRequest（或 Microsoft 的 XMLHTTP）进行了实例化，即可以通过完全相同的方式对其进行操作。

        要初始化到服务器的连接，需使用以下 open 方法：

        req.open("GET", url, true);

第一个参数是HTTP方法（GET 或 POST）。第二个参数是服务器（或使用 POST 的表单操作）的 URL；第三个参数为 true，则表明可进行异步调用（“A”代表 AJAX）。这意味着该浏览器可以在实现请求的同时继续执行其他操作。open 方法中若为 false 值，则表明为非异步处理或顺序处理。我们不建议如此，这是因为您的浏览器会在返回响应前停止操作。

使用 open 初始化连接后，可进行 onreadystatechange 调用（只适用于异步调用）。这将注册一个回调函数，一旦请求完成就会调用该函数：

         req.onreadystatechange = processXMLResponse;

在完成请求后，将调用处理 XML 响应的 processXMLResponse( ) 函数。可以通过 onreadystatechange 语句以内联方式声明回调函数：

        req.onreadystatechange = processXMLResponse() {   // process request };

还可使用 req.setRequestHeader 指定任何标题内容，如：

        req.setRequestHeader("Cookie", "someKey=true");

一旦完全初始化了 XMLHTTP 请求对象 (req)，就可使用 send( ) 初始化对服务器的调用：

        req.send(null); 对于 GET 请求，使用 null 值或空字符串“”。

POST 请求包含一个带有表单数据的字符串参数。它们也要求在请求的标题中设置 Content-Type。以下两行演示了如何执行 AJAX POST 请求：

        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"; req.send("name=scott&email=stiger@foocorp.com");

完成请求后调用的回调函数通常具有确保请求不会发生错误的代码。这可通过检查 readyState 以及 HTTP 请求的整体状态来实现。（readystate 为 4 表示 XMLHTTP 请求完整，而 200 表示请求成功（404 含义正好相反）。

        function processXMLResponse() { if (req.readyState == 4) { if (request.status != 200) {// Process the XML response       }   } }

XML 响应的处理是通过使用标准 Javascript DOM 方法完成的。例如，要从输入的 XML 流中抽取员工姓名：

        <employee> Chris</employee>

我们可以使用以下代码：

         var name = req.responseXML.getElementsByTagName("employee")[0];

分析更为复杂的 XML 会使用如下代码迭代元素：

        for (i=0;i<elements.length;i++) {for (j=0;j<elements[i].childNodes.length;j++) {var ElementData = elements[i].childNodes[j].firstChild.nodeValue;   } }

2．结合使用 XMLHttpRequest 和 HTML

       请注意，通过 XMLHttpRequest 获得 XML 响应无需总是格式良好和有效。因此，AJAX 服务器端组件可以直接将 HTML 内容发送至客户端。然后，JavaScript 可使用 req.responseText 方法/属性（它只是将内容作为字符串进行检索）检索该 HTML 内容。可以使用该 HTML 字符串文本以任何方式更改页面。例如，对于以下 HTML 流：

        <h2>Hello there!</h2>

        <p> This is <b>HTML</b></p>

可使用以下语句检索至一个字符串中：

        var HTMLcontent = req.responseText;

之后通过 id="div1" 添加至指定的 HTML DIV。

        document.getElementById("div1").innerHTML += HTMLcontent;

 六、结束语

         经过对以上资料的学习，相信大家对AJAX都有了初步的了解。本人现在也还在学习AJAX中，上面的资料总结的不是很流畅，以后将陆续改进，与大家共同学习，请多多指教。