DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JSON基礎 >> XML的代替者----JSON
XML的代替者----JSON
編輯:JSON基礎     
我個人覺得PHP與Javascript各有長處,如果能完美的結合起來,那將創造出許許多多的奇跡! 我是初次寫此類文章,Bug難免,請各位指正~ 
    現在AJAX應用非常流行,而在AJAX中客戶端Javascript和服務端動態腳本的通信是關鍵。如果傳輸的信息比較簡單,通常我們會直接采用字符串的方式,如果信息結構復雜一點,則通常用XML文檔。XML文檔雖然應用廣泛,但是用php生成和用Javascript處理卻不是一件很容易的事情。這裡我推薦一種XML文檔的比較好簡化替代方案:JSON! 
    首先我們來了解一下Javascript的基礎知識。 
    1.創建數組,可以用JS內建的類Array來初始化,也可以用JSON符號"[]"。下面通過兩種方式創建的arr1和arr2的實質是一樣的: 

var arr1 = new Array(); 
arr1[0] = "apple"; 
arr1[1] = "google"; 
arr1[2] = "longbill"; 

var arr2 = ["apple","google","longbill"];
注意,數組的索引也可以是字符串,如 arr1["name"] = "longbill"; 這時的數組就相當於對象了。。。 
    2.創建對象,可以用JS內建的類Object來初始化,也可以用JSON符號"{}"。下面通過兩種方式創建的obj1和ob2的實質也是一樣的: 


var obj1 = new Object(); 
obj1.name = "longbill"; 
obj1.age = 18; 

var obj2 = { name:"longbill",age:18 };
注意,這裡"{"和"}"之間必須寫成"鍵:值"的形式,而且不同的"鍵:值"之間要用","分割。 "鍵"中也可以包含空格等特殊字符,此時要用""(引號)來引用,如 "phone number":123456 
    其實在JS中,數組的本質是一個對象,對象本身也是一個數組。所以, obj1.name 和 obj1["name"] 是同一個引用。 
    我們還可以通過JSON符號的嵌套來定義復雜的S對象: 


var people = [ 
    { 
        name:"longbill", 
        age:18 
    }, 
    { 
        name:"neal", 
        age:19 
    }, 
    { 
        name:"glocklee", 
        age:17 
    } 
];
//這個應該看的懂吧~~ 
大部分XML文檔都可以用JSON來表達: 


<?xml version="1.0"?> 
<root> 
  <book> 
    <name>Ju love</name> 
    <price>$15</price> 
  </book> 
  <book> 
    <name>Javascrip</name> 
    <price>$25</price> 
  </book> 
</root>

如果用JSON就可以表達為: 


root: 

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

是不是簡化很多? 

    而且客戶端JS處理起來也很簡單,只要用執行字符串函數 "eval" 就可以將JSON信息提取出來,而如果是XML文檔,那就不的不用大量的標准DOM操作來提取其中的數據。如: 


//已經用AJAX從服務端下載了一個JSON文件(字符串),保存在變量 json 裡 
eval("var myvar = "+json); 
//這樣,JSON裡的信息就表達在myvar這個變量裡了。
缺點:一旦JSON的格式錯誤,將導致服務端JS系統錯誤,甚至崩潰。 
   解決辦法: 
   最好在eval之前使用try(試探執行),如 


//已經用AJAX從服務端下載了一個JSON文件(字符串),保存在變量 json 裡 
try { 
    eval("var myvar = "+json); 
} catch(e) { alert('json syntax error!'); } 
//這樣,即使JSON格式錯誤,也只會彈出一個提示框,而不會拋出一個腳本錯誤!
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved