18 使用 Ajax 技术实现动态数据交互

18 使用 Ajax技术实现动态数据交互

Ajax不是一个英文单词，也不是一种编程语言，更不是一门新兴技术。准确的讲，它只是一种技巧。有人说它是新瓶装旧药，还有人说它是老技术、新应用。但是不管怎么说， Ajax已经改变或正在提升用户的Web体验。Ajax最大优势就是无刷新更新页面信息，使前后台（客户端和服务器端）数据交互变得更加敏捷、高效。因此在学习Ajax时，不可避免的要涉及前后台技术。针对前台而言，你需要掌握 HTML、 CSS、 JavaScript和 DOM技术，特别是JavaScript技术，它是 Ajax应用的基础。针对后台技术而言，你需要了解一种服务器技术（如 ASP、 PHP、 JSP等），了解数据库简单操作，以及后台脚本的编写规范等。

样吧视频教室（ www.css8.cn）

《网页制作与网站开发从入门到精通》配套视频

http://www.css8.cn/

18.1 认识 Ajax

18.1.1 什么是 Ajax

Ajax是 Asynchronous JavaScript and XML的缩写，中文翻译为异步JavaScript和 XML，通俗说就是利用 JavaScript脚本语言和 XML格式数据实现客户端与服务器端之间实现快捷通信的一种技巧。 Ajax并不是一种新技术，它实际上是几种已经成熟技术的强强结合。具体说就是由下面几部分组成：1. 基于标准化的 XHTML和 CSS。2. 通过 DOM（ Document Object Model）实现动态显示和交互。3. 通过 XML和 XSLT来进行数据交换和处理。4. 使用 XMLHttpRequest通过异步方式获取数据。5. 使用 JavaScript来整合以上所有的技术。



http://www.css8.cn/

18.1 认识 Ajax

18.1.1 什么是 Ajax

传统Web开发中，客户端与服务器端进行通信，首先需要用户使用各种事件发出 HTTP请求到Web服务器，服务器接收并处理这些数据，最后返回完整的HTML页面到客户端。这样当发出请求之后，用户就需要慢慢等待，直到服务器响应完毕。如果一个任务所需的步骤越多，用户需要等待的次数也就越多。Ajax在用户与服务器之间引入了一个中间件（即 Ajax引擎，实际上就是浏览器端的一个外挂 XMLHttpRequest组件）。当客户端与服务器端建立联系之后，浏览器会加载一个 Ajax引擎。 Ajax引擎负责客户端与服务器的沟通，并允许实现异步交互，这样不需要刷新页面，浏览器就能够通过 Ajax引擎随时随地与服务器进行隐藏通信，用户也不用在服务器处理数据时进行漫长的等待。这样数据交互由传统的表单提交来激发一个 HTTP请求，变为 Javascript 调用Ajax引擎。响应信息也不用在服务器端进行深加工，所有数据处理都在客户端脚本中实现。如果引擎需要从服务器获取数据，则提交数据给服务器处理，并获取更新的数据，更新数据通常以 XML格式返回，由于这些交互都是以异步请求的方式实现，用户不会因为浏览器被锁住而中断操作。



http://www.css8.cn/

18.1 认识 Ajax

18.1.2 如何学习 Ajax

客观分析，学习和使用 Ajax技术对于初学者来说确实有一定的难度：一方面，你需要准备服务器运行环境。另一方面，你需要熟悉一种服务器技术。

如何学习 Ajax 呢？由于读者需要掌握很多种前后台技术，个人认为如果学习 Ajax，读者应先把JavaScript语言掌握好，并熟悉 XMLHttpRequest组件的基本操作，而对于后台技术则可以了解为主，不要急于系统深入，当然如果你已经熟悉一种服务器技术就更好了。把前台脚本弄精之后，并借助示例不断实践，然后再逐步学习后台服务器技术。在学习示例时，先不要接触复杂的后台处理脚本，后台脚本越简单越好。坚持以前台 JavaScript+XMLHttpRequest为主，后台技术为辅的初期学习目标。当初步精通 JavaScript+XMLHttpRequest之后，再开始系统学习一门后台技术，如果不懂后台技术，对于各种复杂的 Ajax应用也就是望洋兴叹。



