張小P 過生活

什麼是 AJAX

我這邊不詳細說明什麼是 AJAX。AJAX 就是利用 Javascript、CSS、DOM、XML、XMLHTTPRequest 等技術合成的一個程式技巧，主要目的是要讓 Web 上的程式看起來更像 Desktop 的程式。

Framework 或 Library

正因為 AJAX 結合了很多不同的技術，所以撰寫起來還真有一點困難，因此，很快網路上就出現了很多 Framework 或是 Library 讓你可以輕易把 AJAX 寫好。

其中比較有名的如：

• Prototype
• SAJAX
• DOJO
• Microsoft Atlas (還沒有 Release)

我今天就要以 Prototype 為例子寫一個範例。

先前往測試

程式說明

這一個範例程式，主要就是讓使用者輸入一個郵遞區號（3 碼或是 5 碼），如果這個郵遞區號存在，就回傳該郵遞區號的地點。

需求

1. Prototype.js http://prototype.conio.net/
2. 郵遞區號表 前往郵局下載
3. 熟悉 PHP
4. 熟悉 Javascript
5. 熟悉 CSS
6. 熟悉 XHTML

詳細說明

這個程式主要分成三個部分，查詢郵遞區號程式、AJAX 主程式、CSS 檔。

查詢郵遞區號程式，我是使用 PHP 寫成，傳入 zip ，然後開啟 zip32.txt (郵遞區號檔案)，逐行查詢，3 碼的話只要回傳縣市、鄉鎮區，而且只有一個。五碼的話，會有很多結果，全部都回傳。如果，完全沒有相符的郵遞區號，僅僅回傳 "\n"

程式碼如下

第二部分就是 AJAX 主程式，在說明主程式之前，先跟大家介紹幾個 Prototype 的函數。

• $('ID') ，$()這個函數會回傳 DOM 該 ID 的 element 回來。這樣可以讓你更方便去 Access。
• $F('ID')，$F() 這個 Fuction 會回傳 FORM 裡面，該 ID 的 Element。
• Ajax.Request() 這一個 Function 是 AJAX 的主要靈魂，他會去你指定的 URL 讀取資料，當完成的時候會透過你指定的 Call-Back Function 去執行接下來的動作。

當使用者在 zip 那個 input box 按了按鍵之後，就會去執行 checkZip，如果使用者輸入的字串已經 >=3 就可以去後端查詢。

查詢就是利用前面說的 AJAX_Request 函數，並且指定 Callback function 為 ShowResult。當後端查詢完成後，Prototype 就會去執行 ShowResult 並且傳入整個後端擷取的結果，我只要判斷長度是不是 > 2 ，我就可以知道，剛剛查詢的 zip 到底正不正確，如果正確，只要把整個值填到 zipResult 這個 Div 裡面就可以了。

而其中 LIMG 這個 Div 主要是用來顯示是否在執行後端資料庫（圖檔是連到 http://ql.aonic.net/loader.gif），並沒有特別用途。

第三部分就是 CSS

整個程式大概就是這樣。

後記

這一次我已經調整到 Firefox 跟 IE 都可以使用，而且看起來也差不多，不過，Firefox 對 CSS  的解釋真的跟 IE 有差，我也不敢說誰對誰不對，畢竟這些差異都是原本 CSS 沒有定義的。不過為了讓兩個看起來都一樣，實在蠻痛苦的。

如果，你對這個程式有興趣，歡迎你下載研究，我的程式完全沒有版權問題，你高興怎麼弄就怎麼弄。

但是我 Package 裡面的以下兩個檔案是例外：

• zip32.txt 是郵局提供下載的，非本人所提供。我只是把格式稍微轉換一下，其版權屬中華郵政所有。
• prototype.js 屬於 Sam Stephenson 所撰寫，並非本人所撰寫，所有權力屬於他。

http://gaislab.cs.ccu.edu.tw/~htchang/ajax/zip.tgz

如果你真的下載了，還希望你留個言讓我知道，這樣我看了也比較高興，有任何問題也歡迎在這裡提出來。

您可能有興趣的文章：

嘉義、台北、嘉義

我怎麼又被排在第三天的 Session

當助教真悲哀

Bangalore, India 我來了