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 |
<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> |
如果希望这样使用 XML 作为数据格式，首先要做的是找到一种基本 XML 格式来存储数据。显然，名/值对可以全部转化成 XML 元素，以其中的名称作为元素名，值作为元素的内容：
当然，XML 要求有一个根元素；如果使用文档片段（XML 文档的一部分）的话则需要一个封闭元素。因此可能需要将上述 XML 转化成下面的形式：
现在基本上可以准备在 Web 客户机上创建这种结构并发送到服务器了。
通信：
在网络上传输 XML 之前，需要保证服务器以及发送数据的脚本能够接受 XML。现在对很多人来说这么强调似乎有点多余，认为这是理所当然的，但是很多新手往往认为只要通过网络发送 XML，就能够被正确地接收和解释。实际上，需要两个步骤来保证发送的 XML 的数据能够被正确地接收：
1.保证向其发送 XML 的脚本能够接受 XML 数据格式。
2.保证脚本认可发送数据所采用的特定 XML 格式和结构。
这两方面都可能要求您进行人际沟通，必须明确地告知对方！严格地说，如果确实需要发送 XML 数据，多数脚本作者都会帮助您，因此寻找能够接受 XML 的脚本应该不难。但是，仍然需要保证格式是脚本所希望的格式。比方说，假设服务器接受下列格式的数据：
大部分代码都很简单，只有少数地方值得提一下。首先，请求中的数据必须手工格式化为 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 作为普通文本发送。如果使用名/值对，对应的行应该是：
如果忘记告诉服务器发送的是 XML，就会出现问题，因此不要忘掉这一步骤。
完成这些之后，剩下的就是调用send()并传入 XML 字符串了。服务器将收到您的 XML 请求，并（假设已经做好了准备工作）接受 XML，解释它，然后返回响应。实际上要做的只有这么多 —— XML 请求只需要稍微修改代码。
原文地址：https://www.jb51.cc/ajax/162940.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