http://www.css8.cn/

18.2 使用 XMLHttpRequest对象

XMLHttpRequest是 JavaScript一个外挂组件，用来实现客户端与服务器端异步通信。要学习 Ajax技术，你必须熟悉 XMLHttpRequest组件，因为所有Ajax应用都要借助该组件实现通信。目前各大主流浏览器也都支持XMLHttpRequest组件。 XMLHttpRequest对象使用简单，主要方法列表如表18.1所示，主要属性列表表 18.2所示。



方法说明abort() 取消当前请求getAllResponseHeaders()

获取响应的所有 HTTP 头信息

getResponseHeader()

从响应信息中获取指定的 HTTP 头

open() 创建新的 HTTP请求，并指定请求的方法、 URL以及验证信息（用户名、密码）send() 发送 HTTP请求到 Web服务器并接收回应setRequestHeader()

单独指定请求的某个 HTTP 头信息

http://www.css8.cn/




属性说明onreadystatechange

指定当 readyState 属性改变时的事件处理句柄（回调函数）

readyState 返回当前请求的状态responseBody 将回应信息正文以 unsigned byte数组形式返回responseStream 以 ADO Stream对象的形式返回响应信息responseText 将响应信息作为字符串返回responseXML 将响应信息格式化为 Xml Document对象并返回

status 返回当前请求的 http 状态码statusText 返回当前请求的响应行状态

http://www.css8.cn/


18.2.1 创建 XMLHttpRequest对象实例使用 XMLHttpRequest组件的第一步就是要创建一个 XMLHttpRequest对象实例。在 JavaScript中我们可以使用 new 运算符来实现：<script language="javascript" type="text/javascript">var request = new XMLHttpRequest();</script>

兼容不同类型的浏览器<script language="javascript" type="text/javascript">try{ var request = new XMLHttpRequest();}catch (e){ alert(" 初始化 XMLHttpRequest对象失败，请检查浏览器是否支持XMLHttpRequest组件。 ");}</script>



http://www.css8.cn/


18.2.1 创建 XMLHttpRequest对象实例使用 XMLHttpRequest组件的第一步就是要创建一个 XMLHttpRequest对象实例。在 JavaScript中我们可以使用 new 运算符来实现：<script language="javascript" type="text/javascript">var request = new XMLHttpRequest();</script>

兼容不同类型的浏览器<script language="javascript" type="text/javascript">try{ var request = new XMLHttpRequest();}catch (e){ alert(" 初始化 XMLHttpRequest对象失败，请检查浏览器是否支持XMLHttpRequest组件。 ");}</script>



http://www.css8.cn/


18.2.2 创建兼容性 XMLHttpRequest对象IE 6不支持 XMLHttpRequest组件，不过从 IE 7开始捆绑并支持了这个外挂组件，但是为了照顾 IE 6用户群（毕竟大部分用户还在使用该版本浏览器），我们需要兼容 IE 6及其以下版本对于 Ajax技术的支持。

如果使用较新版本的 IE浏览器，则需要使用Msxml2.XMLHTTP对象，对于较老版本的 IE浏览器，则应该使用Microsoft.XMLHTTP对象。这些组件虽然名称不同，但是它们内部工作机制是相同的，甚至所采用的方法和属性也是相同的，包括方法的用法也相同。

18-3.html、 18-4.html



http://www.css8.cn/


18.2.3 创建动态 XMLHttpRequest对象上节创建 XMLHttpRequest对象实例的脚本都是直接放置在 script 元素中的，因此也被称为静态 JavaScript。也就是说代码是在页面初始化之前自动运行。当然，很多时间你可能并不希望这些脚本被自动执行，因此我们可以把这些脚本封装在一个函数中，使用时调用函数即可，从而保证代码的交互性，这也是多数 Ajax程序员创建 XMLHttpRequest对象的一般方式。

18-5.html



http://www.css8.cn/


