JQuery + xml作为前后台数据交换

　　JQuery提供良好的异步加载接口AJAX，可以局部更新页面数据，

http://api.jquery.com/category/ajax/

　　xml作为一种轻量数据格式，被浏览器js引擎普遍支持，同json格式，但是没有json那么精简。

　　使用AJAX+xml数据格式来实现动态页面，有以下好处：

1、 松耦合， 页面HTML和数据彻底分离， 即表示层 和 数据层分开， 有利前台样式定制。 不同于以往后台脚本嵌套HTML标签，并输出数据到标签的合适位置， 来实现动态页面，表示和数据搅合在一起。

2、 支持与RPC对接， 对于各种业务RPC（类似web service）可以整合到一个页面上展示和配置， 例如一个个人网站页面上， 显示的天气数据来自气象部门， 日历中待办事项和存储事项， 都是通过xml数据格式与中华万年历网站交互的。

3、 充分利用了xml格式好处， 层次化描述数据， 相比form表单提交的x-www-form-urlencode格式的数据要强的多。

4、 AJAX带来和好处， 可以局部更新页面， 不用form表单整体提交， 导致整个页面重载。

XML前后台交互示例

　 　前台文件client.html完全有html js书写，不包含任何PHP语法， 其实现功能，将一个XML字符串， 通过ajax发送后后台（server.php）， 后台将受到的XML字符串原封不动再输出到http响应中， 此时前台ajax的success事件之前， ajax客户端收到响应的XML字符串，然后将其转换为XML对象， 再调用success事件， 在事件处理函数中， 可以访问此对象。

前台文件 client.html

  1. <html>
  2. <head>
  3.         <script type="text/javascript" src="./jquery.js"></script>
  4.         <style>
  5.  
  6.         </style>
  7. </head>
  8. <body>
  9.         <h1>hello world!</h1>
  10.  
  11.          <script type='text/javascript'> 
  12.  
  13.             // 这里要使用拼接好的XML字符串
  14.             var data = '<root><classCode>cellphone</classCode><city>GuangDong</city></root>';
  15.             $.ajax({
  16.                 type: "POST",
  17.                 url: "/xmlServer.php",
  18.  
  19.                 // data sent is xml
  20.                 contentType: "application/xml; charset=utf-8",
  21.                 // Post 方式，data参数不能为空""，
  22.                 //如果不传参数，也要写成"{}"，否则contentType将不能附加在Request Headers中。
  23.                 data: data, 
  24.  
  25.                 // data in response will expected xml
  26.                 dataType: "xml",
  27.                 anysc: false,
  28.                 success: function (result) {
  29.                     $("h1").text(result.getElementsByTagName("city")[0].childNodes[0].nodeValue)
  30.                 },
  31.                 error: function (XMLHttpRequest, textStatus, errorThrown) {
  32.                     alert(errorThrown + ':' + textStatus); // 错误处理
  33.                 }
  34.             });
  35.         </script>
  36. </body>
  37. </html>

后台文件 server.php

  1. <?php
  2. // 将客户端发送的XML数据原样发送回去
  3. //"<root><symbol>IBM</symbol><price>120</price></root>";
  4. echo $HTTP_RAW_POST_DATA;
  5. ?>

JQuery + XML作为前后台数据交换格式实践的更多相关文章

  1. JQuery + JSON作为前后台数据交换格式实践

    JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...

  2. 数据交换格式与SpringIOC底层实现

    1.数据交换格式 1.1 有哪些数据交换格式 客户端与服务器常用数据交换格式xml.json.html 1.2 数据交换格式应用场景 1.2.1 移动端(安卓.iOS)通讯方式采用http协议+JSO ...

  3. 【学习】006数据交换格式与SpringIOC底层实现

    课程目标 XML和JSON Java反射机制 手写SpringIOC 什么是数据交换格式 客户端与服务器常用数据交换格式xml.json.html 数据交换格式用场景 移动端(安卓.IOS)通讯方式采 ...

  4. 2016/4/2 json：js和jquery中轻量级数据交换格式 例： 窗口弹出 popwindow

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

  5. 常用两种数据交换格式之XML和JSON的比较

    目前,在web开发领域,主要的数据交换格式有XML和JSON,对于XML相信每一个web developer都不会感到陌生: 相比之下,JSON可能对于一些新步入开发领域的新手会感到有些陌生,也可能你 ...

  6. XML和JSON两种数据交换格式的比较

    在web开发领域,主要的数据交换格式有XML和JSON,对于在 Ajax开发中,是选择XML还是JSON,一直存在着争议,个人还是比较倾向于JSON的.一般都输出Json不输出xml,原因就是因为 x ...

  7. Java 常见数据交换格式——xml、json、yaml

    目录 数据交换格式介绍 XML 使用DOM方式解析 使用SAX方式解析 使用DOM4J方式解析 使用JDOM方式解析 JSON 使用JSONObject方式将数据转换为JSON格式 利用JSONObj ...

  8. 数据交换格式XML和JSON对比

    1.简介: XML:extensible markup language,一种类似于HTML的语言,他没有预先定义的标签,使用DTD(document type definition)文档类型定义来组 ...

  9. 数据交换格式Json与XML

    什么是数据交换格式: 主流的有Json.XML.HTML. 数据交换格式的应用场景: 移动端(安卓,IOS)通讯方式采用http协议+Json格式的restful风格. 很多互联网公司都是用Http协 ...

随机推荐

  1. php 实现推技术comet(转)

    实现实时通信一般有两种方式:socket或comet.socket是比较好的解决方案,问题在于不是所有的浏览器都兼容,服务器端实现起来也稍微有点麻烦.相比之下,comet(基于HTTP长连接的&quo ...

  2. Spring中@Async用法总结

    引言: 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在Spring 3. ...

  3. MetaHandler.js：移动端适配各种屏幕

    MetaHandler.js !function () { var opt = function() { var ua = navigator.userAgent, android = ua.matc ...

  4. OpenCV 3.1 StereoBM 获取正确视差Dispariy

    OpenCV更新到3.0版本后,Stereo模块变化的挺多的,首先去掉了StereoBMState和StereoSGBMState这两个专门控制BM和SGBM算法参数的类,而且StereoBM不能直接 ...

  5. 特殊集合 Stack Queue Hashtable

    //Stack    干草堆集合    栈集合      先进后出 Stack st = new Stack(); //实例化 初始化 st.Push(2); //添加元素 st.Push(6); s ...

  6. Odoo attrs X2many 类型的过滤

    有童鞋在群里问到 attrs 中的 many2many类型的字段该如何进行domain过滤,其实非常简单: Many2many的字段在js中获取的值的格式为[[6,false,[]]] 所以attrs ...

  7. POJ3468 线段树（区间更新，区间求和，延迟标记）

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 97196   ...

  8. bootstrap input框清空

    <!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/t ...

  9. 使用xtrbackup 热备MySQL数据库 以及恢复和自动删除脚本

    直接上脚本 热备(全备) #!/bin/bash user='root' passwd='123456' my_config='/etc/my.cnf' #mysql configure log=fu ...

  10. 20145337《Java程序设计》第八周学习总结

    20145337<Java程序设计>第八周学习总结 教材学习内容总结 15.1日志 15.1.1日志API简介 使用日志的起点是logger类,logger实例的创建有许多要处理的要素,必 ...