龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

在Ajax开发中如何恰当使用XML(1)

时间:2013-03-06 14:58来源:未知 作者:admin 点击:
分享到:
现在如果不使用 XML 就不能进行任何有意义的编程。无论考虑转向 XHTML 的网页设计人员、使用 JavaScript 的 Web 程序员、使用部署描述文件和数据绑定的服务器端程序员,还是研究基于

现在如果不使用 XML 就不能进行任何有意义的编程。无论考虑转向 XHTML 的网页设计人员、使用 JavaScript 的 Web 程序员、使用部署描述文件和数据绑定的服务器端程序员,还是研究基于 XML 的数据库的后端开发人员,都在使用这种可扩展标记语言。因此,XML 被认为是 Ajax 底层的核心技术之一就不足为奇了。

但是,这种观点反映到 Ajax 应用程序就表现在其核心对象所选的名称―― XMLHttpRequest,这个名称不是很好,因为它并没有反映技术上的实际情况。换句话说,多数人之所以认为 XML 是 Ajax 的核心组成部分,仅仅是因为他们想当然地以为 XMLHttpRequest 对象在任何时候都使用 XML。但实情并非如此,本文第一部分给出了原因。实际上,您将看到在多数 Ajax 应用程序中 XML 很少出现。

XML 确实有应用在 Ajax 中,而且 XMLHttpRequest 也支持这种用法。也确实没有什么能阻挡您向服务器发送 XML。在本系列前面的文章中,我们使用普通文本和名/值参数发送数据,但 XML 也是一种可行的格式。本文将介绍如何来这样做。但最重要的是,我将讨论为何可以使用 XML 作为请求格式,以及为何在多数情况下不应该使用它。

XML:到底用没用?

对 Ajax 应用程序及它们使用 XML 的情况很容易犯想当然的错误:这种技术的名称(Ajax)及其使用的核心对象(XMLHttpRequest)都暗示了 XML 的使用,谈到 Ajax 应用程序的时候也经常听到 XML。但是,这种观点大错特错,如果希望在编写异步应用程序时真正做到胸有成竹,必须知道这种想法是错误的,而且最好知道为什么错误。

XMLHttpRequest:糟糕的名称和 HTTP

一项技术可能遇到的最糟的境况之一是它变得太炙手可热以至于无法再改变它的一些基本内容。XMLHttpRequest 恰恰是这种情形,它是 Ajax 应用程序中使用的基本对象。听起来它似乎是为通过 HTTP 请求发送 XML 或者以某种 XML 格式发出 HTTP 请求而设计的。但不论这个对象的名称听起来像什么,实际上它要做的只不过是为客户机代码(在网页中通常是 JavaScript)提供一种发送 HTTP 请求的方式。仅此而已,别无其他。

因此,如果将 XMLHttpRequest 改成某种更准确的名称可能更好一些,比如 HttpRequest,或者简简单单的 Request。但是,现在成千上万的人在应用程序中使用了 Ajax,而且我们知道需要几年时间(如果不是十几年的话)大部分用户才会改用 Internet Explorer 7.0 或 Firefox 1.5 这些新版本的浏览器,因此这么修改实际上是不可行的。最终我们不得不使用 XMLHttpRequest,这就要求开发人员要知道其名不符实的这一事实。

在一定程度上讲,对于不支持 XMLHttpRequest 的浏览器(特别是在 Windows 上)的最佳回溯方法之一就是使用 Microsoft IFRAME 对象。听起来可不像是 XML、HTTP 或请求,是不是?当然,所有这些都可能涉及到,但是这正清楚地说明了一点 ―― XMLHttpRequest 对象更多的是关于在不重新加载页面的情况发出请求,而不会太多地涉及 XML 甚至 HTTP。

请求是 HTTP 而非 XML

另一种常见的错误是认为 XML 在幕后使用 ―― 坦白地说,我也曾这么认为!但是,持这种观点表明您对这种技术还不甚了解。当用户打开浏览器从服务器上请求网页时,会输入 http://www.google.com 或者 http://www.headfirstlabs.com 这样的东西。即便不输入 http://,浏览器也会在地址栏的这部分加上。第一部分,即 http://,是关于如何通信的很直观的线索:通过超文本传输协议 HTTP。在网页中编写代码与服务器通信时,无论使用 Ajax 还是普通的表单 POST,甚至超链接,打交道的都是 HTTP。

