📄 掌握 ajax，第 7 部分 在请求和响应中使用 xml.htm
字号:
src="掌握 Ajax，第 7 部分 在请求和响应中使用 XML.files/u_bold.gif"
width=16 border=0><BR></TD>
<TD vAlign=top align=right><A class=fbox
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro7.html#main"><B>回页首</B></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR>
<P><A name=3><SPAN class=atitle>从客户机到服务器的 XML</SPAN></A></P>
<P>我们来看看将 XML
作为从客户机向服务器发送数据的格式。我们首先讨论技术上的实现，然后花些时间分析什么时候适合什么时候不适合使用它。</P>
<P><A name=3.1><SPAN class=smalltitle>发送名/值对</SPAN></A></P>
<P>在您编写的 90% Web
应用程序中，最终都会使用名/值对发送到服务器。比方说，如果用户在网页表单中输入姓名和地址，可能希望数据采用下列形式：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>firstName=Larry
lastName=Gullahorn
street=9018 Heatherhorn Drive
city=Rowlett
state=Texas
zipCode=75080
</PRE></TD></TR></TBODY></TABLE><BR>
<P>如果使用普通文本把这些数据发送到服务器，可以使用<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro7.html#c1">清单
1</A> 所示的代码。类似于本系列第一期文章中使用的那个例子。请参阅<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro7.html#resources">参考资料</A>。</P><BR><A
name=c1><B>清单 1. 使用普通文本发送名/值对</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
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);
}
</PRE></TD></TR></TBODY></TABLE><BR>
<P><A name=3.2><SPAN class=smalltitle>将名/值对转化成 XML</SPAN></A></P>
<P>如果希望这样使用 XML 作为数据格式，首先要做的是找到一种基本 XML 格式来存储数据。显然，名/值对可以全部转化成 XML
元素，以其中的名称作为元素名，值作为元素的内容：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode><firstName>Larry</firstName>
<lastName>Gullahorn</lastName>
<street>9018 Heatherhorn Drive</street>
<city>Rowlett</city>
<state>Texas</state>
<zipCode>75080</zipCode>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>当然，XML 要求有一个根元素；如果使用<I>文档片段</I>（XML 文档的一部分）的话则需要一个封闭元素。因此可能需要将上述
XML 转化成下面的形式：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode><address>
<firstName>Larry</firstName>
<lastName>Gullahorn</lastName>
<street>9018 Heatherhorn Drive</street>
<city>Rowlett</city>
<state>Texas</state>
<zipCode>75080</zipCode>
</address>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>现在基本上可以准备在 Web 客户机上创建这种结构并发送到服务器了。</P>
<P><A name=3.3><SPAN class=smalltitle>通信，口头上的</SPAN></A></P>
<P>在网络上传输 XML 之前，需要保证服务器以及发送数据的脚本能够接受
XML。现在对很多人来说这么强调似乎有点多余，认为这是理所当然的，但是很多新手往往认为只要通过网络发送
XML，就能够被正确地接收和解释。</P>
<P>实际上，需要两个步骤来保证发送的 XML 的数据能够被正确地接收：</P>
<OL>
<LI>保证向其发送 XML 的脚本能够接受 XML 数据格式。
<LI>保证脚本认可发送数据所采用的特定 XML 格式和结构。 </LI></OL>
<P>这两方面都可能要求您进行人际沟通，必须明确地告知对方！严格地说，如果确实需要发送 XML
数据，多数脚本作者都会帮助您，因此寻找能够接受 XML
的脚本应该不难。但是，仍然需要保证格式是脚本所希望的格式。比方说，假设服务器接受下列格式的数据：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode><profile>
<firstName>Larry</firstName>
<lastName>Gullahorn</lastName>
<street>9018 Heatherhorn Drive</street>
<city>Rowlett</city>
<state>Texas</state>
<zip-code>75080</zip-code>
</profile>
</PRE></TD></TR></TBODY></TABLE><BR>
<P>看起来和上面的 XML 类似，只有两点不同：</P>
<OL>
<LI>来自客户机的 XML 封装在 <CODE>address</CODE> 元素，但是服务器要求数据封装在
<CODE>profile</CODE> 元素中。
<LI>来自客户机的 XML 使用了 <CODE>zipCode</CODE> 元素，而服务器希望邮政编码放在
<CODE>zip-code</CODE> 元素中。 </LI></OL>
<P>从大的层面上来说，这些小问题仅仅是服务器接收和处理数据的区别，但是服务器会彻底失败，在网页上（可能向其用户）显示意义含糊的错误消息。因此必须明确服务器的期望的格式，并把要发送的数据塞进那种格式。然后，只有在这时才会涉及到从客户机向服务器发送
XML 数据的真正的技术问题。</P>
<P><A name=3.4><SPAN class=smalltitle>向服务器发送 XML</SPAN></A></P>
<P>当向服务器发送 XML 的时候，更多的代码用于获取数据和包装成 XML，而不是真正的传输数据。实际上，只要准备好发送到服务器的
XML 字符串，发送工作就和普通文本一样了，如<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro7.html#c2">清单
2</A> 所示。</P><BR><A name=c2><B>清单 2. 用 XML 发送名/值对</B></A><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>
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
<SPAN class=boldcode> var url = "/scripts/saveAddress.php";</SPAN>
// Open a connection to the server
xmlHttp.open(<SPAN class=boldcode>"POST"</SPAN>, 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
<SPAN class=boldcode>xmlHttp.send(xmlString);</SPAN>
}
</PRE></TD></TR></TBODY></TABLE><BR>
<P>大部分代码都很简单，只有少数地方值得提一下。首先，请求中的数据必须手工格式化为
XML。阅读了三篇关于使用文档对象类型的文章之后，再来讨论它是不是很简单了？虽然不禁止在 JavaScript 中使用 DOM 创建
XML 文档，但是在通过 GET 或 POST 请求发送到网络上之前必须将 DOM
对象转化成文本。因此使用常规字符串操作来格式化数据更简单一些。当然，这样很容易出现错误和误输入，因此在编写处理 XML
的代码时必须非常小心。</P>
<P>建立 XML 之后，按照和发送文本基本相同的方式打开连接。对于 XML 最好使用 POST 请求，因为有些浏览器限制了 GET
请求字符串的长度，而 XML 可能很长，可以看到<A
href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro7.html#c2">清单
2</A> 中把 GET 改成了 POST 方法。此外，XML 通过 <CODE>send()</CODE> 方法发送，而不是附加在请求
URL 最后的参数。这些都是非常细微的区别，很容易修改。</P>
<P>但是必须编写一行新的代码：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>xmlHttp.setRequestHeader("Content-Type", "text/xml");
</PRE></TD></TR></TBODY></TABLE><BR>
<P>看起来很难理解，它只不过是告诉服务器要发送的是 XML 而不是一般的名/值对。无论哪种情况，发送的数据都是文本，但这里使用
<CODE>text/xml</CODE> 或者 XML 作为普通文本发送。如果使用名/值对，对应的行应该是：</P>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=code-outline><PRE class=displaycode>xmlHttp.setRequestHeader("Content-Type", "text/plain");
</PRE></TD></TR></TBODY></TABLE><BR>
<P>如果忘记告诉服务器发送的是 XML，就会出现问题，因此不要忘掉这一步骤。</P>
<P>完成这些之后，剩下的就是调用 <CODE>send()</CODE> 并传入 XML 字符串了。服务器将收到您的 XML
请求，并（假设已经做好了准备工作）接受 XML，解释它，然后返回响应。实际上要做的只有这么多 —— XML
请求只需要稍微修改代码。</P><BR>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -