Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写.
下面是 Ajax 应用程序所用到的基本技术：
• HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
• JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。
• DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
• 文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。
从上面可以看出,Ajax不是什么新的技术,而是几个老的技术通过新的方法结合起来,从而实现了新的效果!很多事物都是多元化的,可以说Ajax是一个新技术，也可以说Ajax是一个新的思路，一个新的架构！
Ajax的基本工作原理及流程：
在一般的 Web 应用程序中，用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本（通常是 PHP 或 Java，也可能是 CGI 进程或者类似的东西），脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的 HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。
Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript 代码而不是 直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。
然后，服务器将数据返回 JavaScript 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是 XMLHttpRequest 的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。
XMLHttpRequest 对象：
open()：建立到服务器的新请求。
send()：向服务器发送请求.
abort()：退出当前请求。
readyState：提供当前 HTML 的就绪状态。
responseText：服务器返回的请求响应文本。
由于前两年的浏览器大战，使得各种浏览器获得 XMLHttpRequest 对象采用的方法有所不同。
支持多种浏览器的方式创建 XMLHttpRequest 对象

var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}

这段代码的核心分为三步：
1. 建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。
2. 尝试在 Microsoft 浏览器中创建该对象：
尝试使用 Msxml2.XMLHTTP 对象创建它。
如果失败，再尝试 Microsoft.XMLHTTP 对象。
3. 如果仍然没有建立 xmlHttp，则以非 Microsoft 的方式创建该对象。
最后，xmlHttp 应该引用一个有效的 XMLHttpRequest 对象，无论运行什么样的浏览器。
Ajax中的请求/响应
发出请求：Ajax 应用程序中基本相同的流程：
1. 从 Web 表单中获取需要的数据。
2. 建立要连接的 URL。
3. 打开到服务器的连接。
4. 设置服务器在完成后要运行的函数。
5. 发送请求。

function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Only go on if there are values for both fields
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Build the URL to connect to
var url = "/scripts/getZipCode.aspx?city=" + escape(city) + "&state=" + escape(state);
// Open a connection to the server
xmlHttp.open("GET", url, true);
// Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = updatePage;
// Send the request
xmlHttp.send(null);
}

处理响应：
readyState可能返回的值：
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
必须知道两点：
1.什么也不要做，直到 xmlHttp.readyState 属性的值等于 4。
2.服务器将把响应填充到 xmlHttp.responseText 属性中。

响应函数：

function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}

开始的代码使用基本 JavaScript 代码获取几个表单字段的值。然后设置一个 asp 脚本作为链接的目标。要注意脚本 URL 的指定方式，city 和 state（来自表单）使用简单的 GET 参数附加在 URL 之后。
然后打开一个连接，这是您第一次看到使用 XMLHttpRequest。其中指定了连接方法（GET）和要连接的 URL。最后一个参数如果设为 true，那么将请求一个异步连接（这就是 Ajax 的由来）。如果使用 false，那么代码发出请求后将等待服务器返回的响应。如果设为 true，当服务器在后台处理请求的时候用户仍然可以使用表单（甚至调用其他 JavaScript 方法）。
xmlHttp（要记住，这是 XMLHttpRequest 对象实例）的 onreadystatechange 属性可以告诉服务器在运行完成 后（可能要用五分钟或者五个小时）做什么。因为代码没有等待服务器，必须让服务器知道怎么做以便您能作出响应。在这个示例中，如果服务器处理完了请求，一个特殊的名为 updatePage() 的方法将被触发。
最后，使用值 null 调用 send()。因为已经在请求 URL 中添加了要发送给服务器的数据（city 和 state），所以请求中不需要发送任何数据。这样就发出了请求，服务器按照您的要求工作。
简单总结的Ajax的工作流程：
javascript获得要向服务器段传递的参数或变量，然后利用创建的XMLHttpRequest 对象发送个服务器段，如果服务器端接受数据并返回数据，则保存在responseText 属性中，最后通过javascript修改DOM，从而实现在客户端无刷新的修改数据。
参考资料：http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html

