Ajax基础教程（3）- 3.1 处理服务器响应

　　XMLHttpRequest对象提供了两个可以用来访问服务器响应的属性。第一个属性respo- 字串7

　　nseText将响应提供为一个串，第二个属性responseXML将响应提供为一个XML对象。一些简单的用例就很适合按简单文本来获取响应，如将响应显示在警告框中，或者响应只是指示成功还是失败的词。 字串9

　　查看全套Ajax基础教程。

　　第2章中的例子就使用了responseText属性来访问服务器响应，并将响应显示在警告框中。

　　3.1.1　使用innerHTML属性创建动态内容

字串1

　　如果将服务器响应作为简单文本来访问，则灵活性欠佳。简单文本没有结构，很难用JavaScript进行逻辑性的表述，而且要想动态地生成页面内容也很困难。

　　如果结合使用HTML元素的innerHTML属性，responseText属性就会变得非常有用。innerHTML属性是一个非标准的属性，最早在IE中实现，后来也为其他许多流行的浏览器所采用。这是一个简单的串，表示一组开始标记和结束标记之间的内容。

字串7

　　通过结合使用responseText和inner-

　　HTML，服务器就能“生产”或生成HTML内容，由浏览器使用innerHTML属性来“消费”或处理。下面的例子展示了一个搜索功能，这是使用XMLHttpRequest对象、其responseText属性和HTML元素的innerHTML属性实现的。点击search（搜索）按钮将在服务器上启动“搜索”，服务器将生成一个结果表作为响应。浏览器处理响应时将div元素的innerHTML属性设置为XMLHttpRequest对象的response-

　　Text属性值。图3-1显示了点击search按钮而且在窗口内容中增加了结果表之后的浏览器窗口。 字串8

　　第2章的例子只是将服务器响应显示在警告框中，这个例子的代码与它很相似。具体步骤如下： 字串2

　　1. 点击search按钮，调用startRequest函数，它先调用createXMLHttpRequest函数来初始化XMLHttpRequest对象的一个新实例； 字串9

　　2. startRequest函数将回调函数设置为handleStateChange函数；

字串1

　　3. startRequest函数使用open()方法来设置请求方法（GET）及请求目标，并且设置为异步地完成请求； 字串3

　　4. 使用XMLHttpRequest对象的send()方法发送请求； 字串8

　　5. XMLHttpRequest对象的内部状态每次有变化时，都会调用handleStateChange函数。一旦接收到响应（如果readyState属性的值为4），div元素的innerHTML属性就将使用XMLHttpRequest对象的responseText属性设置。

　　代码清单3-1显示了innerHTML.html。代码清单3-2显示了innerHTML.xml，表示搜索生成的内容。 字串6

　　代码清单3-1　innerHTML.html 字串1

　　代码清单3-2　innerHTML.xml

字串7

　　使用responseText和innerHTML可以大大简化向页面增加动态内容的工作。遗憾的是，这种方法存在一些缺陷。前面已经提到，innerHTML属性不是HTML元素的标准属性，所以与标准兼容的浏览器不一定提供这个属性的实现。不过，当前大多数浏览器都支持innerHTML属性。可笑的是，IE是率先使用innerHTML的浏览器，但它的innerHTML实现反而最受限制。如今许多浏览器都将innerHTML属性作为所有HTML元素的读/写属性。与此不同，IE则有所限制，在表和表行之类的HTML元素上innerHTML属性仅仅是只读属性，从一定程度上讲，这就限制了它的用途。

字串1

　　3.1.2　将响应解析为XML

　　你已经了解到，服务器不一定按XML格式发送响应。只要Content-Type响应首部正确地设置为text/plain（如果是XML，Content-Type响应首部则是text/xml），将响应作为简单文本发送是完全可以的。复杂的数据结构就很适合以XML格式发送。对于导航XML文档以及修改XML文档的结构和内容，当前浏览器已经提供了很好的支持。 字串1

　　浏览器到底怎么处理服务器返回的XML呢？当前浏览器把XML看作是遵循W3C DOM的XML文档。W3C DOM指定了一组很丰富的API，可用于搜索和处理XML文档。DOM兼容的浏览器必须实现这些API，而且不允许有自定义的行为，这样就能尽可能地改善脚本在不同浏览器之间的可移植性。