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

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

18.1 认识Ajax 18.1.1 什么是Ajax • Ajax是Asynchronous JavaScript and XML的缩写，中文翻译为异步JavaScript和XML，通俗说就是利用JavaScript脚本语言和XML格式数据实现客户端与服务器端之间实现快捷通信的一种技巧。Ajax并不是一种新技术，它实际上是几种已经成熟技术的强强结合。具体说就是由下面几部分组成： • 基于标准化的XHTML和CSS。 • 通过DOM（Document Object Model）实现动态显示和交互。 • 通过XML和XSLT来进行数据交换和处理。 • 使用XMLHttpRequest通过异步方式获取数据。 • 使用JavaScript来整合以上所有的技术。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

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

18.1 认识Ajax 18.1.2 如何学习Ajax 客观分析，学习和使用Ajax技术对于初学者来说确实有一定的难度：一方面，你需要准备服务器运行环境。另一方面，你需要熟悉一种服务器技术。如何学习Ajax呢？由于读者需要掌握很多种前后台技术，个人认为如果学习Ajax，读者应先把JavaScript语言掌握好，并熟悉XMLHttpRequest组件的基本操作，而对于后台技术则可以了解为主，不要急于系统深入，当然如果你已经熟悉一种服务器技术就更好了。把前台脚本弄精之后，并借助示例不断实践，然后再逐步学习后台服务器技术。在学习示例时，先不要接触复杂的后台处理脚本，后台脚本越简单越好。坚持以前台JavaScript+XMLHttpRequest为主，后台技术为辅的初期学习目标。当初步精通JavaScript+XMLHttpRequest之后，再开始系统学习一门后台技术，如果不懂后台技术，对于各种复杂的Ajax应用也就是望洋兴叹。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 XMLHttpRequest是JavaScript一个外挂组件，用来实现客户端与服务器端异步通信。要学习Ajax技术，你必须熟悉XMLHttpRequest组件，因为所有Ajax应用都要借助该组件实现通信。目前各大主流浏览器也都支持XMLHttpRequest组件。XMLHttpRequest对象使用简单，主要方法列表如表18.1所示，主要属性列表表18.2所示。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 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> 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 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 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 18.2.3 创建动态XMLHttpRequest对象上节创建XMLHttpRequest对象实例的脚本都是直接放置在script元素中的，因此也被称为静态JavaScript。也就是说代码是在页面初始化之前自动运行。当然，很多时间你可能并不希望这些脚本被自动执行，因此我们可以把这些脚本封装在一个函数中，使用时调用函数即可，从而保证代码的交互性，这也是多数Ajax程序员创建XMLHttpRequest对象的一般方式。 18-5.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 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）。创建的方法是在【站点】|【新建站点】对话框中进行设置。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 18.2.5 准备前后台信息交互文件有了本地虚拟服务器环境，下面的操作就比较顺手了。要把本地信息发送到虚拟服务器中，传统方法是使用提交表单或请求一个新URL来实现，现在我们避开使用这种方法，看看XMLHttpRequest是如何发送请求的。在本地服务器内新建一个网页文件（ 18-6/index.html ），在页面中新建如下表单。设计当用户在文本框中输入姓名时，Ajax能够快速把用户输入信息发送到服务器端，由服务器验证输入信息是否有效并及时进行提示。假设我们在服务器端新建一个ASP处理文件（test.asp），该文件包含的ASP VBScript脚本代码如下。请注意VBScript脚本语法与JavaScript脚本存在很大的差异，它们属于不同的语言体系，VBScript语言是VB语言的一个分支，详细语法规则请参考相关资料讲解。ASP代码一般存在“<%”和“%>”分隔符内，由服务器识别和解析，并把解析的结果与其他HTML文档源代码一同发送给客户端。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 18.2.6 使用XMLHttpRequest发送请求第一步，设置请求的URL地址，并在地址中附加要发送的信息。要发送XMLHttpRequest请求，自然要先知道所发送的目标（即URL地址），以及所要发送的信息。这虽然不是Ajax的特殊要求，但仍然是建立连接和前后台进行通信所必需的。第二步，利用DOM技术获取文本框中用户输入的信息，再把用户信息附加到URL后面，作为查询字符串传递给服务器。第三步，获取文本框的引用指针，然后为该对象绑定一个事件。设置当文本内的输入信息发生变化时触发该事件处理函数。并把上面设置的URL放在事件处理函数中《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 18.2.6 使用XMLHttpRequest发送请求 • 第四步，打开XMLHttpRequest发送请求。所谓打开XMLHttpRequest发送请求，就是调用XMLHttpRequest对象的open()方法，该方法负责连接客户端到服务器。用法如下： • o.open(Method, Url, Async, User, Password); • 该方法包含5个参数，其中前2个参数是必设的。 • O表示XMLHttpRequest对象实例。 • Method参数表示HTTP方法，如POST、GET、PUT和PROPFIND，方法的名称不区分大小写。 • URL参数表示请求的地址，可以是绝对地址，也可以是相对地址。 • Async参数为可选选项，设置是否为异步通信，默认为true，表示可以异步，而取值为false时表示必须同步通信。 • User和Password参数表示请求的文件需要服务器进行验证，如果未指定，当服务器需要验证时，会弹出验证窗口要求进行验证。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 18.2.6 使用XMLHttpRequest发送请求实际上open()方法并没有真正打开请求。如果监控网络间数据传递，当调用open()方法时看不到任何通信的数据。这里的open()实际上就是从逻辑上执行请求准备。第五步，发送请求。当使用open()方法打开服务器请求连接之后，就可以发送请求了。发送请求主要使用send()方法。该方法只有一个参数，就是要发送的内容。但是在考虑我们已经在URL中附加了所要传递的信息： varurl = "http://localhost/mysite/test.asp?name=" + name; 所以在该方法中设置发送的信息为空（即null）。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 18.2.7 回调所谓回调，就是Ajax允许服务器反向调用Web页面中的代码。这等于说Ajax给了服务器一定程度的控制权，当服务器完成请求之后，会自动查看客户端浏览器内的XMLHttpRequest对象，特别是onreadystatechange属性，然后调用该属性指定的任何方法。所以，通俗说回调就是服务器向客户端的网页发出命令并调用脚本中的Ajax定义的方法，此时无论网页本身在做什么，也不管用户在执行什么操作，都不会束缚或影响回调操作。为了实现这种回调机制，Ajax通过定义了一个readyState属性来进行监督，该属性犹如一个指示灯实时跟踪整个请求和响应的全过程。一旦当该属性发生变化时，即触发onreadystatechange事件，从而调用该事件绑定的处理函数，有人也称之为回调函数。onreadystatechange是一种特殊的响应事件，它与HTTP传输紧密相关联，由readyState属性变化触发。readyState属性能够实时返回XMLHttpRequest请求的当前状态，取值如表18.3所示。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 18.2.7 回调有了回调机制，为XMLHttpRequest对象的onreadystatechange事件属性设置为要运行的函数名，这样当服务器处理完请求后就会自动调用该函数。也不需要担心该函数如何被触发执行，它又需要什么参数，以及返回什么值。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 18.2.7 回调 JavaScript是一种弱类型语言，可以使用变量引用任何东西。因此如果声明了一个函数updatePage()，JavaScript也将该函数名看作是一个变量。则你就可以使用变量名updatePage在代码中引用函数了。请注意，onreadystatechange属性应该放置在调用send()方法之前，也就是说在XMLHttpRequest对象发送请求之前必须设置该属性，这样服务器在回答完成请求之后才能查看该属性。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 18.2.8 处理服务器响应清楚了Ajax与服务器通信的全过程，当服务器完成请求，会自动回调（返回调用）onreadystatechange属性绑定的方法。下面我们就来设计回调函数，以处理服务器的响应。问题一，应该检测HTTP就绪状态。所谓HTTP就绪状态就是表示XMLHttpRequest对象发出请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。该状态可以通过XMLHttpRequest对象的readyState属性返回值确定（详细说明可以参阅表18.1所示）。上面已经讲到服务器在完成请求之后会在XMLHttpRequest的onreadystatechange属性中查找要调用的方法。但是每当HTTP请求状态改变时，服务器都会回调函数。这意味着如果服务器没有完全响应也会回调函数，这当然不是我们所希望看到的。因此我们应该在回调函数中首先判断当前的请求状态，只有请求状态为4时，说明服务器已经完整的进行了响应，此时才允许执行回调函数中的代码。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

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

