XML是编程中最常用的数据格式之一，对于异步应用程序中的服务器响应能够带来切实的好处。在Ajax中也不例外。@H_301_3@
Ajax 应用程序就表现在其核心对象所选的名称 ——XMLHttpRequest，这个名称不是很好，因为它并没有反映技术上的实际情况。换句话说，多数人之所以认为 XML 是 Ajax 的核心组成部分，仅仅是因为他们想当然地以为XMLHttpRequest对象在任何时候都使用 XML。但实情并非如此，本文第一部分给出了原因。实际上，您将看到在多数 Ajax 应用程序中 XML 很少出现。 XML 确实有应用在 Ajax 中，而且XMLHttpRequest也支持这种用法。也确实没有什么能阻挡您向服务器发送 XML。@H_301_3@
XML在Ajax中的使用@H_301_3@
在异步应用程序中 XML 有两种基本的用法：@H_301_3@
1.以 XML 格式从网页向服务器发送请求@H_301_3@
2.以 XML 格式在网页中从服务器接收请求@H_301_3@
其中第一种用法，即用 XML 发送请求，需要将请求的格式设置为 XML，可以使用 API 来完成，也可以与文本连成字符串，然后将结果发送到服务器。按照这种思路，主要的任务就是通过既符合 XML 规则又能被服务器理解的方式构造请求。因此这里的关键实际上是 XML 格式，得到需要发送的数据之后，只需要用 XML 语法将其包装起来。本文后面讨论 XML 在 Ajax 应用程序中的这种用法。@H_301_3@
第二种用法，即用 XML 接收请求，需要从服务器上接收响应，然后从 XML 提取数据（同样，可以用 API 或者采用蛮力方法）。这种情况下，关键在于来自服务器的数据，而您恰好需要从 XML 中提取这些数据以便使用。@H_301_3@
客户机到服务器的 XML@H_301_3@
在您编写的 90% Web 应用程序中，最终都会使用名/值对发送到服务器。比方说，如果用户在网页表单中输入姓名和地址，可能希望数据采用下列形式：@H_301_3@
firstName=Larry
lastName=Gullahorn
street=9018 Heatherhorn Drive
city=Rowlett
state=Texas
zipCode=75080
|
@H_301_3@
清单 1. 使用普通文本发送名/值对
@H_301_3@
<div class="dp-Highlighter bg_html" style="font-family: Consolas,'Courier New',Courier,mono,serif; width: 938.515625px; overflow: hidden; padding-top: 1px; border-color: rgb(204,204,204); margin: 18px 0px !important; background-color: rgb(231,229,220);"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108,226,108); background-color: rgb(248,248,248);"><strong>[html]</strong> <a target=_blank href="http://blog.csdn.net/u011225629/article/details/48009001#" class="ViewSource" title="view plain" style="text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; color: rgb(12,207); display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_plain.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">view plain</a><a target=_blank href="http://blog.csdn.net/u011225629/article/details/48009001#" class="CopyToClipboard" title="copy" style="text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; color: rgb(12,207); display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_copy.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">copy</a><div style="position: absolute; left: 510px; top: 1280px; width: 18px; height: 18px; z-index: 99;"></div></div></div><ol start="1" class="dp-xml" style="padding: 0px; border: none; color: rgb(92,92,92); margin: 0px 0px 1px 45px !important; background-color: rgb(255,255,255);"><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">functioncallServer(){</span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">//GetthecityandstatefromtheWebform</span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">var<span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">firstName</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">document</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">.getElementById("firstName").value;</span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">var<span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">lastName</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">document</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">.getElementById("lastName").value;</span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">var<span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">street</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">document</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">.getElementById("street").value;</span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">var<span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">city</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">document</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">.getElementById("city").value;</span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">var<span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">state</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">document</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">.getElementById("state").value;</span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">var<span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">zipCode</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">document</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">.getElementById("zipCode").value;</span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">//BuildtheURLtoconnectto</span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">var<span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">url</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"/scripts/saveAddress.PHP?firstName="</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">+escape(firstName)+</span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">"&<span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">lastName</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"+escape(lastName)+"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">&</span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">street</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">="+escape(street)+</span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">"&<span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">city</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"+escape(city)+"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">&</span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">state</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">="+escape(state)+</span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">"&<span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">zipCode</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">="+escape(zipCode);</span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">//Openaconnectiontotheserver</span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">xmlHttp.open("GET",url,true);</span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">//Setupafunctionfortheservertorunwhenit'sdone</span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">xmlHttp.onreadystatechange</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">confirmUpdate</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">;</span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">//Sendtherequest</span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">xmlHttp.send(null);</span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108,248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">}</span></li></ol></div> |
@H_301_3@
将名/值对转化成 XML@H_301_3@
如果希望这样使用 XML 作为数据格式，首先要做的是找到一种基本 XML 格式来存储数据。显然，名/值对可以全部转化成 XML 元素，以其中的名称作为元素名，值作为元素的内容：@H_301_3@
当然，XML 要求有一个根元素；如果使用文档片段（XML 文档的一部分）的话则需要一个封闭元素。因此可能需要将上述 XML 转化成下面的形式：@H_301_3@
@H_301_3@
现在基本上可以准备在 Web 客户机上创建这种结构并发送到服务器了。@H_301_3@
通信：@H_301_3@
在网络上传输 XML 之前，需要保证服务器以及发送数据的脚本能够接受 XML。现在对很多人来说这么强调似乎有点多余，认为这是理所当然的，但是很多新手往往认为只要通过网络发送 XML，就能够被正确地接收和解释。实际上，需要两个步骤来保证发送的 XML 的数据能够被正确地接收：@H_301_3@
1.保证向其发送 XML 的脚本能够接受 XML 数据格式。@H_301_3@
2.保证脚本认可发送数据所采用的特定 XML 格式和结构。@H_301_3@
这两方面都可能要求您进行人际沟通，必须明确地告知对方！严格地说，如果确实需要发送 XML 数据，多数脚本作者都会帮助您，因此寻找能够接受 XML 的脚本应该不难。但是，仍然需要保证格式是脚本所希望的格式。比方说，假设服务器接受下列格式的数据：@H_301_3@
大部分代码都很简单，只有少数地方值得提一下。首先，请求中的数据必须手工格式化为 XML。阅读了三篇关于使用文档对象类型的文章之后，再来讨论它是不是很简单了？虽然不禁止在 JavaScript 中使用 DOM 创建 XML 文档，但是在通过 GET 或 POST 请求发送到网络上之前必须将 DOM 对象转化成文本。因此使用常规字符串操作来格式化数据更简单一些。当然，这样很容易出现错误和误输入，因此在编写处理 XML 的代码时必须非常小心。@H_301_3@
建立 XML 之后，按照和发送文本基本相同的方式打开连接。对于 XML 最好使用 POST 请求，因为有些浏览器限制了 GET 请求字符串的长度，而 XML 可能很长，可以看到代码段中把 GET 改成了 POST 方法。此外，XML 通过send()方法发送，而不是附加在请求 URL 最后的参数。这些都是非常细微的区别，很容易修改。@H_301_3@
xmlHttp.setRequestHeader("Content-Type","text/xml");
|
看起来很难理解，它只不过是告诉服务器要发送的是 XML 而不是一般的名/值对。无论哪种情况，发送的数据都是文本，但这里使用text/xml或者 XML 作为普通文本发送。如果使用名/值对，对应的行应该是：@H_301_3@
如果忘记告诉服务器发送的是 XML，就会出现问题，因此不要忘掉这一步骤。@H_301_3@
完成这些之后，剩下的就是调用send()并传入 XML 字符串了。服务器将收到您的 XML 请求，并（假设已经做好了准备工作）接受 XML，解释它，然后返回响应。实际上要做的只有这么多 —— XML 请求只需要稍微修改代码。@H_301_3@ 原文链接：https://www.f2er.com/ajax/162940.html