此文很基础，但是很底层。
1. 简单 HTML 页面
<html>
<head>
<title>Trees, trees, everywhere</title>
</head>
<body>
<h1>Trees, trees, everywhere</h1>
<p>Welcome to a <em>really</em> boring page.</p>
<div>
Come again soon.
<img src="come-again.gif" />
</div>
</body>
</html>

1 的树视图

对象的值
既然了解了一些基本的术语，现在应该关注一下其中包含元素名称和文本的小矩形了（图 1）。每个矩形是一个对象；浏览器在其中解决一些文本问题。通过使用对象来表示 HTML 文档的每一部分，可以很容易地更改组织、应用样式、允许 JavaScript 访问文档，等等。
对象类型和属性
标记的每个可能类型都有自己的对象类型。例如，HTML 中的元素用 Element 对象类型表示。文档中的文本用 Text 类型表示，属性用 Attribute 类型表示，以此类推。
所以 Web 浏览器不仅可以使用对象模型来表示文档（从而避免了处理静态文本），还可以用对象类型立即辨别出某事物是什么。HTML 文档被解析并转换为对象集合，如 图 1 所示，然后尖括号和转义序列（例如，使用 < 表示 <，使用 > 表示 >）等事物不再是问题了。这就使得浏览器的工作（至少在解析输入 HTML 之后）变得更容易。弄清某事物究竟是元素还是属性并确定如何处理该类型的对象，这些操作都十分简单了。
通过使用对象，Web 浏览器可以更改这些对象的属性。例如，每个元素对象具有一个父元素和一系列子元素。所以添加新的子元素或文本只需要向元素的子元素列表中添加一个新的子元素。这些对象还具有 style 属性，所以快速更改元素或文本段的样式非常简单。例如，要使用 JavaScript 更改 div 的高度，如下所示：
someDiv.style.height = "300px";

换句话说，Web 浏览器使用对象属性可以非常容易地更改树的外观和结构。将之比作浏览器在内部将页面表示为文本时必须进行的复杂事情，每次更改属性或结构都需要浏览器重新编写静态文件、重新解析并在屏幕上重新显示。有了对象，所有这一切都解决了。
DOM 简介
到目前为止，您已经知道浏览器将 Web 页面转换为对象表示，可能您甚至会猜想，对象表示是 DOM 树。DOM 表示 Document Object Model，是一个规范，可从 World Wide Web Consortium (W3C) 获得（您可以参阅 参考资料 中的一些 DOM 相关链接）。
但更重要的是，DOM 定义了对象的类型和属性，从而允许浏览器表示标记。（本系列下一篇文章将专门讲述在 JavaScript 和 Ajax 代码中使用 DOM 的规范。）
文档对象
首先，需要访问对象模型本身。这非常容易；要在运行于 Web 页面上的任何 JavaScript 代码中使用内置 document 变量，可以编写如下代码：
var domTree = document;

