zoukankan      html  css  js  c++  java
  • 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; 
    ?>
  • 相关阅读:
    Path Sum II
    Convert Sorted Array to Binary Search Tree
    Construct Binary Tree from Inorder and Postorder Traversal
    Construct Binary Tree from Preorder and Inorder Traversal
    Maximum Depth of Binary Tree
    Binary Tree Zigzag Level Order Traversal
    Binary Tree Level Order Traversal
    Same Tree
    Validate Binary Search Tree
    Binary Tree Inorder Traversal
  • 原文地址:https://www.cnblogs.com/lightsong/p/4017960.html
Copyright © 2011-2022 走看看