《2022年JSP教程_AJAX开发 .pdf》由会员分享，可在线阅读，更多相关《2022年JSP教程_AJAX开发 .pdf（34页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第 21 章 AJAX开发 AJAX 是随着 Web2.0 时代的到来而产生的，对于传统的Web 应用开发来说，AJAX 所运用的是更加先进、更加标准化、更加和谐高效以及完整的Web 开发技术体系。之前，在使用浏览器访问页面时，当你刷新一个页面的时候（特别是在网站访问很慢的时候），这时浏览器会怎么样？这时的浏览器会出现一片空白，而你只能在浏览器面前白白苦等。传统的Web 应用常常在页面中添加一个DIV ，来显示“系统正在处理您的请求，请稍等”类似的提示信息。这一章将要的介绍的AJAX 就可以彻底地改变这种窘迫的局面，从而可以大大提高用户体验。如今，随着 Gmail 、Google-maps 等
2、产品使用了AJAX 之后， AJAX 正逐渐吸引着全世界的注意。本章要点包括以下内容：基于 Ajax 的开发模式介绍Ajax 所使用到的技术Ajax 详细的开发过程Ajax 主要应用范围Ajax 尚存在的问题21.1 Ajax 介绍网络的迅速发展，已经悄悄地改变着人们的生活方式。有越来越多的人习惯从网络中寻找自己想要的信息和知识，不再单纯地从书籍中获取。网络通信的兴起，人们也已经从传统的电话书信联系转变成了使用电子邮件以及及时通信软件（例如MSN ）来和自己的朋友联系。电子商务技术也可以让人们在家中通过网络就可以购买到自己想要到的东西。网络拉近了人们之间的距离，方便了人们的生活。BS 结构的
3、Web 应用正是凭借网络的广泛普及性，加上客户端仅仅需要安装了浏览器即可方便浏览站点信息。虽然在很多方面，BS 结构的 Web 应用比桌面应用程序更加优越，但正是由于它拥有客户端广泛适应和灵活性，而失去丰富客户端的控制能力。即之前的Web 应用属于瘦客户程序，大量的计算和操作都集中在服务器端执行。Ajax 的出现在一定程度上改变了以往Web 应用所存在的不足， 虽然 Ajax 并非一个革命性的新技术，但是它依靠多个成熟技术的整合并扮演着一个崭新的角色。Ajax 首先在google 中得到了成功使用，从而使它得到了广泛的关注和推崇。那么Ajax 到底是什么了？这一章将慢慢地揭开Ajax 的庐山真
4、面。Ajax 的全称是Asynchronous JavaScript And XML （异步 Javascript 和 XML ），它可以实现客户端的异步请求操作。 首先读者需要明白的，Ajax 并不是一个崭新的技术，它是多个已经非常成熟技术的集合。但是 Ajax 现在能够吸引这么多程序员的关注，是由于它具有独特的魅力以及能在Web 开发中扮演着一个崭新的角色。它可以实现类似桌面应用程序一样的胖客户端，有更多的控制能力。但是与 Applet 和 Flash 相比较， Ajax 则是一种轻量级的解决客户端方案。因为Ajax 操作的基础仍然是 HTML 或者 XHTML静态页面，它使用JavaSc
5、ript 作为脚本语言，这就保证了它的纯文本性质。简单地来说， Ajax 具有如下多个优势：它具有更好的搜索引擎友好性；设计出色的Ajax 程序还可以很好的在旧版本的设备上工作；利用 XML 或者 Json 结构数据， Ajax 可以很好地和其他应用程序（一名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 34 页 - - - - - - - - - 第 18 章常用插件扩展点323般为后台动态页面程序，例如JSP、Servlet 等）进行通信。传统的Web 应用请求机制，
6、是用户请求之后，等待后台重新组装整个页面传会给客户端显示。这样的弊端是网络承载了很多无用数据的传递。最为极端的情况， 即用户在页面中只需要得到某一条信息，结果，后台服务器最确将插入该条信息的整个页面传递过来，这造成网络负载加重。另外，不管用户在客户端发出什么样的请求，都需要等待页面重新刷新显示，这大大影响了用户的体验。正是基于传统Web 应用存在这么多的不足，Ajax 就显得非常及时和受欢迎。Ajax 实现页面异步请求，再也不需要进行页面的刷新，结合DOM 技术可以只修改页面局部需要修改的信息。并且，Ajax 使得网络只传递有用信息成为了可能，这大大减轻了网络传输的负担。Ajax 能受到这么多
7、人关注的另一个重要原因是它完全基于成熟的技术，作为异步调用的基础设施XMLHttpRequest ，其实早在1999 年就被引入到IE 浏览器中，随后又被其他浏览器所支持。另外，JavaScript、DOM 、CSS 也早就是W3C 标准。所以说，学习Ajax 就是学习如何有效集合这些技术的使用。本文通过与传统Web 应用进行对比来介绍Ajax 的运行机制。传统Web 应用一般采取 “ 请求 ” “ 刷新” “ 显示 ” 的模式。用户在客户端一般通过单击按钮或者链接来发送一个Web 请求，服务器接受请求并进行相应处理，处理完成之后，重新组装页面并返回给客户端进行显示。在服务器进行处理的这段时间
8、内，客户端会出现什么情况了？这时客户端浏览器将一直处于Loading 状态，显示为空白或者无响应状态，用户能做的只有等待。从用户体验来说，传统Web 执行机制是非常糟糕的。事实上，有时用户仅仅想获取到某一条信息，但是传统的Web 执行机制将会为这一个小小的请求不得不重新刷新整个页面，使得页面中的所有图片和数据进行重新下载和运行。这不仅仅加大了网络流量，而且造成用户体验质量的下降。下面先详细介绍传统Web 应用的运行模式，然后与Ajax 进行对比。21.2 传统Web开发模式由前面的介绍可知，传统的Web 执行模式是 “ 请求 ” “ 刷新 ” “ 显示” ，每一个请求都会对应一个页面的显示，发
9、送一个请求就会重新获取一个页面，也就是通常所说的刷新。在这样的执行模式下，一个Web 应用系统一般由多个页面组成，每一个页面对应一个业务处理逻辑，或者成为功能块。而在客户端显示的页面实际上只是一个纯界面性的东西。从图 21.1 可以更加清晰了解到该传统模式的执行过程。在客户端显示的各个页面都对应着服务器端的一个页面，而整个Web 应用程序就是由这些页面组成。Web 应用的各个子功能可能对应一个或者多个页面，这取决于Web 设计者的考虑。虽然传统Web 应用的开发方式非常灵活，但是它存在的不足也是很明显的，就是当用户需要获取一条信息时，它必须将这一条信息对应到整个页面上，并将整个页面作为整体提供
10、给用户，而不管页面中是否包含冗余信息。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 34 页 - - - - - - - - - Eclipse 从入门到精通324图 21.1 传统 Web 模式其实一个页面中包含很多静态不变的元素，比如整体框架的HTML 元素，用户界面格式显示的图片和 CSS 样式表等。这些不变元素在每次请求中也需要重新加载会大大增加网络负载。虽然为了解决这个问题，很多开发者尽量将页面粒度降低，但是还是不如CS 架构的桌面应用程序。21.3 基于Aj
11、ax的开发模式和传统的Web 应用相比较， Ajax 向传统的桌面程序靠拢了一点，但是它又不存在桌面程序存在的不足（需要安装客户端程序，每次升级，客户端同样需要下载升级包）。使用Ajax 开发的 Web 页面可以从多个接口获取数据，并将它们更新在页面中（通常通过DOM 来修改页面显示数据，而不需要整体刷新，这样不会出现白屏现象）。在 Ajax 程序中，每个客户端显示页面不一定对应一个服务器端页面，这时的服务器端页面更多不再是界面显示工具，而是作为提供数据的接口。在Ajax 中，使用 XMLHttpRequest 对象能够获取到这些页面所返回的信息，然后将其提交给客户端页面的Ajax 引擎，再由
12、Ajax 引擎来决定将这些数据插入到页面确定的位置（通常使用DOM 技术，将在后面重点介绍）。由图21.2 可以更加清晰地了解到Ajax的执行模式。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 34 页 - - - - - - - - - 第 18 章常用插件扩展点325图 21.2 基于 AJAX 的 Web 模式从图中可以看出，每一个客户端显示页面是由多个服务器端页面程序共同完成的，另外，一个服务器端页面也可以为多个客户端页面服务。在这样的模式下，服务器端的页面可以
13、将粒度划分地非常细。Ajax 引擎根据需要和服务器端的页面程序进行交互，并将需要的数据返回到客户端页面，然后插入到页面相应位置。其实，这时的服务器端页面已经再称为页面了，更类似与接口。21.4 两种执行模式的比较之前 XMLHttpRequest一直被人们所忽视，最近才被重视。 其实它可以使服务器端的页面和浏览器之间进行异步通信，而不需要再进行刷新整个页面的操作，大大提高了用户的体验以及降低了网络的流量。下面将对这两种模式的工作流程作进一步的比较。21.4.1 传统Web 模式的工作流程和 Ajax 的异步概念相比，传统Web 模式是一种同步。用户必须等待每个请求返回的响应，才能进行下一步操作
14、。下面的时序图21.3 描述了传统Web 模式的工作流程图。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 34 页 - - - - - - - - - Eclipse 从入门到精通326图 21.3 传统 Web 工作流程从图中可以看出，传统Web 模式完全遵循 “ 请求 ” “ 刷新” “ 显示” 模式。用户发出一个请求后，只有等请求处理完后，用户才能进行下一步操作，这期间用户只能等待。用户行为和服务器行为是一种同步的关系，需要相互等待，也正是这样的等待，造成了BS
15、结构客户端和CS 结构客户端的本质区别。21.4.2 Ajax程序的工作流程Ajax 最重要的功能就是将Web 请求和处理从同步转变成了异步。这就意味着客户端和服务器端再也不必相互之间等待，而是可以进行一些并发的执行。形象一点讲，用户在页面进行相关浏览或者其他请求操作时，后台服务器可能正在执行用户前一个请求，用户不需要等待前一个请求处理完就可以进行下一步操作。当后台服务器处理完一个请求之后，会自动将处理结果返回给前台的Ajax 引擎来更新页面中的部分数据，并且不会像传统Web 应用模式一下传递大量的冗余数据。从下面的 Ajax 工作流程图21.4 可以看出， 用户行为和服务器行为之间多了一层A
16、jax 引擎，它负责处理用户的行为，并转发给服务器进行响应处理。同时它也接受服务器端返回的数据，经过处理之后在页面相应位置显示。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 34 页 - - - - - - - - - 第 18 章常用插件扩展点327图 21.4 AJAX程序的工作流程由于 Ajax 在后台是以异步形式进行工作的，所以用户再也不需要等待服务器的处理，即可以进行下一步操作，这就在用户界面层次上更加地接近了CS 结构地客户端平台。注意：同步和异步只是两种开
17、发模式相区别的一种，Ajax 还会带来整体Web 性能的提高： 由于 Ajax引擎对用户行为进行了相应处理，所以可以保证客户端只获取需要的数据。DOM模型可以实现动态修改页面的层次结构，这样动态获取的数据可以动态地插入的页面相应位置，这就避免了大量冗余数据的重新加载。21.5 AJAX 带来的好处总结起来，使用Ajax，可以为ISP、开发人员以及终端用户带来如下可见的便捷：（1）减轻服务器的负担。Ajax 的原则是 “ 按需求获取数据” ，它可以最大限度的减少冗余数据的传递，从而可以减轻网络传输负担。（2）无须再刷新页面，用户再也不会在黑白页面中焦急等待，这样减少了用户心理和实际的等待时间。
18、Ajax 使用 XMLHTTP对象来发送请求并得到服务器响应，在不需要重新装载整个页面的情况下就可以使用JavaScript 来操作页面的DOM 节点，从而可以更新页面数据，即将用户请求结果返回到页面中。（3）可以给用户带来更好的体验，因为用户再也不需要在服务器进行请求处理时进行无用的等待。（4）使用 Ajax 可以将以前的一些服务器负担移到客户端来完成，利用客户端闲置的资源来处理，从而可以减轻服务器端和宽带的负担，节约了空间和成本。（5）Ajax 结合 XML 或者 JSON 可以轻松得获取到外部数据。（6）Ajax 还保存着完全静态的特性（虽然它已经实现了动态功能），并且它已经被广泛得到其
19、他技术支持，并不需要下载插件或者小程序。（7）促进了页面显示和数据的进一步分离。21.6 谁在使用 AJAX 在应用 Ajax 来开发 Web 应用方面， Google 是当仁不让的表率。它的 Orkut、Gmail、Google Groups、Google Maps 以及 Google suggest 产品都是使用的Ajax 技术。Amazon 的 A 搜索引擎也是采用的该类似技术。典型的，微软也将Ajax 技术应用到了MSN Space 上面。刚用MSN Space 的用户，一定对其服务感到很奇怪，当提交回复评论的时候，浏览器会暂时停顿一下，然后在无刷新的情况下将用户评论提交到后台，并同时
20、显示在页面中。这就是应用了Ajax 效果，如果真的对一个评论都要重新刷新整个页面，那真的是很费事。21.7 AJAX 使用到的技术AJAX中使用到的最为核心的技术是浏览器脚本语言JavaScript。它像一个强大的黏合剂，综合了名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 34 页 - - - - - - - - - Eclipse 从入门到精通328DOM 、XML 以及 CSS 样式表等技术并发挥着巨大作用。其中JavaScript 和 CSS 的基本概念和语法都已
21、经在第五、六章介绍过。另外，读者需要重点了解的是AJAX 中进行异步请求的XMLHttpRequest 对象的使用。下面对这些涉及到的技术进行逐一重点介绍。21.7.1 JavaScript脚本语言在网页中出现的各种特效，例如字符串组成的时钟、滚动的状态栏、漫天飘舞的雪花等等，这些都是 JavaScript 的功劳。JavaScript 一直被定位为客户端的脚本语言，应用最多的地方是表单的数据校验。在Ajax中，JavaScript 确从幕后走到了前台，并发挥着巨大的作用。可以说，它JavaScript 是 AJAX 的黏合剂，它综合 DOM 、 XHTML （或者 HTML ）、 XML （
22、或者 JSON）以及 CSS 等技术，并控制它们的行为。现在 Web 程序中基于JavaScript 实现的很多功能已经具有相当大的实用性，不再是一些特效或者表单验证之类的简单应用了，这些高级应用所使用到的JavaScript 也已经相当专业的。因此，要开发出一个复杂高效的AJAX 应用程序，就必须对JavaScript 有深入的了解、应该对待一门新的语言来对待它。21.7.2 XMLHttpRequest对象AJAX 实现异步处理，就是通过XMLHttpRequest 对象实现的，它是XMLHTTP组件的一个对象。通过该对象的调用，AJAX 可以实现像桌面应用程序一样同服务器进行数据层面的交
23、换，而不需要每次请求都要刷新整个页面，也不需要每次数据操作都要交付给服务器去完成。AJAX 实现的 Web 应用可以大大减轻服务器负担，而且还加快了响应速度、缩短用户等待时间，因为HTTP 只传输需要的数据。IE5.0 开始，开发人员可以在Web 页面中使用XMLHTTP ActiveX组件来扩展自身的功能，不再需要使用 Web 页面导航就可以直接将数据传递到服务器或者从服务器那获取到相应数据。Mozilla1.0 以及NetScape7 则是创建了继承XML 的代理类XMLHttpRequest ；在大部分情况下， XMLHttpRequest 对象和XMLHTTP组件相类似，方法和属性也非
24、常类似，只是部分属性可能存在差异。在使用 XMLHttpRequest进行异步处理之前，需要对该对象初始化操作，根据不同的浏览器，初始化方法是不同的. （1）IE 浏览器的初始化方法如下：Var xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP ”); 或者Var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP ”); 括号中的不同参数是针对不同版本的浏览器。还有其他参数类型，只是现在最为常见的就是这两种，需要考虑的也就是这两种。（2）Mozilla 浏览器初始化方法如下：Var xmlHttp = new X
25、MLHttpRequest(); 总的 XMLHttpRequest对象初始化程序如下： XMLHttpRequest 对象中所包含的一般方法如下表21.1 所示：表 21.1 XMLHttpRequest对象方法方法描述Abort() 停止当前的异步请求getAllResponseHeaders() 以字符串形式返回完整的HTTP 头信息getResponseHeader(“headerLabel ”) 使用 headerLabel标识来获取指定的 HTTP 头信息Open(“method”, ”URL ”asyncFlag,“username”,“password ”设置进行异步请求的UR
26、L 、请求方法以及其他参数信息Send(content) 发送请求setRequestHeader(“label ”, ”value ”) 设置 HTTP 头信息，并和请求一起发送到服务器其中比较常用的是open()和 send()两个方法。 其中 open()方法在创建完了XMLHttpRequest对象之后就可以使用它了，它创建一个请求，并准备向服务器发送，基本语法如下：Xmlhttp.open(method,url,asynchronous,user,password); 例如：Xmlhttp.open(“get ”, ”getData.jsp?key=8”,true); 其中参数含义如
27、下：Method：指定请求的类型，一般为get 或者 post。url：指定请求的地址，可以使用绝对地址或者相对地址，并且可以附带查询字符串。Asynchronous：这是一个可选项， 表示请求是同步还是异步，异步请求为false，同步请求为true，默认情况下该参数为true。User：可选参数，指定请求用户名，没有则省略。Password：可选参数，指定请求的密码，没有则省略。在使用 open()方法创建了一个请求之后，就可以使用send()方法向服务器发送该创建的请求，其基本语法如下：Xmlhttp.send(content); 其中的 content 变量为记录发送的数据，其格式为查询
28、字符串的形式，如下：Content = “username=Johnson&sex=male&age=25 ”; 其中定义了发送给服务器的三个名/值对，并且在它们之间使用& 符号隔开。如果在open()方法中method 参数指定为get，则这些参数是作为字符串提交的，服务器端使用request.querystring() 来获取；如果 method参数指定为 post， 则这些参数作为HTTP 的 post方法提交，在服务器端需要使用request.form()方法来获取。这里的content 参数是必须要指定，如果没有参数值需要传递，可以设置的content=null ，则 xmlhttp
29、.send(null) 。XMLHttpRequest 对象中所包含的属性如表21.2 所示：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 34 页 - - - - - - - - - Eclipse 从入门到精通330表 21.2 XMLHttpRequest对象属性属性描述onreadystatechange 状态改变的事件触发器readyState 对象状态：0 未初始化1 读取中2 已经读取3 交互中4 完成responseText 服务器进程返回的文本信息re
30、sponseXML 服务器进程返回的兼容DOM 的XML 文档对象status 服务器返回的状态码，如：404“文件未找到”200“成功”statusText 服务器返回的状态文本信息下面对 XMLHttpRequest 对象中的各个属性进行详细介绍：（1）onreadystatechange事件捕获请求的状态变化在向服务器端发送了一个请求后，往往是不知道请求什么时候完成，所以必须使用一种机制来获取请求处理的状态。Onreadystatechange状态变量就是XMLHttpRequest对象用来实现这一功能的。Onreadystatechange事件可以指定一个事件处理函数用来处理XMLHt
31、tpRequest 对象的执行结果， 例如：Xmlhttp. Onreadystatechange=function() /此处将对异步请求返回的结果进行处理 Xmlhttp.open(); Xmlhttp.send(); 注意：这里将事件绑定在调用了open()和 send()方法之后进行，是因为这两个方法都会触发Onreadystatechange事件。如果该事件在其后面定义，则可能引起该事件指定的处理代码得不到执行。（2）使用 readyState 属性判断请求状态Onreadystatechange事件是在readyState 属性发生改变的时候触发执行的，该属性记录着当前请求的状态，
32、然后在程序中可以根据不同请求状态进行不同的处理。下表21.3 列出各种不同属性值的含义。表 21.3 readyState属性值含义readyState属性值描述0 这是 readyState开始具有的值，表示对象已经建立，但还未初始化，这时尚未调用 open方法。1 表示 open已经调用，但是尚未调用send方法2 表示 send 方法已经调用，但是其他数据还未知3 表示请求已经发送，正在接受数据过程中4 表示数据已经接受成功。在整个过程中， Onreadystatechange事件在每次readyState 属性值发生改变的时候都会执行一次，所以通常在事件中判断readyState值，然
33、后根据不同状态来作适当的处理。例如：Xmlhttp.onreadystatechange=function() If(xmlhttp.readystate = 4) /请求完毕时的执行处理代码 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 34 页 - - - - - - - - - 第 18 章常用插件扩展点331这里的 readyState 仅仅表示请求的状态，并不表示请求的结果，下面介绍的status 属性时用来判断请求结果。（3）使用 status属性判断请求的
34、结果Status 属性存储服务器端返回的http 请求响应结果码，下表21.4 列出了常见的响应结果码含义。表 21.4 http响应状态码http响应状态码描述200 请求成功202 请求被接受，但是尚未完成400 错误的请求404 请求资源未找到500 内部服务器错误，例如后台jsp处理文件语法错误在使用 readyState 属性判断请求完成之后，可以使用status 属性判断请求处理结果。在AJAX 开发过程中，最为常见的响应代码为200，它表示请求处理成功，例如下面的一段AJAX 代码：Xmlhttp.onreadystatechange=function() If(xmlhttp.
35、readystate = 4) /判断请求成功完成 If(xmlhttp.status = 200) /判断请求操作成功else /操作错误或者未完成 以上代码是一个比较完整的XMLHttpRequest 对象请求处理代码。（4）使用 responseText 获得返回的文本当服务器已经成功处理完请求之后，就可以使用XMLHttpRequest对象中的responseText 属性来获取返回的文本或者html 页面数据。例如下面的一段html 页面代码，该页面文件名为responseText.html： var xmlhttp; try xmlhttp = new ActiveXObjt(“M
36、sxml2.XMLHTTP ”); catch(e) try xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP ”); catch(e) try xmlhttp = new XMLHttpRequest(); catch(e) /下面定义 XMLHttpRequest对象的事件处理程序xmlhttp.onreadystatechange = function() if(xmlhttp.readyState = 4) if(xmlhttp.status = 200) var showHtml = xmlhttp.responseText; alert(
37、showHtml); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 34 页 - - - - - - - - - Eclipse 从入门到精通332else alert(“处理错误 ”); /创建一个请求连接Xmlhttp.open(“get ”, ”a.html ”,true); Xmlhttp.send(null); 其中 a.html 静态页面代码如下： new Document hello,ajax! 运行 responseText.html 页面，弹出的对话
38、框如图21.5 所示。图 21.5 responseText 属性返回值使用 XMLHttpRequest对象中的responseText 属性可以获取到请求页面的纯文本信息，并不经过任何处理。并不是每次都要求返回html 页面代码，有时可以使用json 数据格式来返回只需要的数据。（5）使用 responseXML 属性来获取XML 文档信息除了可以使用responseText 属性来获取纯文本信息之后，还可以使用其中的responseXML 属性来获取服务器返回的XML文档对象。在使用responseText 属性来获取返回的纯文本信息时，后台服务器是不需要进行额外操作的。但是respon
39、seXML 属性不同，它需要服务器返回的必须是一个严格符合XML格式的文档，这就要求返回的HTTP 头的 content-type 设置为“ text/XML ” 。如果服务器直接获取某个XML 文档并返回 （例如将前面的a.html 改名为 a.xml），这时因为请求后缀为 xml ，所以服务器会自动将返回结果的“content-type”属性设置为“ text/xml”。如果是通过后台服务器程序动态生成的XML ，则需要设置Response“contenttype”为“ text/xml”。获取的 responseXML 属性实际上是一个DOM 文档对象模型说规定的文档对象，具有DOM 模
40、型的操作规范。这里将a.html 文件改名为a.xml，然后修改上面实例中的事件触发函数代码，其他部分不需要修改。Xmlhttp.onreadystatechange = function() If(xmlhttp.readyState = 4) If(xmlhttp.status = 200) Var xmlObj = xmlhttp.responseXML; Var title = xmlObj.getElementByTagName(“title”)0.text; Alert(title); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - -
41、 - - - - 名师精心整理 - - - - - - - 第 11 页，共 34 页 - - - - - - - - - 第 18 章常用插件扩展点333 Else Alert(“处理错误 ”); 重新运行该页面，弹出如图21.6 所示对话框信息。图 21.6 responseXML属性返回信息21.7.3 DOM文档对象模型DOM 文档对象模型是Ajax 开发中一个重要的技术，下面从实际运用角度出发来介绍DOM 的使用方法。21.7.3.1什么是 DOM 模型DOM 模型全称 Document Object Module （文档对象模型），它定义了操作文档对象（例如XML 文档）的接口。例
42、如XML文档，它就像一棵树的结构，树中的每一个结点都对应一个XML标记，及一个对象。实际上， DOM模型更多的是一个对象模型，它并不依赖于对象的结构，树形结构只是它其中的一个实现。 DOM 规定了每个对象具有哪些接口，例如添加结点、删除结点等等。在AJAX 中，通常使用这些接口来改变文档的状态，从而达到页面动态显示的目的。现在的 DOM 模型主要有三个部分。核心：这部分包括最为底层的文档操作接口，适合HTML 和 XML 文档类型。HTML ：这部分内容是针对HTML 进行操作的接口。XML ：该部分是针对XML 进行操作的接口。21.7.3.2DOM 模型在 AJAX 开发中所起的作用在 A
43、JAX 中，其实 DOM 模型是非常重要的，是所有 AJAX 开发的基础结构。如果没有 DOM 模型，就没有办法在客户端改变页面内容。没有掌握DOM 模型的相关技术，是不能真正掌握AJAX 开发精髓的。21.7.3.3处理 DOM 中的结点在 DOM 模型中引用一个结点对象可以多种方法，如下：（1）document.getElementById() 引用指定id 的结点在 HTML或者 XHTML中，每一个结点对象都可以定义一个id 属性。但是每个结点定义的id 属性值必须在整个文档中惟一。另外可以使用document 中的 getElementById() 方法来获取到该结点对象。例如下面的
44、代码： document.getElementById()方法 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 34 页 - - - - - - - - - Eclipse 从入门到精通334 var divItem = document.getElementById(“div1 ”); alert(divItem.innerHTML); hello，Ajax ！ 代码说明：该段代码将输出id 属性名为“ div1”的 div 结点对象中的文本信息。具体innerHTM
45、L属性的意义见下面的讲解。（2）document.getElementByTagName() 引用指定标签名的结点对象使用 document.getElementByTagName() 可以返回某文档中所有指定标签名的结点对象组，具体示范实例如下： document.getElementById()方法 var divItems = document.getElementByTagName(“div ”); for(var i=0;idivItems.length;i+) alert(divItemsi.innerHTML); hello，Ajax ！ hello，Ajax2 ！ 代 码 说
46、明 ： 由 于 该 页 面 文 档 中 存 在 两 个 标 签 名 为 “ div ” 的 结 点 对 象 ， 所 以 使 用document.getElementByTagName() 方法返回的是包含两个结点对象的数组，使用 for 循环将这两个结点中的文本信息输出。21.7.3.4间接引用结点对象上面介绍的方法是通过结点对象中的id 以及结点名称来获取结点对象的。本小节将介绍如何使用间接方法获取相对应的结点对象，具体方法如下：（1）使用 childNodes 结合属性引用子结点其实在 JavaScript 中，每个结点都有一个childNodes 集合属性，是以数组形式存储着该结点下所有
47、的子结点信息。这些子结点的排序顺序是按照在页面文档中出现的先后顺序排列的。这样就可以通过数组索引来引用一个结点下的所有子结点对象。例如获取HTML文档根结点，代码可以如下：document.childNodes0 除了使用 childNodes 属性之后，还可以使用firstChild 和 lastChild 属性来获取第一子结点和最后一个子结点对象。具体代码如下：Element.firstChild /获取 element 结点对象中的第一子结点对象Element.lastChild /获 element 结点对象中的最后一个子结点对象下面通过一个实例代码综合演示childNodes 属性以
48、及firstChild 和 lastChild 属性的使用： 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 34 页 - - - - - - - - - 第 18 章常用插件扩展点335 document.getElementById()方法 var divItem = document.getElementById(“div1 ”); alert(divItem.firstChild.childNodes0); /输出“ Ajax1”alert(divItem.fi
49、rstChild.lastChild); /输出“ Ajax2” Ajax1Ajax2 （2）使用 parentNode 属性获取父结点在类似于HTML文档结构中，除了根结点之后，每个结点都有一个惟一的父结点，并可以使用parentNode 属性来获取到，语法代码如下：elemnt.parentNode 其中 element 为某个结点对象。（3）获取兄弟结点对象定义在同一层次上的所有结点对象称为兄弟结点。使用下面的两个属性可以引用兄弟结点，具体语法代码如下：element.nextSibling /引用上一个兄弟结点element.previousSibling /引用下一个兄弟结点21.7
50、.3.5获取结点信息其实获取一个结点对象之后，就是为了要获取到该结点下的文本信息，具体方法有如下：（1）使用 nodeName 属性获取结点名称该属性语法如下：Node.nodeName 但是针对不同的结点类型，nodeName 属性返回不同的值：元素结点：返回标签名称，例如，则返回“ span”；属性结点：返回属性名称，例如id= ” span1 ”，则返回“ span1”；文本结点：返回文本内容。（2）使用 nodeType 属性获取结点类型该属性使用的语法如下：Node.nodeType 对应不同类型结点，nodeType 属性也返回不同值：元素结点：返回1；属性结点：返回2；文本结点：