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. Leetcode Minimum Path Sum

    Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...

  2. 【CodeVS】p1079 回家

    题目描述 Description 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出的测试数据中,总会有且只有一 ...

  3. 【JAVA】Math.Round()函数常见问题“四舍5入”

    java.lang.Math.Round()使用时候,处理方式整理,方便以后查找   /**  * 测试函数 2014-01-10  */ public class TestMath {     pu ...

  4. golang channel 用法转的

    一.Golang并发基础理论 Golang在并发设计方面参考了C.A.R Hoare的CSP,即Communicating Sequential Processes并发模型理论.但就像John Gra ...

  5. JS文档生成工具：JSDoc 介绍

    JSDoc是一个根据javascript文件中注释的信息,生成API文档的工具.生成的文档是html文件.类似JavaDoc和PHPDoc. 用法 /** 一坨注释之类的 */JSDoc会从/**开头 ...

  6. Enumerators and Enumerable

    Next week task is to learn how generic enumeration interface works, try to build a sample and write ...

  7. Some useful links

    Integrating the FlyCapture SDK for use with OpenCV CStereoGrabber_Bumblebee.h OpenCV with PGR Flycap ...

  8. Distinct删除重复数据时 自定义的方法比较【转】

    最近项目中在用Linq Distinct想要将重复的资料去除时,发现它跟Any之类的方法有点不太一样,不能很直觉的在呼叫时直接带入重复数据判断的处理逻辑,所以当我们要用某个成员属性做重复数据的判断时, ...

  9. 2016HUAS暑假集训训练2 D - 敌兵布阵

    Description Lily 特别喜欢养花,但是由于她的花特别多,所以照料这些花就变得不太容易.她把她的花依次排成一行,每盆花都有一个美观值.如果Lily把某盆花照料的好的话,这盆花的美观值就会上 ...

  10. centos6 搭建ELK

    mark一下时间:2016年2月19日10:17:09 记录使用 Logstash: Logstash服务的组件,用于处理传入的日志. Elasticsearch: 存储所有日志 Kibana 4: ...