Ajax：擁抱JSON，讓XML走開

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Ajax：擁抱 JSON，讓XML走開(轉)

無意中看到的，大家共用一下。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ps：正在發帖的我對JSON一竅不通，但願我能經得住它的誘惑。阿彌陀佛、無量天尊、阿門..........ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　Ajax(Asynchronous JavaScript and XML)說到底就是一種瀏覽器非同步讀取伺服器上XML內容的技術。現在的技術凡是跟XML扯上關係，再加上個概念做幌子，就像金裝了一樣，拽得不行。門外的人看得很是熱鬧，門裡的人搖搖頭不外如是。XML呢，跨平台的新潮語言？其實XML＝TXT。XML只是符合很多規範的文本。它本身什麼都不是，只是保存字元的檔案。而瀏覽器非同步讀取的只是伺服器上的常值內容，所以在Ajax開發時完全不必拘泥於XML。[著作權，www.jialing.net] ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　JSON的來曆 ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　XML 的作用是格式化資料內容。如果我們不用XML還有什麼更好的方法嗎？這個答案是JSON。介紹JSON之前我先介紹一下JavaScript這門指令碼語言。指令碼語言自身有動態執行的天賦。即我們可以把想要執行的語句放在字串裡，通過eval()這個動態執行函數來執行。字串裡的內容會像我們寫的指令碼一樣被執行。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　樣本1： 複製內容到剪貼簿 代碼:<HTML>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
<HEAD>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<TITLE>eval example 1</TITLE>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
</HEAD>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
<BODY>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<script>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　str = "alert('hello')";ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　eval(str);ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　</script>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
</BODY>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
</HTML>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　開啟頁面會彈出hello視窗。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　我們可以在字串中放任何指令碼語句，包括聲明語句： 複製內容到剪貼簿 代碼:ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
<HTML>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
<HEAD>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
<TITLE>eval example 2</TITLE>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
</HEAD>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
<BODY>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
<script>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　define = "{name:'Michael',email:'17bity@gmail.com'}";ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　eval("data = "+define);ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　alert("name:"+data.name);ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　alert("email:"+data.email);ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
</script>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
</BODY>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
</HTML> ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　如果我們在後台非同步傳來的文本是JavaScript的聲明語句，那麼不是一條eval方法就能解析了？對於解析複雜的XML，這樣的效率是多麼大的提高啊！ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　現在就來告訴你什麼是JSON：JavaScript Object Notation。我更願意把它翻譯為JavaScript對象聲明。比如要從後台載入一些通訊錄的資訊，如果寫成XML，如下： 複製內容到剪貼簿 代碼:ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
<contact>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<friend>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<name>Michael</name>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<email>17bity@gmail.com</email>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<homepage>http://www.jialing.net</homepage>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　</friend>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<friend>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<name>John</name>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<email>john@gmail.com</email>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<homepage>http://www.john.com/</homepage>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　</friend>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<friend>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<name>Peggy</name>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<email>peggy@gmail.com</email>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　<homepage>http://www.peggy.com/</homepage>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　</friend>ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
</contact> ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
而寫成JSON呢： 複製內容到剪貼簿 代碼:{ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　name:"Michael",ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　email:"17bity@gmail.com",ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　homepage:"http://www.jialing.net"ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
},ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
{ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　name:"John",ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　email:"john@gmail.com",ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　homepage:"http://www.jobn.com"ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
},ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
{ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　name:"Peggy",ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　email:"peggy@gmail.com",ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　homepage:"http://www.peggy.com"ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
}ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　簡單的不只是表達上，最重要的是可以丟棄讓人暈頭轉向的DOM解析了。因為只要符合JavaScript的聲明規範，JavaScrip會自動幫你解析好的。Ajax中使用JSON的基本方法是前台載入後台聲明JavaScript對象的字串，用eval方法來將它轉為實際的對象，最後通過 DHTML更新頁面資訊。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
JSON的格式 ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　JSON的基本格式如下，圖片來自json.org:ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　·對象是屬性、值對的集合。一個對象的開始於"{"，結束於"}"。每一個屬性名稱和值間用":"提示，屬性間用","分隔。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ

ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ

ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　·數組是有順序的值的集合。一個數組開始於"["，結束於"]"，值之間用","分隔。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ

ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ

ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　·值可以是引號裡的字串、數字、true、false、null，也可以是對象或數組。這些結構都能嵌套。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ

ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ

ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　·字串的定義和C或Java基本一致。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ

ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　·數位定義也和C或Java基本一致。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ

ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ

ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
JSON VS XML ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　·可讀性ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　JSON和XML的可讀性可謂不相上下，一邊是建議的文法，一邊是規範的標籤形式，很難分出勝負。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　·可擴充性ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　XML天生有很好的擴充性，JSON當然也有，沒有什麼是XML能擴充，JSON不能的。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　·編碼難度ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　XML有豐富的編碼工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的編碼明顯比XML容易許多，即使不藉助工具也能寫出JSON的代碼，可是要寫好XML就不太容易了。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　·解碼難度ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　XML的解析得考慮子節點父節點，讓人頭昏眼花，而JSON的解析難度幾乎為0。這一點XML輸的真是沒話說。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　·流行度ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　XML已經被業界廣泛的使用，而JSON才剛剛開始，但是在Ajax這個特定的領域，未來的發展一定是XML讓位於JSON。到時Ajax應該變成Ajaj(Asynchronous JavaScript and JSON)了。ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
AJAX並不神秘：揭密各種AJAX控制項和類庫2006-08-14 05:00 作者：出處：動網責任編輯：方舟 ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　Ajax控制項和類庫現在真的太多了，不知不覺中增加了Ajax的神秘性和複雜性，看到版內很多人為此費解和傷神，決定發此貼談談本人對Ajax的觀點，希望能讓大家對Ajax有一個本質的認識。 ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　觀點一：Ajax和伺服器端技術毫不相關 ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　嚴格的說，與傳統web開發相比，Ajax是完完全全的用戶端技術。由於很多控制項封裝了用戶端和伺服器端的通訊過程，因此很多問題也因通訊而起。事實上，不論何種Ajax技術，伺服器端都是返回的一個純文字流，再由用戶端來處理這個文本。這段文本可以是xml格式，也可以是一個Html片段，也可以是一段JavaScript指令碼，或者僅是一個字串。伺服器端僅僅是作為一個資料介面，用戶端使用XMLHttpRequest對象來請求這個頁面，伺服器端在頁面內寫入結果文本，這個過程和普通的web開發沒有任何區別。所不同的只是，用戶端在非同步擷取結果後，不是直接顯示在頁面，而是由用戶端的Javascript指令碼處理後再顯示在頁面。至於各種控制項所謂的能返回DataSet對象，Date對象，或者其他的資料類型，都是封裝了這個處理過程的結果。 ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　觀點二：DOM模型是Ajax最本質的技術 ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　之所以沒有把XMLHttpRequest列為最本質的技術，因為本人覺得它實在是太簡單了，它只是可以讓瀏覽器在後台請求一個頁面，並將其內容交給JavaScript處理。真正的核心應該是：DOM模型，即文件物件模型。在DOM模型裡，Html標記都被認為是一個對象，例如：div對象，table對象等等。DOM模型就規定了這些對象所具有的屬性、方法和事件。通過這些性質，可以對一個已經顯示於瀏覽器的頁面進行內容的修改，例如增加節點、修改節點位置，刪除節點等等。而不僅僅是一個innerHTML 屬性這麼簡單，雖然這是一個很有用的屬性。 ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　觀點三：在使用Ajax控制項前理解它們的實現 ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　使用Ajax控制項的確可以提高效率，但如果你空中樓閣般使用控制項，那就得不償失了。從一個控制項換到另外一個控制項又會有一個漫長的學習曲線。所以應該從底層瞭解其，況且Ajax實在不是什麼高深的技術。其實任何東西的最底層其實都是簡單的，但如果封裝了這些底層的東西，事情會變得複雜和難以理解。以Asp.net為例，它的定製特性可以使得只要在方法前加上[ajax method]類似這樣的標誌就可以稱為一個非同步方法呼叫，相信這使得Asp.net的Ajax開發顯得更加“高效”或者是“神秘”，而更多的事情則被封裝了。同樣記住一條，任何對伺服器端的請求僅僅是返回純文字，我們不一定要依賴於封裝好的處理過程，而完全可以自己來實現。 ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　觀點四：學好JavaScript ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　在大多數人看來，JavaScript總不是那麼一種正規的語言，隨便copy一段就碰巧能運行，學過c之類的人，一看也能看懂，而且在瀏覽器中常常有指令碼錯誤提示，所以潛意識覺得總不能付之以大任。事實上，要學好Ajax，這就完全是一種錯誤的看法。javascript作為一種指令碼語言，其文法的確不是很嚴格，但並不妨礙其完成諸多複雜的任務，沒有JavaScript，就沒有Ajax。所以本人強烈建議，學Ajax前，一定要好好研究一番JavaScript，一般來講，如果能順利看懂prototype架構的代碼（如：prototype-1.3.1.js），你的JavaScript水平就基本過關了。同時對DOM模型也可以算有一個基本的瞭解。 ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　觀點五：Ajax點綴：CSS ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ
　　用JavaScript控制CSS其實很簡單，基本上每個DOM對象都有一個style對象，只要把css屬性裡的"-"去掉，並讓隨後的字母變為大寫就可以作為屬性使用了，例如：element.style.backgroundColor="#f00";在css是：選擇符 {background-color:#f00}ÚN&&dotbWwww.cnntec.comÚÄ¢Yæu%OÖ

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More