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

<html>

<head>

        <script type="text/javascript" src="./jquery.js"></script>

        <style>

        </style>

</head>

<body>

        <h1>hello world!</h1>

         <script type='text/javascript'> 

            // 这里要使用拼接好的XML字符串

            var data = '<root><classCode>cellphone</classCode><city>GuangDong</city></root>';

            $.ajax({

                type: "POST",

                url: "/xmlServer.php",

                // data sent is xml

                contentType: "application/xml; charset=utf-8",

                // Post 方式，data参数不能为空""，

                //如果不传参数，也要写成"{}"，否则contentType将不能附加在Request Headers中。

                data: data, 

                // data in response will expected xml

                dataType: "xml",

                anysc: false,

                success: function (result) {

                    $("h1").text(result.getElementsByTagName("city")[0].childNodes[0].nodeValue)

                },

                error: function (XMLHttpRequest, textStatus, errorThrown) {

                    alert(errorThrown + ':' + textStatus); // 错误处理

                }

            });

        </script>

</body>

</html>

后台文件 server.php

<?php

// 将客户端发送的XML数据原样发送回去

//"<root><symbol>IBM</symbol><price>120</price></root>";

echo $HTTP_RAW_POST_DATA;

?>

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. ACM: HDU 1285 确定比赛名次 - 拓扑排序

     HDU 1285 确定比赛名次 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u De ...

  2. Android -- 简单广播接收与发送（2）--动态注册广播接收器

    1. 效果图

  3. 获取IP（windows和linux）

    #ifdef _WIN32 #include <winsock2.h> #include <Ws2tcpip.h> #pragma comment(lib,"ws2_ ...

  4. HDU 3584 树状数组

    Cube Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total Submi ...

  5. sqlmap 1.0.21 tamper 总结

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. jquery ajax传递多个对象或数组到后台

    1.js对象创建:因为需要把对象json序列化后,才能传递到后台,后台根据json字符串进行反序列化. 2.Jquery   $.ajax方法的配置 针对$.ajax方法的配置参数需要进行修改: 1) ...

  7. zabbix 服务端

    首先安装zabbix监控平台,必须是在lamp平台下才可以正常使用的 这个是用yum源安装的lamp 步骤一:更新yum源  1.执行以下命令更新yum源为Webtatic EL6 YUM源:  rp ...

  8. 浅谈scrum站立会议

    什么是每日站立会议?       站立会议是让团队成员每日面对面站立互相交流他们所承担任务的进度.它的一个附带好处是让领导或经理能了解到工作情况.但本质上是为了团队交流,不是报告会议! 为什么开展每日 ...

  9. C# 特殊关键字

    1.static 表示被修饰的对象的生命周期与当前的应用程序域相同,因此可以在多个实例中共享 2.const 表示常量且只能在声明时赋值,因此const的常量在编译时就能确定,它如果没有被static ...

  10. NOJ 1074 Hey Judge（DFS回溯）

    Problem 1074: Hey Judge Time Limits:  1000 MS   Memory Limits:  65536 KB 64-bit interger IO format: ...