18.2.4 模拟本地服务器环境创建 XMLHttpRequest对象实例仅是工作的开始，此时 XMLHttpRequest对象会在本地计算机内存中划出一块空间，并装载了 XMLHttpRequest组件的各种数据结构和执行逻辑。下面还需要使用 XMLHttpRequest对象来发送请求和接收信息。当然 XMLHttpRequest对象仅是一个运输工具，负责把数据从客户端运输到服务器端（专业称之为发送请求），然后再运回反馈信息（专业称之为响应信息）。其他工作还需要 JavaScript、 CSS和 HTML来负责完成。如准备发送给服务器的信息，对接收的数据进行处理和显示等。为了数据交互的安全性， Ajax一般采用沙箱安全模型，即 XMLHttpRequest对象只能对所在的同一个域（网站）发送请求。例如，如果希望 Ajax 代码在http://www.css8.cn/上运行，则必须在 http://www.css8.cn/中运行的脚本发送请求。为了便于学习，读者需要在本地计算机中构建一个虚拟的服务器环境（如果有远程服务器就更好）。下面我们在 Dreamweaver中创建一个动态站点（技术类型为 ASP VBScript）。创建的方法是在【站点】 | 【新建站点】对话框中进行设置。



http://www.css8.cn/


18.2.4 模拟本地服务器环境创建 XMLHttpRequest对象实例仅是工作的开始，此时 XMLHttpRequest对象会在本地计算机内存中划出一块空间，并装载了 XMLHttpRequest组件的各种数据结构和执行逻辑。下面还需要使用 XMLHttpRequest对象来发送请求和接收信息。当然 XMLHttpRequest对象仅是一个运输工具，负责把数据从客户端运输到服务器端（专业称之为发送请求），然后再运回反馈信息（专业称之为响应信息）。其他工作还需要 JavaScript、 CSS和 HTML来负责完成。如准备发送给服务器的信息，对接收的数据进行处理和显示等。为了数据交互的安全性， Ajax一般采用沙箱安全模型，即 XMLHttpRequest对象只能对所在的同一个域（网站）发送请求。例如，如果希望 Ajax 代码在http://www.css8.cn/上运行，则必须在 http://www.css8.cn/中运行的脚本发送请求。为了便于学习，读者需要在本地计算机中构建一个虚拟的服务器环境（如果有远程服务器就更好）。下面我们在 Dreamweaver中创建一个动态站点（技术类型为 ASP VBScript）。创建的方法是在【站点】 | 【新建站点】对话框中进行设置。



http://www.css8.cn/


18.2.5 准备前后台信息交互文件有了本地虚拟服务器环境，下面的操作就比较顺手了。要把本地信息发送到虚拟服务器中，传统方法是使用提交表单或请求一个新 URL来实现，现在我们避开使用这种方法，看看 XMLHttpRequest是如何发送请求的。

在本地服务器内新建一个网页文件（ 18-6/index.html ），在页面中新建如下表单。设计当用户在文本框中输入姓名时， Ajax能够快速把用户输入信息发送到服务器端，由服务器验证输入信息是否有效并及时进行提示。

假设我们在服务器端新建一个 ASP处理文件（ test.asp），该文件包含的ASP VBScript脚本代码如下。请注意 VBScript脚本语法与 JavaScript脚本存在很大的差异，它们属于不同的语言体系， VBScript语言是 VB语言的一个分支，详细语法规则请参考相关资料讲解。 ASP 代码一般存在“ <%”和“ %>”分隔符内，由服务器识别和解析，并把解析的结果与其他 HTML文档源代码一同发送给客户端。



http://www.css8.cn/


18.2.6 使用 XMLHttpRequest发送请求第一步，设置请求的 URL地址，并在地址中附加要发送的信息。要发送XMLHttpRequest请求，自然要先知道所发送的目标（即 URL地址），以及所要发送的信息。这虽然不是 Ajax的特殊要求，但仍然是建立连接和前后台进行通信所必需的。

