動態ｓｃｒｉｐｔ標簽技術結合ＪＳＯＮ數據交換格式解決Ａｊａｘ的跨域問題

摘要：本文討論了結合使用JSON和Dynamic script Tag技術來解決Ajax應用中跨域訪問第三方Web服務的問題。

關鍵詞：Ajax；JSON；動態script標簽；跨域

1 引言

當前多數的Web服務都是采用XML作為數據交換格式。因此當我們在Ajax應用中會使用XMLHttpRequest對象來訪問Web服務的時候就會遇到跨域限制問題。

跨域問題的實質是由于瀏覽器對JavaScript腳本的安全限制使得在Ajax應用中只能訪問本域的Web服務。我們通常選用的解決方案是在本域的服務器上建立一個跨域代理（Cross Domain Proxy）來間接的訪問第三放Web服務。但是跨域代理需要在本域的服務器上運行，不僅浪費服務器資源，而且也增加了開發和維護成本。如果我們在編寫Web服務的時候放棄XML作為數據交換格式，而采用JSON（JavaScript Object Notation）數據交換格式，那么將能夠利用動態建立script標簽的方式來規避跨域限制。

2 動態script標簽技術

我們知道，script標簽是屬于HTML標簽，而HTML標簽是沒有跨域限制的。從而我們可以使用script標簽中的src屬性來訪問其他任意域的URL鏈接來獲取數據。

文檔對象模型（DOM，Document Object Model）為我們提供了動態建立script標簽的能力。我們可以在需要的時候使用document.createElement()方法來建立一個script標簽對象，并使用setAttribute()方法來設定它的src、id、type、language等屬性，這樣當我們使用appendChild()方法將這個剛剛建立的script標簽添加到網頁中后，我們就能夠得到這個script標簽src屬性的URL所返回的數據。

3 JSON數據交換格式

Web服務使用XML作為數據交換格式是不能用script標簽訪問Web服務并獲取數據的。但如果Web服務使用JSON作為數據交換格式就不會存在這個問題了。

3.1 JSON的定義

JSON建構于兩種結構：

“名稱/值”對的集合（A collection of name/value pairs）。不同的語言中，它被理解為對象（object），紀錄（record），結構（struct），字典（dictionary），哈希表（hash table），有鍵列表（keyed list），或者關聯數組 （associative array）。

值的有序列表（An ordered list of values）。在大部分語言中，它被理解為數組（array）。

簡單來說，JSON實際上是利用現代編程語言大多支持的一些基本數據結構，例如數組、字符串、對象等。進行抽象而來的一種通用數據表述格式。這使得JSON數據格式在能夠支持這些數據結構的編程語言之間能夠進行數據的交換。

3.2JSON格式舉例

使用XML格式表示一個學生的姓名、學號、成績等信息，可能如下：

＜?xml version=“1.0”?＞

＜students＞

＜student＞

＜name＞張三＜/name＞

＜studentID＞200801＜/studentID＞

＜grade＞80＜/grade＞

＜/student＞

＜student＞

＜name＞李四＜/name＞

＜studentID＞200802＜/studentID＞

＜grade＞90＜/grade＞

＜/student＞

＜/students＞

上述XML轉換為JSON格式表示：

var StudentsJSON = {

student:[

{

name:'張三'，

studentid:200801，

grade:80

}，

{

name:'李四'，

studentid:200802，

grade:90

}

]

}

從上面的例子中我們可以看出，XML和JSON有比較好的對應關系，XML數據可以非常容易的轉換到JSON。事實也正是如此，大多數的XML數據再轉換為JSON的時候都不會有問題。例如在http://www.thomasfrank.se/xml_to_json.html網站中就提供一個自動進行XML to JSON轉換的JavaScript腳本。

3.3 JSON數據的訪問

JSON數據的訪問相對于XML要簡單很多。可以如同JavaScript對象一樣訪問JSON數據。例如在上述JSON數據中，我們要訪問第一個學生的姓名，只要寫：StudentsJSON.student[0].name就可以了。要訪問第二個同學的學號：StudentsJSON.student[1].studentid

4 實例研究

雅虎為我們提供了一個圖片搜索Web服務，URL為：http://search.yahooapis.com/ImageSearchService/V1/imageSearch。這個Web服務支持返回JSON格式數據。該Web服務接受的參數為如下：

只要動態構建該URL并加入動態創建的script標簽中的src屬性中即可獲得Web服務返回的JSON數據。查詢的結果都在ResultSet.Result[0]數組中。

當我們構建好查詢網頁后，可以在本機上用IE或Firefox等瀏覽器直接打開該網頁并測試。

5 實驗結果及比較

可以看到采用動態script標簽技術結合JSON數據交換格式的方法使得跨域訪問Web服務非常的容易。然而在Web服務中使用JSON數據交換格式相對于XML又有那些優缺點呢？下面從五個方面進行分析：

可讀性：JSON和XML的可讀性可謂不相上下，JSON采用常見的語法數據結構，XML使用的是規范的標簽形式。

可擴展性：XML天生有很好的擴展性，而JSON也不遜于XML。

編碼難度：XML有豐富的編碼工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的編碼明顯比XML容易許多，即使不借助工具也能寫出JSON的代碼，可是要寫好XML就不太容易了。

解碼難度：XML的解析得考慮子節點父節點，讓人頭昏眼花，而JSON的解析難度幾乎為0。這一點XML輸的真是沒話說。

流行度：XML已經被業界廣泛的使用，而JSON才剛剛開始，但是在Ajax這個特定的領域，未來的發展也許XML要讓位于JSON。到時Ajax就應該變成Ajaj （Asynchronous JavaScript and JSON）了。

參考文獻

[1]json. json.org. http://www.json.org/json-zh.html

[2]Nicholas C. Zakas. JavaScript高級程序設計. 人民郵電出版社，2006年