当然，该代码本身没什么用，但它演示了每个 Web 浏览器使得 document 对象可用于 JavaScript 代码，并演示了对象表示标记的完整树（图 1）。
每项都是一个节点
显然，document 对象很重要，但这只是开始。在进一步深入之前，需要学习另一个术语：节点。您已经知道标记的每个部分都由一个对象表示，但它不只是一个任意的对象，它是特定类型的对象，一个 DOM 节点。更特定的类型，比如文本、元素和属性，都继承自这个基本的节点类型。所以可以有文本节点、元素节点和属性节点。
如果已经有很多 JavaScript 编程经验，那您可能已经在使用 DOM 代码了。如果到目前为止您一直在跟踪本 Ajax 系列，那么现在您一定 使用 DOM 代码有一段时间了。例如，代码行 var number = document.getElementById("phone").value; 使用 DOM 查找特定元素，然后检索该元素的值（在本例中是一个表单字段）。所以即使您没有意识到这一点，但您每次将 document 键入 JavaScript 代码时都会使用 DOM。
详细解释已经学过的术语，DOM 树是对象的树，但更具体地说，它是节点 对象的树。在 Ajax 应用程序中或任何其他 JavaScript 中，可以使用这些节点产生下列效果，比如移除元素及其内容，突出显示特定文本，或添加新图像元素。因为都发生在客户端（运行在 Web 浏览器中的代码），所以这些效果立即发生，而不与服务器通信。最终结果通常是应用程序感觉起来响应更快，因为当请求转向服务器时以及解释响应时，Web 页面上的内容更改不会出现长时间的停顿。
在多数编程语言中，需要学习每种节点类型的实际对象名称，学习可用的属性，并弄清楚类型和强制转换；但在 JavaScript 中这都不是必需的。您可以只创建一个变量，并为它分配您希望的对象（正如您已经看到的）：
var domTree = document;
var phoneNumberElement = document.getElementById("phone");
var phoneNumber = phoneNumberElement.value;

没有类型，JavaScript 根据需要创建变量并为其分配正确的类型。这也是简单的JS获得DOM元素。

1 Ajax学习---在请求和响应中使用 XML(1)
XML 是编程中最常用的数据格式之一，对于异步应用程序中的服务器响应能够带来切实的好处。在Ajax中也不例外。
Ajax 应用程序就表现在其核心对象所选的名称 —— XMLHttpRequest，这个名称不是很好，因为它并没有反映技术上的实际情况。换句话说，多数人之所以认为 XML 是 Ajax 的核心组成部分，仅仅是因为他们想当然地以为 XMLHttpRequest 对象在任何时候都使用 XML。但实情并非如此，本文第一部分给出了原因。实际上，您将看到在多数 Ajax 应用程序中 XML 很少出现。 XML 确实有应用在 Ajax 中，而且 XMLHttpRequest 也支持这种用法。也确实没有什么能阻挡您向服务器发送 XML。
XML在Ajax中的使用
在异步应用程序中 XML 有两种基本的用法：
1.以 XML 格式从网页向服务器发送请求
2.以 XML 格式在网页中从服务器接收请求
其中第一种用法，即用 XML 发送请求，需要将请求的格式设置为 XML，可以使用 API 来完成，也可以与文本连成字符串，然后将结果发送到服务器。按照这种思路，主要的任务就是通过既符合 XML 规则又能被服务器理解的方式构造请求。因此这里的关键实际上是 XML 格式，得到需要发送的数据之后，只需要用 XML 语法将其包装起来。本文后面讨论 XML 在 Ajax 应用程序中的这种用法。
第二种用法，即用 XML 接收请求，需要从服务器上接收响应，然后从 XML 提取数据（同样，可以用 API 或者采用蛮力方法）。这种情况下，关键在于来自服务器的数据，而您恰好需要从 XML 中提取这些数据以便使用。
客户机到服务器的 XML
在您编写的 90% Web 应用程序中，最终都会使用名/值对发送到服务器。比方说，如果用户在网页表单中输入姓名和地址，可能希望数据采用下列形式：
firstName=Larry
lastName=Gullahorn
street=9018 Heatherhorn Drive
city=Rowlett
state=Texas
zipCode=75080

清单 1. 使用普通文本发送名/值对
function callServer() {
// Get the city and state from the Web form
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var street = document.getElementById("street").value;
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
var zipCode = document.getElementById("zipCode").value;
// Build the URL to connect to
var url = "/scripts/saveAddress.php?firstName=" + escape(firstName) +
"&lastName=" + escape(lastName) + "&street=" + escape(street) +
"&city=" + escape(city) + "&state=" + escape(state) +
"&zipCode=" + escape(zipCode);
// Open a connection to the server
xmlHttp.open("GET", url, true);
// Set up a function for the server to run when it's done
xmlHttp.onreadystatechange = confirmUpdate;
// Send the request
xmlHttp.send(null);
}

