AJAX Format & Parsing

經歷了前面兩章，大家瞭解到 AJAX 是可接收 Server 所 Response 的任何文字。第一部份我們將介紹主要的幾種 Format、第二部分針對 JSON 的 Parsing 做比較詳盡的介紹

AJAX Formats

HTML

最懶的方法莫過於直接 Response HTML，如我一開始所示範的範例，是直接從 Server 端傳回一段 Select Box 的原始碼。

  • 好處 : 不需 Parse 、速度最快。
  • 壞處 : 沒有辦法重複利用、讓 Client 端自己決定所需要的格式

目前不常見到有人直接用 HTML 做 Response，所以這邊也不會鼓勵大家使用。

XML

在網路上最常見的資料格式莫過於 XML 了 ( RSS 範例 )

  • 好處 : 標準資料傳遞格式，有良好結構、可重複利用。
  • 壞處 : 若用 Javascript 直接 Parse 會消耗許多 DOM 的資源，所以 Parse 的效率較差，可能也需要一些 Parse 的 Library 以達到 Browser Compatible。

使用 XML 時，建議盡量利用 PHP 先進行一次 Parse 的動作成 JSON，效能會比較好。

Javascript Array

在 JSON 還沒有出現之前，有些人會輸出成 Javascript Array 以方便 Js 做解析，如下面的這段 Response 是在 Yahoo! 關鍵字搜尋廣告

  • 好處 : 可跨網域存取 (External Javascript)，因本身是 Js 物件、解析速度較快，可重複利用。
  • 壞處 : 缺乏結構

因為「缺乏結構」這個致命性的缺點，頂多只能算是在 JSON 被提倡前的過渡性方式。

JSON

JSON 的全名是 JavaScript Oriented Notation，講簡單點，它其實就是 Javascript 的物件，我們可以用 {} 來表示一個物件，我們可以利用這樣物件的格式來描述一份資料（下面以會員資料為例）：

  • 好處：可跨網域（External Javascript）、有結構、速度快（本身是 Js 物件）、可重複利用、不需要找任何的 Parse Library、ECMAScript 標準（可用在許多程式語言）
  • 壞處：

    JSON的問題：(感謝 James 的提供)
    1. 如果return 回來的東西不符合格式，會比較不容易找到格式上的問題 ( compared with XML )。
    2. 如果return回來的內容是具有破壞性的，而JSON是用eval來動態產生最後結構，這樣可能會使最後eval的結果跟預期的不同。( like SQL Injection )
    3.結構上的組成比較不readible ( compared with XML )，看起來就是一堆的{}, []組成的，而且需要對部分的內容作escape, ex/ \\，實際上會造成除錯的複雜度。

建議所有的 AJAX Response 都採用此格式，前端工程師的後續維護成本及效率才會最好。

隨堂作業

請利用 JSON 格式、列出你的 Team Members，要有 English Name 及 Chinese Name 兩個欄位，至少三人。

回到最上層

JSON

Parsing (Workshop)

在這邊我們要用 Step By Step 的方式針對 JSON 做 Parse，希望各位都能在最短時間內學會利用 Javascript 去 Parse JSON

範例目標

按了一個鈕後、把 ipod 的搜尋結果給吐出來，欄位至少要有標題跟描述，也必須要有連結

Step 1. 準備好資料來源的檔案 ( 範例檔 | 下載 )

這裡的範例檔是我以 JSON 整理了 Yahoo Search 對 ipod 的搜尋結果，我們就拿這個來當作是我們的資料檔案。

進行簡單的資料分析，我們所要的資料放在 ResultSet.Result，每一筆資料都是 Result 陣列中的一個物件。所以應該是 ResultSet.Result[0],ResultSet.Result[1],ResultSet.Result[2]...

我們要的欄位有 Title, Summary, Url 等三個，例如 ResultSet.Result[0].Title 就可以抓出第一筆資料的 Title

Step 2. 撰寫 Client 端的 HTML 與 Javascript

當然一樣是用 Connection Manager 做 AJAX 的 Request，我們先把整份文件的架構勾畫出來。

Step 3. eval() 將字串轉換為物件！

Javascript 中有一個非常重要的 function 叫 eval()，可以幫你轉換成適合的型別。

不管 Server Response 傳回哪一種格式，Javascript 一律將之視為字串。我們可以用 eval() 這個內建函式將字串轉換為 Javascript 物件。

Step 4. 整理成 HTML 字串

接著我們就可以以物件的方式 (Object.Object.Object) 取得我們所需要的各個欄位

Step 5. AJAX 一定要有 http://

我們常會利用 EditPlus 按一下 Ctrl + B，但是 AJAX 是一定要在 HTTP 協定之下的喔！

Step 6. 效能最佳化

不管是哪種程式語言、程式設計師一定知道字串的串接是非常浪費資源的，所以我們要利用陣列的方式取代字串串接的方式。

回到最上層

Regular Expression

相關連結

JSON.org

Douglas Crockford 提倡 JSON，讓這個格式大紅特紅，從這邊也可以看到很多的相關資源

回到最上層