Ajax, JSON, DWR 三部曲

今天報告了 Ajax, JSON 和 DWR，三種方法的實做。順便寫到 blog 上。

Ajax 是 Asynchronous JavaScript Technology and XML 的縮寫，其實這並不是新技術，原理只是說，原本寫網頁的時候，都要按下 submit 動作到後端去處理。會讓原本的網頁重新載入以更新資料。現在改成利用 JavaScript 的方式來達成，按下某一個 button 之後，JavaScript 自動把 form 送出去，然後把回覆的資料(XML的格式)以 DHTML 的方式更新頁面。如此，使用者在處理的時候，就不會有畫面閃動的問題。簡而言之，就是利用 XMLHttpRequest + DHTML。

相信有用過 Gmail Web Mail 的使用者應該有很多體會。例如送出邀請函的方塊，輸入邀請函的 mail送出後 ，會把結果顯示在下面，不會整個頁面重新載入。可以節省 Server 的 loading(每次只傳送需要的資料量)。

不過 Gmail 雖然是這樣的架構，但內部實作並不是使用 XML(拆組 XML總是比較麻煩)，而是透過 JSON。JSON 是 JavaScript Object Notation 的縮寫。是 JavaScript 中的 Object 表示法。

像我們若要產生 JavaScript 的物件，會用以下寫法：
var obj = new Object();
obj.a1='abc';
obj.a2=100;
var array1 = new Array(3);
array1[0] = 'a';
array1[1] = 'b';
obj.a3 = array1;

不過，若用 JSON 表示法，則變成如下：
eval('var obj = {"a2":100,"a1":"abc","a3":["a","b"]}');
經過上面執行之後，obj與上個範例的內容是一模一樣的。

JSON for Java 提供了 Java 的 API (3 個 class)，可以產生這些表示法。簡單好用。
透過 JSON，用起來就比 AJAX 中操作 XML 的方式來的簡單許多了。
JSON 並不是為了AJAX而產生，是原本就有的。

其中，必須注意的是，Server端都要正確的設定ContentType與編碼，例如使用req.responseXML取得的資料，要指定ContentType=application/xml，XML裡面宣告編碼，或是使用req.responseText的時候，指定ContentType=text/html;charset=big5。 目前知道在 IE 中若使用req.responseText抓取沒指定編碼的資料，會回報 錯誤而停止。

而最後要介紹的就是 DWR (Direct Web Remoting)了。這是一個 java framework，讓想要達到 AJAX 的效果更加方便，不必知道底層是怎樣運作的，中間層會處理掉所有的細節。
更 妙的是，所有的寫法都可以用 JavaBean 來處理(DWR會透過反射機制將資料組成JavaScript的Object)。若仔細研究裡面的細節，會發現，他並非是用 XML 來當溝通媒介，也沒有使用 JSON 的表示法，而是用剛剛寫的第一種產生 JavaScript Object 的方式。若 DWR 可以使用 JSON 的方式，則溝通的訊息量可以節省一半左右，內部實做的程式也會比較簡單。

今天分別用這三種方式實作購物車程式。
第一種方法最麻煩，資料量也最大，第二種方法寫起來直覺很多，傳輸資料量最少，但要用輔助類別(JSON for Java)。第三種方式的程式最簡短，資料量中等(若底層採用JSON應該可以改良)。

到底 AJAX 實不實用呢？其實這並不是新技術，都是舊有的技術。還是要看需求。
有時候，我們開發的時候，也會想用，有時明明想要撈個小資料，也要把整頁資料送到 Server，回到頁面時，還必須把值都帶出來(當然，若用 Struts，資料帶來帶去的麻煩就減少很多了)。
這時候，也可以用用這些技術。反而讓後端程式好寫許多，前端程式則是一定比一般複雜一點點了。

若不想用一堆有的沒有的 Framework，則可以用 JSON來處理，簡單好用。

參考資料：
● http://java.sun.com/developer/technicalArticles/J2EE/AJAX/index.html
● http://www.crockford.com/JSON/index.html
● http://www-128.ibm.com/developerworks/java/library/j-ajax1/
● http://www-128.ibm.com/developerworks/java/library/j-ajax2/
● http://www-128.ibm.com/developerworks/java/library/j-ajax3/
● http://www.dwr.com/