将名/值对转化成 XML
如果希望这样使用 XML 作为数据格式，首先要做的是找到一种基本 XML 格式来存储数据。显然，名/值对可以全部转化成 XML 元素，以其中的名称作为元素名，值作为元素的内容：
<firstName>Larry</firstName>
<lastName>Gullahorn</lastName>
<street>9018 Heatherhorn Drive</street>
<city>Rowlett</city>
<state>Texas</state>
<zipCode>75080</zipCode>

当然，XML 要求有一个根元素；如果使用文档片段（XML 文档的一部分）的话则需要一个封闭元素。因此可能需要将上述 XML 转化成下面的形式：
<address>
<firstName>Larry</firstName>
<lastName>Gullahorn</lastName>
<street>9018 Heatherhorn Drive</street>
<city>Rowlett</city>
<state>Texas</state>
<zipCode>75080</zipCode>
</address>

现在基本上可以准备在 Web 客户机上创建这种结构并发送到服务器了。
通信：
在网络上传输 XML 之前，需要保证服务器以及发送数据的脚本能够接受 XML。现在对很多人来说这么强调似乎有点多余，认为这是理所当然的，但是很多新手往往认为只要通过网络发送 XML，就能够被正确地接收和解释。实际上，需要两个步骤来保证发送的 XML 的数据能够被正确地接收：
1.保证向其发送 XML 的脚本能够接受 XML 数据格式。
2.保证脚本认可发送数据所采用的特定 XML 格式和结构。
这两方面都可能要求您进行人际沟通，必须明确地告知对方！严格地说，如果确实需要发送 XML 数据，多数脚本作者都会帮助您，因此寻找能够接受 XML 的脚本应该不难。但是，仍然需要保证格式是脚本所希望的格式。比方说，假设服务器接受下列格式的数据：
<profile>
<firstName>Larry</firstName>
<lastName>Gullahorn</lastName>
<street>9018 Heatherhorn Drive</street>
<city>Rowlett</city>
<state>Texas</state>
<zip-code>75080</zip-code>
</profile>

看起来和上面的 XML 类似，只有两点不同：
1. 来自客户机的 XML 封装在 address 元素，但是服务器要求数据封装在 profile 元素中。
2. 来自客户机的 XML 使用了 zipCode 元素，而服务器希望邮政编码放在 zip-code 元素中。
从大的层面上来说，这些小问题仅仅是服务器接收和处理数据的区别，但是服务器会彻底失败，在网页上（可能向其用户）显示意义含糊的错误消息。因此必须明确服务器的期望的格式，并把要发送的数据塞进那种格式。然后，只有在这时才会涉及到从客户机向服务器发送 XML 数据的真正的技术问题。
向服务器发送 XML
当向服务器发送 XML 的时候，更多的代码用于获取数据和包装成 XML，而不是真正的传输数据。实际上，只要准备好发送到服务器的 XML 字符串，发送工作就和普通文本一样。用 XML 发送名/值对：
function callServer() {
// Get the city and state from the Web form
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var street = document.getElementById("street").value;
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
var zipCode = document.getElementById("zipCode").value;
var xmlString = "<profile>" +
" <firstName>" + escape(firstName) + "</firstName>" +
" <lastName>" + escape(lastName) + "</lastName>" +
" <street>" + escape(street) + "</street>" +
" <city>" + escape(city) + "</city>" +
" <state>" + escape(state) + "</state>" +
" <zip-code>" + escape(zipCode) + "</zip-code>" +
"</profile>";
// Build the URL to connect to
var url = "/scripts/saveAddress.aspx";
// Open a connection to the server
xmlHttp.open("POST", url, true);
// Tell the server you're sending it XML
xmlHttp.setRequestHeader("Content-Type", "text/xml");
// Set up a function for the server to run when it's done
xmlHttp.onreadystatechange = confirmUpdate;
// Send the request
xmlHttp.send(xmlString);
}