18.2 使用XMLHttpRequest对象 18.2.8 处理服务器响应问题三，如何获取响应信息？当服务器顺利响应请求之后，我们就可以处理服务器返回的数据了。返回的数据将保存在XMLHttpRequest对象的responseText、responseBody、responseStream、或responseXML属性中。具体存储在哪个属性中，主要看服务器响应数据的格式而定。这四种属性说明如表18.4所示，它们都是只读属性。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.2 使用XMLHttpRequest对象 18.2.8 处理服务器响应 XMLHttpRequest对象将根据服务器响应数据的格式来决定使用那个属性容器存储返回的信息。一般常用的数据格式为文本格式（responseText）或XM格式（responseText），对于二进制数据流可以使用responseStream属性获取。获取这些返回信息之后，还需要使用JavaScript脚本把它们转换为需要的样式显示出来即可，详细操作就不再讲解。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.3 Ajax信息交互实战 18.3.1 Ajax显示前后台数据交互过程使用Ajax技术的一个最大盲点就是它不再刷新页面，你无法知道页面的加载进程，网页是否与后台联系，数据是否加载更新？这一切操作都被隐藏起来，于是就会让用户无从适应。遇到打开的一个空白页，也许数据还没有被加载完毕，但是如果没有提示标志，你还以为它是一个空白页呢。为了避免此类问题的发生，让用户面对静静的页面知道当前操作的进程。 18-7 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.3 Ajax信息交互实战 18.3.2 Ajax显示记录集记录集是动态网站中一个专有名次，表示从数据库中查询的一个数据集合。通俗说就是很多数据的集合，它们根据数据库中的表格结构有序排列在一起。 Ajax应用的核心实际上就是从服务器端的数据库中动态调用特定的数据，在这个过程中可能涉及简单的交互对话。例如，Ajax异步请求时应该告诉服务器所要显示的数据，并传递必须的参数。服务器接到这个请求之后，赶紧查询数据库获得所要的记录集，最后把这个记录集以一定的格式响应给客户端。客户端接收这些数据之后，利用脚本把它们读显在页面中。本示例是一个简单的模拟，假定在服务器端有一个数据表，在客户端允许用户指定要从数据表中获取的记录数，即要在页面中显示多少条记录。当单击【查询】按钮，Ajax把该参数传递给服务器，服务器就根据这个参数查询数据库，获得一个记录集，然后把这个记录集转换为XML格式的数据响应给客户端。浏览器再以表格的形式显示在页面中。 18-8 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

18.3 Ajax信息交互实战 18.3.3 Tab面板数据异步更新当鼠标指针移到Tab标题栏中时，将触发check()函数，并传递给它一个参数值，告诉当前的Tab菜单的编号。check()函数会打开与后台的异步连接，并发送请求，同时把该参数值发送给后台，后台服务器根据这个Tab菜单编号，从数据库中查询对应的数据，并转换为XML格式的数据响应给客户端。前台浏览器接收到响应数据之后，会自动调用回调函数，由回调函数来处理响应的数据，把它转换为表格结构，最后根据Tab菜单编号把这些数据插入到对应Tab面板中。 18-9 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

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

18.3 Ajax信息交互实战 18.3.5 Ajax关键词快速匹配本示例的设计思路是：当输入关键词时，Ajax快速把该词发送到后台，由后台与指定的数据进行比较，如果发现有匹配的信息，则组合成下拉列表的结构响应给客户端，最后由JavaScript脚本把这些文本信息插入到页面中。 18-11 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

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