JQuery + XML作为前后台数据交换格式实践
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作为前后台数据交换格式实践的更多相关文章
- JQuery + JSON作为前后台数据交换格式实践
JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...
- 数据交换格式与SpringIOC底层实现
1.数据交换格式 1.1 有哪些数据交换格式 客户端与服务器常用数据交换格式xml.json.html 1.2 数据交换格式应用场景 1.2.1 移动端(安卓.iOS)通讯方式采用http协议+JSO ...
- 【学习】006数据交换格式与SpringIOC底层实现
课程目标 XML和JSON Java反射机制 手写SpringIOC 什么是数据交换格式 客户端与服务器常用数据交换格式xml.json.html 数据交换格式用场景 移动端(安卓.IOS)通讯方式采 ...
- 2016/4/2 json:js和jquery中轻量级数据交换格式 例: 窗口弹出 popwindow
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...
- 常用两种数据交换格式之XML和JSON的比较
目前,在web开发领域,主要的数据交换格式有XML和JSON,对于XML相信每一个web developer都不会感到陌生: 相比之下,JSON可能对于一些新步入开发领域的新手会感到有些陌生,也可能你 ...
- XML和JSON两种数据交换格式的比较
在web开发领域,主要的数据交换格式有XML和JSON,对于在 Ajax开发中,是选择XML还是JSON,一直存在着争议,个人还是比较倾向于JSON的.一般都输出Json不输出xml,原因就是因为 x ...
- Java 常见数据交换格式——xml、json、yaml
目录 数据交换格式介绍 XML 使用DOM方式解析 使用SAX方式解析 使用DOM4J方式解析 使用JDOM方式解析 JSON 使用JSONObject方式将数据转换为JSON格式 利用JSONObj ...
- 数据交换格式XML和JSON对比
1.简介: XML:extensible markup language,一种类似于HTML的语言,他没有预先定义的标签,使用DTD(document type definition)文档类型定义来组 ...
- 数据交换格式Json与XML
什么是数据交换格式: 主流的有Json.XML.HTML. 数据交换格式的应用场景: 移动端(安卓,IOS)通讯方式采用http协议+Json格式的restful风格. 很多互联网公司都是用Http协 ...
随机推荐
- Codeforces Round #228 (Div. 2) A. Fox and Number Game
#include <iostream> #include <algorithm> #include <vector> #include <numeric> ...
- xcode 编译opencv ios容易出现的错误
(1)出现 "std::__1::basic_ostream<char, std::__1::char_traits<char> >::flush()"之类 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- NOIP欢乐模拟赛 T2 解题报告
小澳的坐标系 (coordinate.cpp/c/pas) [题目描述] 小澳者表也,数学者景也,表动则景随矣. 小澳不喜欢数学,可数学却待小澳如初恋,小澳睡觉的时候也不放过. 小澳的梦境中出现了一个 ...
- 【POJ】1739 Tony's Tour
http://poj.org/problem?id=1739 题意:n×m的棋盘,'#'是障碍,'.'是空白,求左下角走到右下角且走过所有空白格子的方案数.(n,m<=8) #include & ...
- 【BZOJ2456】mode 神奇的卡内存题
以后把题解放在前面,估计没人看题解先看题... 内存1M,4个int(其实对内存的概念十分模糊),众数即为出现次数最多的数,可以用抵消的思想(但是众数不是可以是一大坨么...) #include &l ...
- BZOJ4500: 矩阵
Description 有一个n*m的矩阵,初始每个格子的权值都为0,可以对矩阵执行两种操作: 1. 选择一行, 该行每个格子的权值加1或减1. 2. 选择一列, 该列每个格子的权值加1或减1. 现在 ...
- 接口(Java)
什么是接口:接口就是一些方法特征的集合,接口是对抽象的抽象. 在java语言中,接口有两种意思: ①概念性的接口,即系统对外提供的所有服务 ②指用interface关键字定义的接口,也称为接口类型 特 ...
- 【android studio】android studio使用过程中,搜集的一些问题
1.[知乎]在Android Studio中如何将依赖的jar包放在SDK的android.jar前? 在编译原生Contacts应用时需用到非公开的API,需要引入framework等jar包,但在 ...
- struts2中用xml配置文件去验证填写信息
xml名字是这样的 actionName-validation.xml 每个action 对应一个xml文件 xml文件和action放在同一个包下 后台验证用户输入是否符合格式要求,不符合,提交后返 ...