大部分代码都很简单，只有少数地方值得提一下。首先，请求中的数据必须手工格式化为 XML。阅读了三篇关于使用文档对象类型的文章之后，再来讨论它是不是很简单了？虽然不禁止在 JavaScript 中使用 DOM 创建 XML 文档，但是在通过 GET 或 POST 请求发送到网络上之前必须将 DOM 对象转化成文本。因此使用常规字符串操作来格式化数据更简单一些。当然，这样很容易出现错误和误输入，因此在编写处理 XML 的代码时必须非常小心。
建立 XML 之后，按照和发送文本基本相同的方式打开连接。对于 XML 最好使用 POST 请求，因为有些浏览器限制了 GET 请求字符串的长度，而 XML 可能很长，可以看到代码段中把 GET 改成了 POST 方法。此外，XML 通过 send() 方法发送，而不是附加在请求 URL 最后的参数。这些都是非常细微的区别，很容易修改。
但是必须编写一行新的代码：
xmlHttp.setRequestHeader("Content-Type", "text/xml");

看起来很难理解，它只不过是告诉服务器要发送的是 XML 而不是一般的名/值对。无论哪种情况，发送的数据都是文本，但这里使用 text/xml 或者 XML 作为普通文本发送。如果使用名/值对，对应的行应该是：
xmlHttp.setRequestHeader("Content-Type", "text/plain");

如果忘记告诉服务器发送的是 XML，就会出现问题，因此不要忘掉这一步骤。
完成这些之后，剩下的就是调用 send() 并传入 XML 字符串了。服务器将收到您的 XML 请求，并（假设已经做好了准备工作）接受 XML，解释它，然后返回响应。实际上要做的只有这么多 —— XML 请求只需要稍微修改代码。
服务器端接受到XML做出什么样的相应，在下篇文章中将介绍。

2 Ajax学习---在请求和响应中使用 XML(2)
----前言
在 Ajax 应用程序中，使用 XML 作为发送数据的格式的理由很少，但使服务器向 客户机回发 XML 的理由很多。
理由：(1)客户机以名称/值对发送请求(2)服务器无法（以一种标准方式）发送名称/值对
在大多数情况下，客户机不需要使用 XML，因为他们会使用名称/值对发送请求。因此，您可能会发送一个这样的名称：name=jennifer。只需简单地在连续的名称/值对之间添加一个 “与” 符号（&），即可将其放在一起，就像这样：name=jennifer&job=president。使用简单的文本和这些名称值对，客户机即可轻松向服务器请求多个值。很少需要用到 XML 提供的额外结构（及其带来的额外开销）。
实际上，需要向服务器发送 XML 的所有理由都差不多可以归入以下两个基本的类别中：
服务器仅 接受 XML 请求。在这类情况下，您别无选择。上一期文章中介绍的基础知识应已使您掌握了发送此类请求所必需的工具。
您正在调用一个仅接受 XML 或 SOAP 请求的远程 API。这实际上就是上一种情况的特例，但值得单独拿出来提一下。如果您希望在一个异步请求中使用来自 Google 或 Amazon 的 API，就会有一些特殊的考虑事项。
如果服务器使用字符串 name=jennifer&job=president 应答一个应用程序，客户机没有任何标准化的简便方法来将每个对拆分成名称和值。您必须手动解析所返回的数据。如果服务器返回一个由名称/值对构成的响应，这样的响应的解释难度与使用分号、竖线或其他任何非标准格式化字符相同。对于您来说，这就意味没有任何简单的方法在响应中使用纯文本使客户机以一种标准的方法获取并解释响应，至少在响应包含多个值时是如此。

