码迷,mamicode.com
首页 > Web开发 > 详细

JQuery + XML作为前后台数据交换格式实践

时间:2014-10-10 23:59:14      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   os   使用   ar   

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作为前后台数据交换格式实践

标签:des   style   blog   http   color   io   os   使用   ar   

原文地址:http://www.cnblogs.com/lightsong/p/4017960.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!