Ajax提高篇(3)在请求和响应中使用 XML(1)

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 请求只需要稍微修改代码。

版权声明:感觉我写的还算不错的的话希望你能够动动你的鼠标和键盘为我点上一个赞或是为我奉献上一个评论,在下感激不尽!_______________________________________________________欢迎转载,希望在你转载的同时,添加原文地址,谢谢配合

时间: 2024-07-29 06:08:21

Ajax提高篇(3)在请求和响应中使用 XML(1)的相关文章

Ajax提高篇(4)在请求和响应中使用 XML(2)

----前言 在 Ajax 应用程序中,使用 XML 作为发送数据的格式的理由很少,但使服务器向 客户机回发 XML 的理由很多. 理由:(1)客户机以名称/值对发送请求(2)服务器无法(以一种标准方式)发送名称/值对 在大多数情况下,客户机不需要使用 XML,因为他们会使用名称/值对发送请求.因此,您可能会发送一个这样的名称:name=jennifer.只需简单地在连续的名称/值对之间添加一个 "与" 符号(&),即可将其放在一起,就像这样:name=jennifer&

Ajax提高篇(5)使用JSON 进行数据传输

在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式.Ajax 的另一种有用的数据格式 JavaScript Object Notation(JSON),使用它更轻松地在应用程序中移动数据和对象. 在许多异步应用程序中如何恰当地使用纯文本和简单的名称/值对.可以将数据组合成下面这样的形式: mailto:firstName=Brett&amp;amp;lastName=McLaughlin&amp;amp;[email protected] 这样就行了,不需要再做什么

Ajax提高篇(1)入门

学习目的:理解 Ajax 及其工作原理,构建网站的一种有效方法. Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术:? HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段. ? JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信. ? DHTML 或 Dynamic HTML,用于动态更新表单.我们将使用 div.span 和其他动态

Ajax发送GET、POST请求和响应XML数据案例

1.新建工程 新建一个java web工程,新建一个Servlet文件 AServlet.java,用于返回get和post请求. public class AServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("Hello

Ajax学习——GET和POST请求(jQuery中的实现方式)(二)

Get和POST请求 get请求: 语义:如果希望从服务端获取数据,使用get请求 发送数据的方式: 请求参数:通过请求发送的数据被称为请求参数. get的请求参数被浏览器自动的连接到url后面. 请求参数的格式为: 名1=值1&名2=值2&... 这种书写格式称为:urlencoded 通过location.search可获取当前url?及后面的请求参数内容 可发送的数据大小: 2k左右 可发送的数据格式 只能发送文本形式的数据 get请求可以被缓存: 因为get请求的信息都在地址栏中显

Ajax提高篇(6)服务器端脚本和程序中用 JSON 进行响应和回复

JSON 是适用于 Ajax 应用程序的一种有效格式,原因是它使 JavaScript 对象和字符串值之间得以快速转换.由于 Ajax 应用程序非常适合将纯文本发送给服务器端程序并对应地接收纯文本,相比不能生成文本的 API,能生成文本的 API 自然更可取:而且,JSON 让您能够处理本地 JavaScript 对象,而无需为如何表示这些对象多费心思.XML 也可以提供文本方面的类似益处,但用于将 JavaScript 对象转换成 XML 的几个现有 API 没有 JSON API 成熟:有时

Django &amp; JavaScript 用Ajax实现JSON数据的请求和响应

[描述] 1.Server端定义了两个字段:Article.title 和 Article.content 2.客户端用JavaScript Ajax异步加载请求服务器的JSON数据 效果是点击按钮从服务器的数据库取得第一篇文章的标题 [实现] 网页端: {% load static %} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> functio

Ajax提高篇(7)Ajax实现简单的下拉框联动显示数据

页面中的两个下拉列表框: <tr> <td style="width: 130px"> 所在学院:</td> <td style="width: 100px"> <select id="college" style="width: 200px" runat="server" onchange="changcollege(this.value)&

HTTP请求和响应中Content-Type的可用值

在发送请求时,参数以什么样的类型发送,常见的有 : application/x-www-form-urlencoded表单提交参数,如: pageNo=0&classTypeId=3228 application/json json格式,如: ====================================================   在响应的结果中,信息以什么样的类型 展示,常见也有 text/html : HTML格式 application/json    : JSON数据