2007年11月1日 星期四

Ajax 不可不知的核心物件 XMLHttpRequest

Ajax (Asynchronous JavaScript and XML) 由 HTML、JavaScript 技術、DHTML 和 DOM 組成,JavaScript 是在 Client 端所執行的程式,並無法直些與 Server 端的資料庫溝通。但是 Ajax 的主要精神就是在頁面不 Reload,或者跳頁的情況下對 Server 端的資料庫進行溝通。這時候我們就必須用到 JavaScript 的一個物件 XMLHttpRequest。

XMLHttpRequest 是 Ajax 應用程式的核心,透過 XMLHttpRequest 物件 JavaScript 便可以與伺服器進行對話。這個物件對剛要開始碰觸 Ajax 的人應該有些陌生,如果你會寫 PHP、ColdFusion 那麼應該對 curl、cfhttp 很熟悉,其實 XMLHttpRequest 的功能與其是差不多的。

這樣來說好了 XMLHttpRequest 就是在幫助 JavaScript 模擬一個隱形的瀏覽器,透過 HTTP 的方式去拜訪 Server 端的程式,所以我們需要給它所要拜訪程式的網址,同樣的我們也可以傳送 GET、POST 的參數給 Server 端的程式。當 Server 端的程式執行完成後便會回傳頁面呈現結果給 XMLHttpRequest。

但是 PHP、ColdFusion 是 Server 端執行的程式,其 AP Server 會負責確定所請求的服務不管執行結果是如何,回應完成了沒有。然而 JavaScript 卻是在 Client 端所執行的程式,所以並不會有人幫你確定這點,這部份就必須要我們自己來做了。

當我們運用 XMLHttpRequest 對 Server 端請求服務的時便進入一個迴圈,會不段回傳 HTTP 就緒狀態,其狀態如下︰

0 : 請求未初始化。
1 : 請求已經建立,但是還沒有發送。
2 : 請求已發送,正在處理中。
3 : 請求在處理,但是伺服器還沒完成回應。
4 : 回應已完成。

每種瀏覽器會有些差異,但這可以不必過於擔心,我們只需要最後回傳 HTTP 就緒狀態為 4﹙回應已完成﹚的結果,這部份在各瀏覽器是一致的。

接下來我們還需要注意的是在不同瀏覽器 JavaScript 程式的用法有很大的部份是不同的,說穿了其實就是只有微軟的 IE 跟人家不同,這裡也會遇到同樣的問題。在 Firefox 與其它瀏覽器我們是用 XMLHttpRequest 這個物件沒有錯,而 IE 並沒有這個物件存在而是用一個叫做 ActiveXObject 的物件,後續用法其實是一樣的。

到這裡我一直沒有提到 XMLHttpRequest 真正實際的用法,如果你還有興趣了解更多,請參閱相關閱讀內的資料。

相關閱讀︰
developerWorks 中国: 掌握 Ajax 系列
developerWorks 中国: Ajax 資源中心

沒有留言: