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. 在ScrollView下加入的组件，不能自动扩展到屏幕高度

    ScrollView中的组件设置android:layout_height="fill_parent"不起作用的解决办法 在ScrollView中添加一个android:fillV ...

  2. ACM 一种排序

    一种排序 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数 ...

  3. [知识点]平衡树之Splay

    // 此博文为迁移而来,写于2015年7月18日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102w6rg.html 1.前 ...

  4. Code[VS] 1332 题解 【Kosaraju】【Tarjan】

    Code[VS] 1332 上白泽慧音题解 Tarjan Algorithm Kosaraju Algorithm 题目传送门:http://codevs.cn/problem/1332/   题目描 ...

  5. Android -- 滑式抽屉SlidingDrawer(非原创)

    SlidingDrawer(滑动式抽屉)隐藏屏外的内容,并允许用户拖拽一个handle以显示隐藏的内容.SlidingDrawer可以在垂直或者水平使用.它由两个子视图组成:一个是用户拖拽的handl ...

  6. 用GruntJS合并、压缩CSS资源文件

    合并.压缩CSS资源文件用到了grunt-contrib-concat.grunt-css插件,自己npm就可以了,下面直接呈上package.json.Gruntfile.js代码 package. ...

  7. Node.js执行存储过程

    直接上代码 var sql = require('mssql'); var config = {     user: 'sa',     password: '123456',     server: ...

  8. webdriver中处理alert

    1 定义isAlertPresent()供调用: public  boolean isAlertPresent() {  try {   driver.switchTo().alert();   re ...

  9. WinForm timer控件

    timer 控件:按用户定义的时间间隔引发的事件 属性: Enabled   是否启用:  Interval    事件发生的事件间隔,单位是毫秒 事件只有一个:Tick    事件经过指定的时间间隔 ...

  10. c#语句 随堂练习2

    1.方程ax²+bx+c=0是一元二次方程,求根. 2.输入一个年份 ,判断是不是闰年.(能被4整除但不能被100整除的年份是闰年,有的世纪年也是闰年) 3.标准体重:男士体重=身高-100±3:女士 ...