----使用XML：
意识到没有任何标准的方法可以使服务器使用名称/值对响应客户机之后，使用 XML 的原因也就显而易见了。向客户机发送数据时，名称/值对是非常好的选择，因为服务器和服务器端语言可以轻松解释名称/值对；向客户机返回数据时使用 XML 也是如此。有几种方法可从服务器获得 XML 响应，并使用较为标准的代码提取数据，在客户机中使用这些数据。
清单 1.服务器响应（XML 格式）
<ratings>
<show>
<title>Alias</title>
<rating>6.5</rating>
</show>
<show>
<title>Lost</title>
<rating>14.2</rating>
</show>
<show>
<title>Six Degrees</title>
<rating>9.1</rating>
</show>
</ratings>

----将 XML 作为纯文本处理
处理 XML 的最简单的选择（至少就学习新的编程技术而言），就是用与处理服务器返回的其他文本片段相同的方法来处理它。换言之，基本上就是忽略数据格式，只关注服务器的响应。
在这种情况下，您要使用请求对象的 responseText 属性，就像在服务器向您发送非 XML 响应时一样。
清单 2. 将 XML 作为普通服务器响应处理
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;// response has the XML response from the server
alert(response);
}
}
}
在这个代码片段中，updatePage() 是回调方法，request 是 XMLHttpRequest 对象。最终，您将得到把所有一切串联在一起的 XML 响应，位于 response 变量之中。
清单 3.response 变量的值：
<ratings><show><title>Alias</title><rating>6.5</rating>
</show><show><title>Lost</title><rating>14.2</rating></show><show>
<title>Six Degrees</title><rating>9.1</rating></show></ratings>
在这里，您可以使用 JavaScript split 函数来拆分此数据，并通过基本的字符串操作来获得元素的名称和值。毫无疑问，这是个令人头疼的过程，它无视于您花费了大量时间来阅读前几期文章中 DOM（Document Object Model）相关内容这一事实。因此，我要强调，您应该牢记：利用 responseText，可以轻松使用和输出服务器的 XML 响应，但我不会为您展示太多的代码，在能够使用 DOM 时，您不应选择这种方法来获得 XML 数据，下面您会看到这一点。
尽管可以 将服务器的 XML 格式的响应视同为其他任何文本响应来处理，但这样做没有很好的理由。使用 DOM 这种对 JavaScript 友好的 API 来操纵 XML。还有更好的事情，JavaScript 和 XMLHttpRequest 对象提供了一个属性，它能完美地获取服务器的 XML 响应，并且是以 DOM Document 对象的形式来获取它。
清单 4 给出了一个实例。这段代码与 清单 2 类似，但没有使用 responseText 属性，回调函数使用的是 responseXML 属性。该属性在 XMLHttpRequest 上可用，它以 DOM 文档的格式返回服务器的响应。
清单 4. 将 XML 当作 XML
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var xmlDoc = request.responseXML;// work with xmlDoc using the DOM
}
}
}
现在您有了一个 DOM Document，可以像处理其他任何 XML 一样处理它。例如，随后可能要获取所有 show 元素，如 清单 5 所示。
清单 5. 获取所有 show 元素
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var xmlDoc = request.responseXML;
var showElements = xmlDoc.getElementsByTagName("show");
}
}
}
如果您熟悉 DOM，从这儿开始，看起来就应该有几分熟悉了。您可以使用您所了解的全部 DOM 方法，轻松操纵从服务器处接收到的 XML。
当然，您也可以混用普通的 JavaScript 代码。例如，可以遍历所有 show 元素，如 清单 6 所示。
清单 6. 遍历所有 show 元素
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var xmlDoc = request.responseXML;
var showElements = xmlDoc.getElementsByTagName("show");
for (var x=0; x<showElements.length; x++) {
// We know that the first child of show is title, and the second is rating
var title = showElements[x].childNodes[0].value;
var rating = showElements[x].childNodes[1].value;
// Now do whatever you want with the show title and ratings
}
}
}
}
通过这段非常简单的代码，您正是将 XML 响应作为 XML 而不是无格式的纯文本进行了处理，还使用了一点 DOM 和简单的 JavaScript 来处理服务器响应。更重要的是，您使用了标准化的格式 —— XML，而不是以逗号分隔的值或以竖线分隔的名称/值对。换句话说，您将 XML 用在了最适合它的地方，避免了在不适合的地方使用它（比如说向服务器发送请求时）。

