PHP & Javascript 之 XML的代替者JSON

longbill

我个人觉得PHP与Javascript各有长处，如果能完美的结合起来，那将创造出许许多多的奇迹！ 我是初次写此类文章，Bug难免，请各位指正~
    现在AJAX应用非常流行，而在AJAX中客户端Javascript和服务端动态脚本的通信是关键。如果传输的信息比较简单，通常我们会直接采用字符串的方式，如果信息结构复杂一点，则通常用XML文档。XML文档虽然应用广泛，但是用php生成和用Javascript处理却不是一件很容易的事情。这里我推荐一种XML文档的比较好简化替代方案：JSON！
    首先我们来了解一下Javascript的基础知识。
    1.创建数组，可以用JS内建的类Array来初始化，也可以用JSON符号"[]"。下面通过两种方式创建的arr1和arr2的实质是一样的：

1. var arr1 = new Array();
   
2. arr1[0] = "apple";
   
3. arr1[1] = "google";
   
4. arr1[2] = "longbill";
   
5. 
   
6. var arr2 = ["apple","google","longbill"];

复制代码

注意，数组的索引也可以是字符串，如 arr1["name"] = "longbill"; 这时的数组就相当于对象了。。。
    2.创建对象，可以用JS内建的类Object来初始化，也可以用JSON符号"{}"。下面通过两种方式创建的obj1和ob2的实质也是一样的：

1. var obj1 = new Object();
   
2. obj1.name = "longbill";
   
3. obj1.age = 18;
   
4. 
   
5. var obj2 = { name:"longbill",age:18 };

复制代码

注意，这里"{"和"}"之间必须写成"键:值"的形式，而且不同的"键:值"之间要用","分割。 "键"中也可以包含空格等特殊字符，此时要用""（引号）来引用，如 "phone number":123456
    其实在JS中，数组的本质是一个对象，对象本身也是一个数组。所以， obj1.name 和 obj1["name"] 是同一个引用。
    我们还可以通过JSON符号的嵌套来定义复杂的S对象：

1. var people = [
   
2.     {
   
3.         name:"longbill",
   
4.         age:18
   
5.     },
   
6.     {
   
7.         name:"neal",
   
8.         age:19
   
9.     },
   
10.     {
    
11.         name:"glocklee",
    
12.         age:17
    
13.     }
    
14. ];
    
15. //这个应该看的懂吧~~

复制代码

大部分XML文档都可以用JSON来表达：

1. <?xml version="1.0"?>
   
2. <root>
   
3.   <book>
   
4.     <name>Ju love</name>
   
5.     <price>$15</price>
   
6.   </book>
   
7.   <book>
   
8.     <name>Javascrip</name>
   
9.     <price>$25</price>
   
10.   </book>
    
11. </root>

复制代码

如果用JSON就可以表达为:

1. [
   
2.   {
   
3.      name:"Ju love",
   
4.      price:"$15"
   
5.   },
   
6.   {
   
7.      name:"Javascript",
   
8.      price:"$25"
   
9.   }
   
10. ]

复制代码

是不是简化很多？

    而且客户端JS处理起来也很简单，只要用执行字符串函数 "eval" 就可以将JSON信息提取出来，而如果是XML文档，那就不的不用大量的标准DOM操作来提取其中的数据。如：

1. //已经用AJAX从服务端下载了一个JSON文件（字符串），保存在变量 json 里
   
2. eval("var myvar = "+json);
   
3. //这样，JSON里的信息就表达在myvar这个变量里了。

复制代码

缺点：一旦JSON的格式错误，将导致服务端JS系统错误，甚至崩溃。
   解决办法：
   最好在eval之前使用try（试探执行），如

1. //已经用AJAX从服务端下载了一个JSON文件（字符串），保存在变量 json 里
   
2. try {
   
3.     eval("var myvar = "+json);
   
4. } catch(e) { alert('json syntax error!'); }
   
5. //这样，即使JSON格式错误，也只会弹出一个提示框，而不会抛出一个脚本错误！

复制代码

[ 本帖最后由 longbill 于 2006-8-14 11:48 AM 编辑 ]

coolhpy

噢，网上看到过类似的介绍，这样是比去解晰XML要方便很多。

crazysoul

其实在JS中，数组的本质是一个对象，对象本身也是一个数组

在JS中,数组的确是由对象构造而成,可以用typeof a[]来测试(JS数据类型中没有array这一型).但不能说"对象本身也是一个数组",难道说父母生了你,你也是你的父母? Array所具有的方法,原生的Object并不具有.
另外

[
  {
     name:"Ju love",
     price:"$15"
  },
  {
     name:"Javascript",
     price:"$25"
  }
]

应该是:
var root =
{
book:
[
  {
     name:"Ju love",
     price:"$15"
  },
  {
     name:"Javascript",
     price:"$25"
  }
]
};

[ 本帖最后由 crazysoul 于 2006-8-15 01:19 AM 编辑 ]

longbill

呵呵，楼上批评的是啊~~

菜鸟也要有理想

仔细看一下很多门户都这么搞的。。

sanders_yao

今天刚从书里看到这部分内容 很有用

sanders_yao

对了 JSON的字符串应该都需要addslashes函数处理一下吧？

longbill

sanders_yao

  发表于 2006-8-18 10:33 AM
对了 JSON的字符串应该都需要addslashes函数处理一下吧？

是啊，不然如果字符串里有引号会出错的

sanders_yao

刚才测试的时候出现了一个问题 希望大家解决一下
我建立了一个文件内容如下：
{
        "item"        : [
                {
                        "title"                : encodeURIComponent("往事如烟(我第一次“谈朋友”)"),
                        "link"                : "http://www.chinalabs.com/view/xueshu/135550.html",
                        "author"        : "TOM科技",
                        "pubDate"        : "2006-4-13 17:07:49"
                },
                {
                        "title"                : encodeURIComponent("往事如烟(我第一次“谈朋友”)"),
                        "link"                : "http://www.chinalabs.com/view/xueshu/135550.html",
                        "author"        : "TOM科技",
                        "pubDate"        : "2006-4-13 17:07:49"
                }
        ]
}

但是我在另一个测试页面请求的时候就会出现乱码，请先看下我的代码片断：

function loader(){
        var req = getXmlHTTPRequest();
        req.open("get", "http://localhost/test.txt", false);
        req.send();
        eval("var strReq = " + req.responseText);
        var strOutput = "";
        for(var i = 0;i < strReq["item"].length;i ++){
                strOutput += "<tr><td>" + strReq["item"]["title"] + "</td></tr>";
        }
        strOutput = "<table border=\"1\">" + decodeURIComponent(strOutput) + "</talbe>";
        document.getElementById("console").innerHTML = strOutput;
        alert(strOutput);
}

window.onload = function(){
        document.getElementById("test").onclick = loader;
}
</script>
<body>
<div id="test" style="background-color:#CCCCCC; width:100px; height:100px;"></div>
<div id="console" style="width:500px; border:solid #000000 1px;"></div>
</body>
</head>
有没有使用js解决这种乱码的方法

luzhou

确实是好文！