第二步，利用 DOM技术获取文本框中用户输入的信息，再把用户信息附加到URL后面，作为查询字符串传递给服务器。

第三步，获取文本框的引用指针，然后为该对象绑定一个事件。设置当文本内的输入信息发生变化时触发该事件处理函数。并把上面设置的 URL 放在事件处理函数中



http://www.css8.cn/


18.2.6 使用 XMLHttpRequest发送请求第四步，打开 XMLHttpRequest发送请求。所谓打开 XMLHttpRequest发送请求，就是调用 XMLHttpRequest对象的 open()方法，该方法负责连接客户端到服务器。用法如下：o.open(Method, Url, Async, User, Password);

该方法包含 5个参数，其中前 2个参数是必设的。1. O表示 XMLHttpRequest对象实例。2. Method 参数表示 HTTP方法，如 POST、 GET、 PUT和 PROPFIND，方法的名称不区分大小写。

3. URL 参数表示请求的地址，可以是绝对地址，也可以是相对地址。4. Async 参数为可选选项，设置是否为异步通信，默认为 true，表示可以异步，而取值为 false时表示必须同步通信。

5. User和 Password 参数表示请求的文件需要服务器进行验证，如果未指定，当服务器需要验证时，会弹出验证窗口要求进行验证。



http://www.css8.cn/


18.2.6 使用 XMLHttpRequest发送请求第四步，打开 XMLHttpRequest发送请求。所谓打开 XMLHttpRequest发送请求，就是调用 XMLHttpRequest对象的 open()方法，该方法负责连接客户端到服务器。用法如下：o.open(Method, Url, Async, User, Password);

该方法包含 5个参数，其中前 2个参数是必设的。1. O表示 XMLHttpRequest对象实例。2. Method 参数表示 HTTP方法，如 POST、 GET、 PUT和 PROPFIND，方法的名称不区分大小写。

3. URL 参数表示请求的地址，可以是绝对地址，也可以是相对地址。4. Async 参数为可选选项，设置是否为异步通信，默认为 true，表示可以异步，而取值为 false时表示必须同步通信。

5. User和 Password 参数表示请求的文件需要服务器进行验证，如果未指定，当服务器需要验证时，会弹出验证窗口要求进行验证。



http://www.css8.cn/


18.2.6 使用 XMLHttpRequest发送请求实际上 open()方法并没有真正打开请求。如果监控网络间数据传递，当调用open()方法时看不到任何通信的数据。这里的 open()实际上就是从逻辑上执行请求准备。

第五步，发送请求。当使用 open()方法打开服务器请求连接之后，就可以发送请求了。发送请求主要使用 send()方法。该方法只有一个参数，就是要发送的内容。但是在考虑我们已经在 URL中附加了所要传递的信息：var url = "http://localhost/mysite/test.asp?name=" + name;所以在该方法中设置发送的信息为空（即 null）。



http://www.css8.cn/


18.2.7 回调所谓回调，就是 Ajax允许服务器反向调用Web页面中的代码。这等于说 Ajax给了服务器一定程度的控制权，当服务器完成请求之后，会自动查看客户端浏览器内的 XMLHttpRequest对象，特别是 onreadystatechange 属性，然后调用该属性指定的任何方法。所以，通俗说回调就是服务器向客户端的网页发出命令并调用脚本中的 Ajax 定义的方法，此时无论网页本身在做什么，也不管用户在执行什么操作，都不会束缚或影响回调操作。

为了实现这种回调机制， Ajax通过定义了一个 readyState 属性来进行监督，该属性犹如一个指示灯实时跟踪整个请求和响应的全过程。一旦当该属性发生变化时，即触发 onreadystatechange事件，从而调用该事件绑定的处理函数，有人也称之为回调函数。 onreadystatechange是一种特殊的响应事件，它与HTTP传输紧密相关联，由 readyState 属性变化触发。 readyState 属性能够实时返回 XMLHttpRequest请求的当前状态，取值如表 18.3所示。



http://www.css8.cn/


18.2.7 回调



