Ajax- 与服务器通信1

来自站长百科
Zhaoc（讨论 | 贡献）2009年6月18日 (四) 09:48的版本
跳转至： 导航、​ 搜索

XMLHttpRequest对象提供了两个可以用来访问服务器响应的属性。第一个属性respo- nseText将响应提供为一个串，第二个属性responseXML将响应提供为一个XML对象。一些简单的用例就很适合按简单文本来获取响应，如将响应显示在警告框中，或者响应只是指示成功还是失败的词。

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


使用innerHTML属性创建动态内容


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

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

Image004.gif 通过结合使用responseText和inner- HTML，服务器就能“生产”或生成HTML内容，由浏览器使用innerHTML属性来“消费”或处理。下面的例子展示了一个搜索功能，这是使用XMLHttpRequest对象、其responseText属性和HTML元素的innerHTML属性实现的。点击search（搜索）按钮将在服务器上启动“搜索”，服务器将生成一个结果表作为响应。浏览器处理响应时将div元素的innerHTML属性设置为XMLHttpRequest对象的response- Text属性值。图3-1显示了点击search按钮而且在窗口内容中增加了结果表之后的浏览器窗口。

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

1. 点击search按钮，调用startRequest函数，它先调用createXMLHttpRequest函数来初始化XMLHttpRequest对象的一个新实例；
2. startRequest函数将回调函数设置为handleStateChange函数；
3. startRequest函数使用open()方法来设置请求方法（GET）及请求目标，并且设置为异步地完成请求；
4. 使用XMLHttpRequest对象的send()方法发送请求；
5. XMLHttpRequest对象的内部状态每次有变化时，都会调用handleStateChange函数。一旦接收到响应（如果readyState属性的值为4），div元素的innerHTML属性就将使用XMLHttpRequest对象的responseText属性设置。
代码清单3-1显示了innerHTML.html。代码清单3-2显示了innerHTML.xml，表示搜索生成的内容。

代码清单3-1　innerHTML.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Using responseText with innerHTML</title>

<script type="text/javascript">

var xmlHttp;

function createXMLHttpRequest() {

   if (window.ActiveXObject) {

       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

   }

   else if (window.XMLHttpRequest) {

       xmlHttp = new XMLHttpRequest();

   }

}

function startRequest() {

   createXMLHttpRequest();

   xmlHttp.onreadystatechange = handleStateChange;

   xmlHttp.open("GET", "innerHTML.xml", true);

   xmlHttp.send(null);

}

function handleStateChange() {

   if(xmlHttp.readyState == 4) {

       if(xmlHttp.status == 200) {

           document.getElementById("results").innerHTML = xmlHttp.responseText;

      }

   }

}

</script>

</head>

<body>

   <form action="#">

       <input type="button" value="Search for Today's Activities"

               onclick="startRequest();"/>

   </form>




</body>

</html>

代码清单3-2　innerHTML.xml


<tbody>




















</tbody>
Activity Name Location Time
Waterskiing Dock #1 9:00 AM
Volleyball East Court 2:00 PM
Hiking Trail 3 3:30 PM


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


将响应解析为XML

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

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

W3C DOM

W3C DOM到底是什么？W3C主页提供了清晰的定义：

文档对象模型（DOM）是与平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。文档可以进一步处理，处理的结果可以放回到所提供的页面中。

不仅如此，W3C还解释了为什么要定义标准的DOM。W3C从其成员处收到了大量请求，这些请求都是关于将XML和HTML文档的对象模型提供给脚本所要采用的方法。提案并没有提出任何新的标记或样式表技术，而只是力图确保这些可互操作而且与脚本语言无关的解决方案能得到共识，并为开发社区所采纳。简单地说，W3C DOM标准的目的是尽量避免20世纪90年代末的脚本恶梦，那时相互竞争的浏览器都有自己专用的对象模型，而且通常都是不兼容的，这就使得实现跨平台的脚本极其困难。

W3C DOM和JavaScript

W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，这就使得JavaScript可以访问元素的属性和方法。

DOM独立于具体的编程语言，通常通过JavaScript访问DOM，不过并不严格要求这样。可以使用任何脚本语言来访问DOM，这要归功于其一致的API。表3-1列出了DOM元素的一些有用的属性，表3-2列出了一些有用的方法。

表3-1 用于处理XML文档的DOM元素属性


childNodes
返回当前元素所有子元素的数组

firstChild
返回当前元素的第一个下级子元素

lastChild
返回当前元素的最后一个子元素

nextSibling
返回紧跟在当前元素后面的元素

nodeValue
指定表示元素值的读/写属性

parentNode
返回元素的父节点

previousSibling
返回紧邻当前元素之前的元素


表3-2　用于遍历XML文档的DOM元素方法


getElementById(id) (document)
获取有指定惟一ID属性值文档中的元素

getElementsByTagName(name)
返回当前元素中有指定标记名的子元素的数组

hasChildNodes()
返回一个布尔值，指示元素是否有子元素

getAttribute(name)
返回元素的属性值，属性由name指定


有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。

从下面的例子可以看到，使用遵循W3C DOM的JavaScript来读取XML文档是何等简单。代码清单3-3显示了服务器向浏览器返回的XML文档的内容。这是一个简单的美国州名列表，各个州按地区划分。

代码清单3-3 服务器返回的美国州名列表

<?xml version="1.0" encoding="UTF-8"?>

<states>

   <north>

       <state>Minnesota</state>

       <state>Iowa</state>

       <state>North Dakota</state>

   </north>

   <south>

       <state>Texas</state>

       <state>Oklahoma</state>

       <state>Louisiana</state>

   </south>

   <east>

       <state>New York</state>

       <state>North Carolina</state>

       <state>Massachusetts</state>

   </east>

   <west>

       <state>California</state>

       <state>Oregon</state>

       <state>Nevada</state>

   </west>

</states>

在浏览器上会生成具有两个按钮的HTML页面。点击第一个按钮，将从服务器加载XML文档，然后在警告框中显示列于文档中的所有州。点击第二个按钮也会从服务器加载XML文档，不过只在警告框中显示北部地区的各个州（见图3-2）。
文件:Image005.gif

取自“https://www.zzbaike.com/wiki/index.php?title=Ajax-_与服务器通信1&oldid=21922”