AJAX學習筆記 01

放長假總算有時間玩AJAX了，
簡單來說就是利用JavaScript和XMLHttpRequest進行要求和取得的動作。
說的好像很簡單，實際作起來才發現這要用在那裡？個人網站用到AJAX的地方似乎不多，
大概只能用在留言版、討論區那部份吧。本來想說將頁面存成XML或者是JSON來排版輸出，
不過不如一個簡單頁面實用。 (而且搜尋引擎也比較容易搜尋的到)

今天主要將IE 6以前使用的ActiveXObject和Mozilla, Opera, IE7等原生的XMLHttpRequest整合。
利用var o = new XMLHttpRequestClip(); 就可以方便產生新實體。
想了一下這個實體應該可以重複利用，坊間很多範例每作一次動作生成一個新實體，
感覺有點浪費和佔用資源，於是拜讀了 UGiA.CN 的建一个XMLHttpRequest对象池 文章觀念，
利用陣列存放這些實體，不管是剛使用完的、正在用的，還是還沒生成的。
感覺像社區提供的公物器材一般，人人可用，用完歸還給下一個人使用的觀念。
我稱他為 Clip (彈夾)啦。

再來利用Object的觀念替這個物件加了不少屬性和方法進去，比方說setParameters()，
基本上包裝起來方便用就是了。傳入參數Array可以自動生成查詢字串，還算方便。
最後就是open()和設定Callback函式，我另外自設了一個OnError會跑的函式，可以作多些掌握。

然後把JSON.org提供的parseJSON()加進來，這樣屬於自己的函式就大功告成，可以實驗一番。
主要使用JSON而不用XML是因為XML DOM不太好操作，既然JSON是JavaScript來的，搭配用很方便。

完成了屬於自己的XMLHttpRequestClip()，馬上看看使用方法：

var o = new XMLHttpRequestClip('./trip.php');
var arrParams = []; // 欲傳入參數
arrParams['key'] = document.getElementById('oTripcode').value;
o.setParameters('POST', arrParams); // 設定送出方式及參數
o.open(ShowTrip, ShowError); // 要求後同時設定回叫及捕捉錯誤函式

其中function ShowTrip(txt)就是要求成功後會回叫的函式，
我寫好會自動傳txt參數，也就是objxmlhttp.responseText，這樣就可以直接取用。
如果要求失敗(例如404 Not Found)，則會呼叫function ShowError()，簡單秀出提示動作失敗。

拿來做個簡單的範例，這是2ch Trip線上即時計算：Online Tripper
此範例同時示範Clip的功效，同時雙線程要求，只會有兩個物件且重複使用。
也將搭配的原始碼包一包好了(10/12更新)：ajax01_tripper.zip

10/12追記：
終於找出IE發神經的地方，因為js檔是UTF-8語系而網頁是Shift-JIS語系 (我用日文語系模式)
因為UTF-8某些字元到了s-jis下看一定會變樣，導致整個JS解析錯誤。
Mozilla Firefox和Opera則會自動判斷的模樣，所以沒問題。