返回值说明0 未初始化。表示对象已经建立，但是尚未初始化，尚未调用 open()方法1 初始化。表示对象已经建立，尚未调用 send()方法2 发送数据。表示 send()方法已经调用，但是当前的状态及 HTTP 头未知

3 数据传送中。已经接收部分数据，因为响应及 HTTP 头不全，这时通过 responseBody 和responseText获取部分数据会出现错误

4 完成。数据接收完毕，此时可以通过 responseBody和 responseText获取完整的响应数据

有了回调机制，为 XMLHttpRequest对象的 onreadystatechange事件属性设置为要运行的函数名，这样当服务器处理完请求后就会自动调用该函数。也不需要担心该函数如何被触发执行，它又需要什么参数，以及返回什么值。

http://www.css8.cn/


18.2.7 回调



JavaScript是一种弱类型语言，可以使用变量引用任何东西。因此如果声明了一个函数 updatePage()， JavaScript也将该函数名看作是一个变量。则你就可以使用变量名 updatePage在代码中引用函数了。请注意， onreadystatechange 属性应该放置在调用 send()方法之前，也就是说在 XMLHttpRequest对象发送请求之前必须设置该属性，这样服务器在回答完成请求之后才能查看该属性。

http://www.css8.cn/


18.2.8 处理服务器响应



清楚了 Ajax与服务器通信的全过程，当服务器完成请求，会自动回调（返回调用） onreadystatechange 属性绑定的方法。下面我们就来设计回调函数，以处理服务器的响应。

问题一，应该检测 HTTP就绪状态。所谓 HTTP就绪状态就是表示XMLHttpRequest对象发出请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求 /响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。该状态可以通过 XMLHttpRequest对象的 readyState 属性返回值确定（详细说明可以参阅表 18.1所示）。上面已经讲到服务器在完成请求之后会在 XMLHttpRequest的onreadystatechange 属性中查找要调用的方法。但是每当 HTTP请求状态改变时，服务器都会回调函数。这意味着如果服务器没有完全响应也会回调函数，这当然不是我们所希望看到的。因此我们应该在回调函数中首先判断当前的请求状态，只有请求状态为 4时，说明服务器已经完整的进行了响应，此时才允许执行回调函数中的代码。

http://www.css8.cn/





问题二，应该检测 HTTP状态码。虽然通过 readyState 属性我们可以确定响应是否已经完成，但是还有一个问题：如果服务器响应请求并完成了处理，但是却报告了一个错误。此时该怎么办？由于服务器端只能使用传统Web 专用方法报告信息，而在Web世界中， HTTP 代码可以处理请求中可能发生的各种问题。例如，输入错误的 URL请求而得到 404 错误码（表示该页面不存在）等。有关 HTTP 状态码比较多，这里就不再详细列表显示，读者可以参阅本书光盘中的 XmlHttp中文参考手册。但是不管发生哪种 HTTP 状态码，这些错误码都是从完成的响应得到的。换句话说，服务器响应了请求，即 readyState 属性值为 4，但是没有返回预期的数据。为了避免此类问题出现，我们还应该在回调函数中增加检查 HTTP 状态。只有当状态码为 200时，才表示一切顺利。在 XMLHttpRequest对象中可以借助 status 属性获取当前的 HTTP 状态码。如果就绪状态是 4，而且状态码是200，那么我们就可以放心的允许回调函数被执行了。

http://www.css8.cn/





问题三，如何获取响应信息？当服务器顺利响应请求之后，我们就可以处理服务器返回的数据了。返回的数据将保存在 XMLHttpRequest对象的responseText、 responseBody、 responseStream、或 responseXML 属性中。具体存储在哪个属性中，主要看服务器响应数据的格式而定。这四种属性说明如表 18.4所示，它们都是只读属性。

响应信息说明responseBody 将响应信息正文以 unsigned byte数组形式返回

responseStream 以 ADO Stream对象的形式返回响应信息

responseText 将响应信息作为字符串返回responseXML 将响应信息格式化为 XML文档格式返回

http://www.css8.cn/





