Asp.Net+Jquery.Ajax详解10-JSON和XML+写在最后

程序员文章站 2022-04-14 10:51:14

以前，XML是程序员的宠儿，是数据传输、API、AJAX应用等方面的不二选择，，特别是遇到AJAX应用的时候，XMLHttpRequest会检查返回数据的MIME类型，如果是tex...

以前，XML是程序员的宠儿，是数据传输、API、AJAX应用等方面的不二选择，，特别是遇到AJAX应用的时候，XMLHttpRequest会检查返回数据的MIME类型，如果是text/xml类型，XMLHttpRequest就会运行XML Parser来解析返回的文档，并在内存中构建出对应的DOM树，之后，你可以用JavaScript标准的DOM方法来操作DOM树。由于众所周知DOM的诟病，这显然不是有效率的方法。另外一个问题是，如果你想使用JavaScript对象而不是直接用XML数据的话，你还得自己遍历整个DOM树来创建相应对象。

于是JSON横空出世.

JSON提供了一种更适合AJAX应用的标准数据交换格式。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。

JSON有很多优势，但也存在缺点，而XML虽然确实存在不少问题，两者对比,推荐看老K博客

本文重在演示用Jquery.ajax获取后台的json数据和xml数据,两者对比参考文中推荐博客。

客户端代码

[html]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsonXmlTest.aspx.cs" Inherits="JqueryAjaxTest.JsonTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $("document").ready(function () {
            $.getJSON(
                "Data/JsonData.txt",
                 function (JsonData) {
                     $.each(JsonData.employees, function (i, item) {
                         $("#result1").append(item.firstName + " " + item.lastName + "<br/>");
                     })
                 })

            $.ajax({
                url: "Data/XmlData.xml",
                success: function (XmlData) {
                    var XmlContent = "";
                    //尝试一下这样的each用法
                    $(XmlData).find("name").each(function () {
                        XmlContent += $(this).children("firstName").text() + " " + $(this).children("lastName").text() + "<br>";
                    });
                    $("#result2").html(XmlContent);

                },
                dataType: "xml"
            });
        })
    </script>
</head>
<body>
    <p id="result1">

    </p>
    <hr />
      <p id="result2">
    </p>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsonXmlTest.aspx.cs" Inherits="JqueryAjaxTest.JsonTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $("document").ready(function () {
            $.getJSON(
                "Data/JsonData.txt",
                 function (JsonData) {
                     $.each(JsonData.employees, function (i, item) {
                         $("#result1").append(item.firstName + " " + item.lastName + "<br/>");
                     })
                 })

            $.ajax({
                url: "Data/XmlData.xml",
                success: function (XmlData) {
                    var XmlContent = "";
                    //尝试一下这样的each用法
                    $(XmlData).find("name").each(function () {
                        XmlContent += $(this).children("firstName").text() + " " + $(this).children("lastName").text() + "<br>";
                    });
                    $("#result2").html(XmlContent);

                },
                dataType: "xml"
            });
        })
    </script>
</head>
<body>
    <p id="result1">

    </p>
    <hr />
      <p id="result2">
    </p>
</body>
</html>

服务器xml文件内容

[html]
<?xml version='1.0' encoding='UTF-8'?>
<employees>
<name>
    <firstName>Bill</firstName>
    <lastName>Gates</lastName>
</name>
<name>
    <firstName>George</firstName>
    <lastName>Bush</lastName>
</name>
<name>
    <firstName>Thomas</firstName>
    <lastName>Carter</lastName>
</name>
</employees>

<?xml version='1.0' encoding='UTF-8'?>
<employees>
<name>
    <firstName>Bill</firstName>
    <lastName>Gates</lastName>
</name>
<name>
    <firstName>George</firstName>
    <lastName>Bush</lastName>
</name>
<name>
    <firstName>Thomas</firstName>
    <lastName>Carter</lastName>
</name>
</employees>

服务器json文件内容

[javascript]
{
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}

{
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}

因为使用jquery，所以在客户端解析xml和json看上去没有太大区别，但如果使用原生javascript，对比效果就明显了，看这篇文章Java+javascript+xml和java+javascript+json对比

个人感觉xml在服务器是无与伦比的，但json在客户端的优势也是很明显的。xml和json孰优孰劣，并不是可以依据个人喜好就轻易得出结论的。一个优秀的程序员，两者都该熟练掌握，随机应变。

《Asp.Net+Jquery.Ajax详解》系列文章，写在最后的话：

终于按照我在第一篇中的规划彻底完成了这一系列文章，回头看看，内容其实挺简单的，但是依然认认真真地把它完了。如果有什么不准确的地方，后续还会做纠正和补充。

其实，开始的时候想把它写到一篇文章里，那样势必会导致“粗大全”的结果，很可能每一点都说不清楚，后来又考虑到如果没有一点基础的人看，肯定看得模棱两可，最后还是决定一个实例一个实例的上，一点点地说，说了10篇，对不同的读者，不见得很清楚明白，也不见得是最好的解决方案，但我已经尽自己所能说得清楚点，说得更合理些。内容涉及不多，可以帮助读者获得一个还说得过去的Jquery.ajax基础。不看功能看苦劳吧，呵呵。

还是强调一下，这是jquery.ajax基础，灵活运用到项目中才是真本事。加油，大家。加油，贾琳。

上一篇：使用微软自带解压类压缩文件夹

下一篇： C++中的类和对象的封装及函数实例讲解