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

最新推荐文章于 2024-10-30 15:37:42 发布

weixin_34242331

最新推荐文章于 2024-10-30 15:37:42 发布

阅读量107

点赞数

文章标签： php json javascript ViewUI

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; 
?>

weixin_34242331

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