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

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了Ajax提高篇（4）在请求和响应中使用 XML(2)，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

在 Ajax 应用程序中，使用 XML 作为发送数据的格式的理由很少，但使服务器向 客户机回发 XML 的理由很多。
理由：(1)客户机以名称/值对发送请求(2)服务器无法（以一种标准方式）发送名称/值对
在大多数情况下，客户机不需要使用 XML，因为他们会使用名称/值对发送请求。因此，您可能会发送一个这样的名称：name=jennifer。只需简单地在连续的名称/值对之间添加一个 “与” 符号（&），即可将其放在一起，就像这样：name=jennifer&job=president。使用简单的文本和这些名称值对，客户机即可轻松向服务器请求多个值。很少需要用到 XML 提供的额外结构（及其带来的额外开销）。
实际上，需要向服务器发送 XML 的所有理由都差不多可以归入以下两个基本的类别中：
服务器仅 接受 XML 请求。在这类情况下，您别无选择。上一期文章中介绍的基础知识应已使您掌握了发送此类请求所必需的工具。
您正在调用一个仅接受 XML 或 SOAP 请求的远程 API。这实际上就是上一种情况的特例，但值得单独拿出来提一下。如果您希望在一个异步请求中使用来自 Google 或 Amazon 的 API，就会有一些特殊的考虑事项。
如果服务器使用字符串 name=jennifer&job=president 应答一个应用程序，客户机没有任何标准化的简便方法来将每个对拆分成名称和值。您必须手动解析所返回的数据。如果服务器返回一个由名称/值对构成的响应，这样的响应的解释难度与使用分号、竖线或其他任何非标准格式化字符相同。对于您来说，这就意味没有任何简单的方法在响应中使用纯文本使客户机以一种标准的方法获取并解释响应，至少在响应包含多个值时是如此。


----使用XML：
意识到没有任何标准的方法可以使服务器使用名称/值对响应客户机之后，使用 XML 的原因也就显而易见了。向客户机发送数据时，名称/值对是非常好的选择，因为服务器和服务器端语言可以轻松解释名称/值对；向客户机返回数据时使用 XML 也是如此。有几种方法可从服务器获得 XML 响应，并使用较为标准的代码提取数据，在客户机中使用这些数据。
清单 1.服务器响应（XML 格式）

[html] view plain copy
  1. <ratings>
  2. show>
  3. title>Alias</rating>6.5>Lost>14.2>SixDegrees>9.1</ratings>



----将 XML 作为纯文本处理
处理 XML 的最简单的选择（至少就学习新的编程技术而言），就是用与处理服务器返回的其他文本片段相同的方法来处理它。换言之，基本上就是忽略数据格式，只关注服务器的响应。
在这种情况下，您要使用请求对象的 responseText 属性，就像在服务器向您发送非 XML 响应时一样。

清单 2. 将 XML 作为普通服务器响应处理

[javascript] copy
    functionupdatePage(){
  1. if(request.readyState==4){
  2. if(request.status==200){
  3. varresponse=request.responseText;//responsehastheXMLresponsefromtheserver
  4. alert(response);
  5. }
  6. }
  7. }



在这个代码片段中，updatePage() 是回调方法，request 是 XMLHttpRequest 对象。最终，您将得到把所有一切串联在一起的 XML 响应，位于 response 变量之中。
清单 3.response 变量的值：
<ratings><show><title>Alias</title><rating>6.5</rating>
< /show><show><title>Lost</title><rating>14.2</rating></show><show>
< title>Six Degrees</title><rating>9.1</rating></show></ratings>

在这里，您可以使用 JavaScript split 函数来拆分此数据，并通过基本的字符串操作来获得元素的名称和值。毫无疑问，这是个令人头疼的过程，它无视于您花费了大量时间来阅读前几期文章中 DOM（Document Object Model）相关内容这一事实。因此，我要强调，您应该牢记：利用 responseText，可以轻松使用和输出服务器的 XML 响应，但我不会为您展示太多的代码，在能够使用 DOM 时，您不应选择这种方法来获得 XML 数据，下面您会看到这一点。
尽管可以 将服务器的 XML 格式的响应视同为其他任何文本响应来处理，但这样做没有很好的理由。使用 DOM 这种对 JavaScript 友好的 API 来操纵 XML。还有更好的事情，JavaScript 和 XMLHttpRequest 对象提供了一个属性，它能完美地获取服务器的 XML 响应，并且是以 DOM Document 对象的形式来获取它。
清单 4 给出了一个实例。这段代码与 清单 2 类似，但没有使用 responseText 属性，回调函数使用的是 responseXML 属性。该属性在 XMLHttpRequest 上可用，它以 DOM 文档的格式返回服务器的响应。
清单 4. 将 XML 当作 XML

copy
    varxmlDoc=request.responseXML;//workwithxmlDocusingtheDOM
  1. 现在您有了一个DOMDocument，可以像处理其他任何XML一样处理它。例如，随后可能要获取所有show元素，如清单5所示。
  2. 清单5.获取所有show元素
  3. functionupdatePage(){
  4. if(request.readyState==4){
  5. if(request.status==200){
  6. varxmlDoc=request.responseXML;
  7. varshowElements=xmlDoc.getElementsByTagName("show");
  8. }



如果您熟悉 DOM，从这儿开始，看起来就应该有几分熟悉了。您可以使用您所了解的全部 DOM 方法，轻松操纵从服务器处接收到的 XML。
当然，您也可以混用普通的 JavaScript 代码。例如，可以遍历所有 show 元素，如 清单 6 所示。
清单 6. 遍历所有 show 元素

copy
    varxmlDoc=request.responseXML;
  1. varshowElements=xmlDoc.getElementsByTagName("show");
  2. for(varx=0;x<showElements.length;x++){
  3. //Weknowthatthefirstchildofshowistitle,andthesecondisrating
  4. vartitle=showElements[x].childNodes[0].value;
  5. varrating=showElements[x].childNodes[1].value;
  6. //Nowdowhateveryouwantwiththeshowtitleandratings


  7. 通过这段非常简单的代码，您正是将 XML 响应作为 XML 而不是无格式的纯文本进行了处理，还使用了一点 DOM 和简单的 JavaScript 来处理服务器响应。更重要的是，您使用了标准化的格式 —— XML，而不是以逗号分隔的值或以竖线分隔的名称/值对。换句话说，您将 XML 用在了最适合它的地方，避免了在不适合的地方使用它（比如说向服务器发送请求时）。

    ----解释 XML 的其他可选方法 除将 XML 作为无格式文本处理或使用 DOM 处理之外，还有一种非常流行的选择很重要，值得一提。那就是 JSON（JavaScript Object Notation），这是一种绑定在 JavaScript 内的自由文本格式。大体上，可以用 JSON 做的事，用 DOM 都可以完成，反之亦然；选择主要取决于偏好，当然也要为特定的应用程序选择正确的方法。就现在而言，您应坚持使用 DOM，在接收服务器响应的过程中熟悉 DOM。

    原文链接：https://www.f2er.com/ajax/162945.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作