既然浏览器和服务器之间的所有 Web 通信都通过 HTTP 进行,认为 XML 是 XMLHttpRequest 幕后所用的某种传输技术的想法就毫无道理了。当然在 HTTP 请求中可以发送 XML,但是 HTTP 是一个精确定义的协议,短时间内不可能消失。除了在请求中明确使用 XML,或者服务器用 XML 发送响应之外,XMLHttpRequest 对象使用的只是普普通通的 HTTP。因此,当再有人对您说 “哦,称为 XMLHttpRequest 是因为在幕后使用 XML” 的时候,您最好一笑了之,并耐心地解释什么是 HTTP,告诉他们虽然 XML 可以通过 HTTP 发送,但 XML 是一种数据格式而不是传输协议。通过这样的讨论,加深对它的理解。

使用 XML(真正)

到目前为止,我说的只是 Ajax 在哪些地方不使用 XML。但 Ajax 中的 x 和 XMLHttpRequest 中的 XML 仍然有其实际意义,在 Web 应用程序中使用 XML 有多种选择。这一节将讨论基本的选择,剩下的部分再深入探讨细节问题。

XML 选项

在异步应用程序中 XML 有两种基本的用法:

  • 以 XML 格式从网页向服务器发送请求
  • 以 XML 格式在网页中从服务器接收请求

其中第一种用法,即用 XML 发送请求,需要将请求的格式设置为 XML,可以使用 API 来完成,也可以与文本连成字符串,然后将结果发送到服务器。按照这种思路,主要的任务就是通过既符合 XML 规则又能被服务器理解的方式构造请求。因此这里的关键实际上是 XML 格式,得到需要发送的数据之后,只需要用 XML 语法将其包装起来。本文后面讨论 XML 在 Ajax 应用程序中的这种用法。

第二种用法,即用 XML 接收请求,需要从服务器上接收响应,然后从 XML 提取数据(同样,可以用 API 或者采用蛮力方法)。这种情况下,关键在于来自服务器的数据,而您恰好需要从 XML 中提取这些数据以便使用。这是本系列下一期文章的主题,到那时候我们再详加讨论。

一点忠告

再详细讨论使用 XML 的细节之前,首先给您一句忠告:XML 不是一种简洁、快速和节省空间的格式。在后面几节以及本系列的下一期文章中将看到,在上下文中使用 XML 确实有一些很好的理由,XML 与普通文本的请求和响应(特别是响应)相比也确实有一些长处。但是,和普通文本相比,XML 通常总会占用更多的空间,速度也更慢,因为需要在消息中增加 XML 所需要的标签和语义。

如果需要编写速度很快、看起来像桌面应用的程序,XML 可能不是最佳选择。如果从普通文本开始,然后发现确实需要 XML,那么就使用它;但是如果从一开始就使用 XML,基本上可以肯定一定会降低应用程序的响应性。多数情况下,与将文本转化成下面这种 XML 相比,发送普通文本会更快一些(使用类似 name=jennifer 的名/值对):

jennifer

看看哪些地方使 XML 增加了处理时间:将文本包装成 XML;发送额外信息(要注意我没有包含任何包围元素、XML 头或者可能出现在实际请求中的其他任何内容);让服务器解析 XML、生成响应、用 XML 包装响应,并将它发送回网页;让网页解析响应,最后使用它。因此要清楚什么时候使用 XML,不要一开始就认为它在很多情况下都能够加快应用程序;但,它可以增强灵活性,这就是我们现在要讨论的。

从客户机到服务器的 XML

我们来看看将 XML 作为从客户机向服务器发送数据的格式。我们首先讨论技术上的实现,然后花些时间分析什么时候适合什么时候不适合使用它。

发送名/值对

在您编写的 90% Web 应用程序中,最终都会使用名/值对发送到服务器。比方说,如果用户在网页表单中输入姓名和地址,可能希望数据采用下列形式:

firstName=Larry
lastName=Gullahorn
street=9018 Heatherhorn Drive
city=Rowlett
state=Texas
zipCode=75080

如果使用普通文本把这些数据发送到服务器,可以使用清单 1所示的代码。类似于本系列第一期文章中使用的那个例子。

清单 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);
}

精彩图集

赞助商链接