XMLHttpRequest对象将根据服务器响应数据的格式来决定使用那个属性容器存储返回的信息。一般常用的数据格式为文本格式（ responseText）或 XM格式（ responseText），对于二进制数据流可以使用 responseStream 属性获取。获取这些返回信息之后，还需要使用 JavaScript脚本把它们转换为需要的样式显示出来即可，详细操作就不再讲解。

http://www.css8.cn/

18.3 Ajax信息交互实战

18.3.1 Ajax显示前后台数据交互过程



使用 Ajax技术的一个最大盲点就是它不再刷新页面，你无法知道页面的加载进程，网页是否与后台联系，数据是否加载更新？这一切操作都被隐藏起来，于是就会让用户无从适应。遇到打开的一个空白页，也许数据还没有被加载完毕，但是如果没有提示标志，你还以为它是一个空白页呢。为了避免此类问题的发生，让用户面对静静的页面知道当前操作的进程。

18-7

http://www.css8.cn/


18.3.2 Ajax显示记录集



记录集是动态网站中一个专有名次，表示从数据库中查询的一个数据集合。通俗说就是很多数据的集合，它们根据数据库中的表格结构有序排列在一起。Ajax应用的核心实际上就是从服务器端的数据库中动态调用特定的数据，在这个过程中可能涉及简单的交互对话。例如， Ajax异步请求时应该告诉服务器所要显示的数据，并传递必须的参数。服务器接到这个请求之后，赶紧查询数据库获得所要的记录集，最后把这个记录集以一定的格式响应给客户端。客户端接收这些数据之后，利用脚本把它们读显在页面中。

本示例是一个简单的模拟，假定在服务器端有一个数据表，在客户端允许用户指定要从数据表中获取的记录数，即要在页面中显示多少条记录。当单击【查询】按钮， Ajax 把该参数传递给服务器，服务器就根据这个参数查询数据库，获得一个记录集，然后把这个记录集转换为 XML格式的数据响应给客户端。浏览器再以表格的形式显示在页面中。

18-8

http://www.css8.cn/


18.3.3 Tab面板数据异步更新



当鼠标指针移到 Tab标题栏中时，将触发 check() 函数，并传递给它一个参数值，告诉当前的 Tab菜单的编号。 check() 函数会打开与后台的异步连接，并发送请求，同时把该参数值发送给后台，后台服务器根据这个 Tab菜单编号，从数据库中查询对应的数据，并转换为 XML格式的数据响应给客户端。前台浏览器接收到响应数据之后，会自动调用回调函数，由回调函数来处理响应的数据，把它转换为表格结构，最后根据 Tab菜单编号把这些数据插入到对应Tab面板中。

18-9

http://www.css8.cn/


18.3.4 Ajax记录集分页显示



记录集分页的设计思路是：利用 SQL 字符串查询出需要的数据，然后根据一定的分页逻辑，即根据记录集对象的分页属性来确定每次从服务器端发送给客户端的记录数和逻辑页记录集在整个查询的记录集中的位置。当然现在使用 Ajax技术之后，就不需要记录集的众多分页属性，只需要能够确定记录集当前指针位置即可。整个示例的演示效果如图 18.15、 18.16所示。设计每页显示记录数为 2条，整个记录集包含 14条记录（以上节示例中的data.mdb数据库中数据为基础）。当页面初次加载时显示第 1、 2条记录，标题中显示“第 1页”相关提示信息，导航按钮仅显示“下一页”按钮。当单击“下一页”按钮，则标题提示为第 2页，此时“上一页”按钮显示出来。当翻阅到最后一页时，则“下一页”按钮被隐藏，同时数据显示记录集中最后两条记录。

18-10

http://www.css8.cn/


18.3.5 Ajax关键词快速匹配



本示例的设计思路是：当输入关键词时， Ajax快速把该词发送到后台，由后台与指定的数据进行比较，如果发现有匹配的信息，则组合成下拉列表的结构响应给客户端，最后由 JavaScript脚本把这些文本信息插入到页面中。

18-11

http://www.css8.cn/

Documents

18 使用 Ajax 技术实现动态数据交互