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做出什么样的相应,在下篇文章中将介绍。
分享到:
相关推荐
Ajax\掌握 Ajax第 7 部分-在请求和响应中使用 XML
掌握 Ajax第 8 部分-在请求和响应中使用 XML.pdf
在本系列前面的文章中,我们使用普通文本和名/值参数发送数据,但XML也是一种可行的格式。本文将介绍如何来这样做。但最重要的是,我将讨论为何可以使用 XML作为请求格式,以及为何在多数情况下不应该使用它。
掌握 Ajax第 1 部分-Ajax 简介 掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出...掌握 Ajax第 7 部分-在请求和响应中使用 XML 掌握 Ajax第 10 部分--使用 JSON 进行数据传输 掌握 Ajax第 11 部分--服务器端的 JSON
XMLHttpRequest是Ajax应用程序中使用的基本对象。看起来它似乎是为通过HTTP请求发送XML或者以某种XML格式发出HTTP请求而设计的,但实际上它要做的只不过是为客户机代码(在网页中通常是JavaScript)提供一种发送HTTP...
在Ajax应用程序中,使用XML作为发送数据的格式的理由很少,但使服务器向 客户机回发XML的理由很多。因此,您在上一篇文章中学到的关于XML的知识最终将在这篇文章中体现出某些价值。这篇文章主要探讨在大多数情况下...
无论考虑转向 XHTML 的网页设计人员、使用 JavaScript 的 Web 程序员、使用部署描述文件和数据绑定的服务器端程序员,还是研究基于 XML 的数据库的后端开发人员,都在使用这种可扩展标记语言。因此,XML 被认为是 ...
第 1 部分: Ajax 入门...第 7 部分: 在请求和响应中使用 XML 80 第 8 部分: 在请求和响应中使用 XML 87 第 9 部分: Web 2.0 用户界面技术 95 第 10 部分: 使用 JSON 进行数据传输 100 第 11 部分: 服务器端的 JSON 105
你要在DTD中定义一个元素,然后在XML文档中使用。元素的定义语法为:<!ELEMENT DESCRIPTION (#PCDATA, DEFINITION)*> 说明: "<!ELEMENT" 是元素的声明,说明你要定义的是一个元素; 声明后面的"DESCRIPTION",...
在本文中,您将看到服务器如何在请求响应中发送XML。 现在如果不使用XML就不能进行任何有意义的编程。无论考虑转向XHTML的网页设计人员、使用JavaScript的Web程序员、使用部署描述文件和数据绑定的服务器端程序员,...
第 7 部分: 在请求和响应中使用 XML 第 8 部分:在请求和响应中使用 XML 第 9 部分: 使用 Google Ajax Search API 第 10 部分: 使用 JSON 进行数据传输 第 11 部分:将 Ajax 带入 Eclipse 的 Ajax Toolkit ...
01_Ajax基础;02_使用Ajax发送异步请求;03_在请求和响应中使用XML;04_使用JSON进行数据传输;对XML文档进行分析
内容简要给大家说明一下:Ajax简介、使用Javascript和Ajax发出异步请求、Ajax中的高级请求响应、利用Dom进行Web响应、操作dom、建立基于Dom的Web应用程序、在请求和响应中使用XML、使用Json进行数据传输、...
Ajax-faux-jax.zip,不再维护:拦截并响应浏览器(ajax)和node.js(http(s)模块)中的请求,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,...
什么是Ajax?Ajax如何发送请求? ... Ajax 是 Asynchronous Javascript And XML 的缩写,它是异步的 Javascript 和 XML技术,是由 Javascript 、 XML 、DOM、CSS等多种已有技术合成的一种...封装Ajax请求 —— Promise ?
Ajax的学习资料 Ajax基础 DOM基础 基于DOM的Web应用程序示例 使用Ajax发送异步请求 在请求和响应中使用XML 使用JSON进行数据传输
AJAX asynchronouse javascript and xml 异步 javascript 和 xml ---------------------------------------------- B/S 发展历程------> web1.0 特点: 网站的内容 --- 网站的拥有者提供 网站的使用者所做的...
AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。 国 [使用ajax 构建应用程序] 使用ajax 构建应用程序 内翻译常为“阿贾克斯”和阿贾克斯足球队同音。Web应用的交互如Flickr,Backpack和...