----解释 XML 的其他可选方法
除将 XML 作为无格式文本处理或使用 DOM 处理之外，还有一种非常流行的选择很重要，值得一提。那就是 JSON（JavaScript Object Notation），这是一种绑定在 JavaScript 内的自由文本格式。大体上，可以用 JSON 做的事，用 DOM 都可以完成，反之亦然；选择主要取决于偏好，当然也要为特定的应用程序选择正确的方法。就现在而言，您应坚持使用 DOM，在接收服务器响应的过程中熟悉 DOM。

C# Ajax 技术的更多相关文章

  1. 使用ajax技术实现txt弹出在页面上

    使用ajax技术实现txt弹出在页面上   使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...

  2. 《所用到的AJAX技术基础》

    来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...

  3. Ajax技术

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

  4. Ajax技术详解

    Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpR ...

  5. Java之Ajax技术

    ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...

  6. 在 PHP 中结合 Ajax 技术进行图片上传

    前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...

  7. ajax 技术和原理分析

    ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLH ...

  8. Ajax 技术一

    一.Ajax概述 1.历史起源 1998年,微软公司Outlook Web Access研发小组在当时的IE浏览器中集成了一种技术,可以在客户端无刷新的前提下向服务器端发送Http请求,这门技术称之为 ...

  9. AJAX技术的核心

    //创建一个XMLHttpRequest对象 ,利用此对象与服务器进行通信 是AJAX技术的核心 /** * 获取XmlHttpRequest对象 */ function getXMLHttpRequ ...

  10. 你真正的了解Ajax？Ajax技术简述

    Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的大多数技术都是在很多年以前就已经存在了,然而Ajax以一种崭新的方式来 ...

随机推荐

  1. bzoj1670【Usaco2006 Oct】Building the Moat 护城河的挖掘

    1670: [Usaco2006 Oct]Building the Moat护城河的挖掘 Time Limit: 3 Sec  Memory Limit: 64 MB Submit: 387  Sol ...

  2. objc_setAssociatedObject 使用(转)

    2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 ...

  3. [Android]生成heap dump文件(.hprof)

    Android生成heap dump文件(.hprof) 一个heap dump就是一个程序heap的快照,能够获知程序的哪些部分正在使用大部分的内存. 它保存为一种叫做HPROF的二进制格式.对于A ...

  4. hibernate查询之后用el表达式取值时遇到的问题

    String juniorApprovalUserHql = "select c.id,c.username from UserInfo c left join c.userRole whe ...

  5. VMware虚拟机 Ubuntu 实用技巧 （1） -- 安装VMware Tool

    1.用VM安装Ubuntu后屏幕太小? 2.Ubuntu中的文本与window中的文本不能互相复制黏贴? 如果你遇到以上问题,可以通过在VMware里安装“VMware Tool”插件解决!! 安装步 ...

  6. AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 最大的 ...

  7. Spring MVC复选框(多项)

    以下示例显示如何在使用Spring Web MVC框架的表单中使用多个复选框(Checkbox).首先使用Eclipse IDE来创建一个WEB工程,并按照以下步骤使用Spring Web Frame ...

  8. Linux & windows 应用服务器&Oracle数据库服务器备份

    Linux篇 tomcat启动加入开机启动项   vi /etc/rc.d/rc.local service iptables stop /usr/local/tomcat/bgyappserv01/ ...

  9. Linux 下 -bash: mysql: command not found解决办法

    -bash: mysql: command not found 1.vim ~/.bash_profile 最下面写 export PATH=$PATH:/usr/local/mysql/bin(你的 ...

  10. Android获取网络类型

    public static final String NETWORK_CLASS_UNKNOWN = "unknown"; public static final String N ...