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: 强化训练-Roads in the North-BFS-树的直径裸题

    Roads in the North Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu De ...

  2. TYVJ P1103 多项式输出 Label:模拟 有点儿坑

    描述 一元 n 次多项式可用如下的表达式表示:  f(x)=an*x^n+an-1*x^n-1+...+a1*x+a0,an<>0其中,ai*a^x 称为i次项,ai称为i次项的系数.给出 ...

  3. SpringMvc出现No mapping found for HTTP request with URI的终极解决办法

    No mapping found for HTTP request with URI 出现这个问题的原因是在web.xml中配置错了,如: <servlet> <servlet-na ...

  4. 通过data:image/png;base64把图片直接写在src里

    从网上下了个源文件查看时候发现了引用图片的地址不是在本地上的,而是后面跟了一大串字符data:image/png;base64...查了一下资料分析如下: 关于用base64存储图片 网页上有些图片的 ...

  5. 51nod算法马拉松12

    A 第K大区间 不妨考虑二分答案x,则问题转化成计算有多少个区间满足众数出现的次数>=x. 那么这个问题我们使用滑动窗口,枚举右端点,则左端点肯定单调递增,然后维护一个简单的数组就能资瓷添加元素 ...

  6. GO语言练习：组合的用法

    1.代码 2.运行 1.代码 package main import "fmt" type Base struct { Name string } func (base * Bas ...

  7. 接口测试之soupui&groovy

    原著地址:http://www.cnblogs.com/wade-xu/p/4236295.html#3334654 需注意下方code的设置

  8. js正则表达式 验证手机号，email地址和邮政编码

    手机号码的验证(13开头和158,159开头,共11位) var re;        var ss=document.getElementById('textbox3').value;        ...

  9. Java 多继承

    浅浅地上了几天 Java 的课程,然后怎么也想不明白:Java 不支持多继承有和接口到底是什么样的关系? 一只牛的故事. // 叫的抽象基类 abstract class call{ } // 跑的抽 ...

  10. tomcat启动后，在普通java类中获取spring管理的bean和ServletContext，（经过验证，可以取到）

    //从spring容易中获取bean public static Object getBean(String beanName){ ApplicationContext context = Conte ...