Ragic 部落格
企業電子化的專家 Ragic 教你如何利用各種軟體、
雲端服務讓公司快速升級!
加入 Ragic 企業電子化的行列!
雲端工作術
各類應用示範
案例故事
逃離惡夢
關於 Ragic
Facebook Twitter YouTube
雲端資料庫
部落格
關於Ragic
雲端工作術
各類應用示範
案例故事
逃離惡夢
關於 Ragic

最簡單的AJAX架構

作者:Jeff Kuo

上一篇提到作者在Javascript上比較不喜歡使用Library,也提到了幾個主要的原因。這時候有些朋友就問了:那都不用Library或 Framework,要怎麼作AJAX呢?因此在這邊我介紹一下作者最熟悉、最常用,也應該算是最簡單的一個AJAX架構吧!

AJAX最 主要的目的就是在不需要重新整理畫面的前提下,跟Server抓取資料,並且根據從Server抓的資料來更新變數和畫面。而在比較舊的瀏覽器版本時代, 作者都是使用iframe或是更早的隱藏的frame來達到這樣效果。而在比較新的瀏覽器版本中,都有提供這樣功能的物件,只要利用以下的一個 function,就可以在各種瀏覽器中,取得用HTTP跟Server溝通的物件。

function getHTTPObject() {

var xmlhttp=false;

if(window.XMLHttpRequest) {

try {xmlhttp = new XMLHttpRequest();}

catch(e) {xmlhttp = false;}

}else if(window.ActiveXObject) {

try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}

catch(e) {

try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}

catch(e) {xmlhttp = false;}

}

}

return xmlhttp;

}

那 Server要傳什麼東西回來給瀏覽器呢?我通常有兩種作法:最簡單的方式就是直接產生一段Javascript回來給Client執行,可能是用 document.getElementById抓取畫面上某個物件來修改他的內容,也可以是呼叫一些已經寫好的函式。

我通常會把這樣的 動作包成一個簡單的小函式如下:

function read(url,func,sync){

var _reader=getHTTPObject();

_reader.open(\'GET\',file,!sync);

if(!sync){

_reader.onreadystatechange = function(){

if(_reader.readyState==4){

if(func) func(_reader);

}

}

}

_reader.send(null);

if(sync) {

if(func) func(_reader);

}

}

未來要做任何AJAX動作只要傳入要呼叫的一個網址,然後傳入用來處理Server回傳值,例如直接eval回傳的Javascript,就完成了一個 AJAX的呼叫!而所有用到的程式碼沒有多少行,相信花個幾分鐘就可以瞭解,就不再需要用到一堆沒時間去瞭解,出了問題不知道怎麼修的程式碼囉!

read(‘server.jsp’,function(res){eval(res.responseText);});

部落格背後使用 Ragic! : 最強大的 No Code 企業電子化工具
把資料放在Excel上不只是拖累團隊的行政效率,他也很容易出錯並且無法進行任何內控。
當您的團隊成長時,使用Excel管理資料就會越來越痛苦。
建立你們的第一個雲端資料庫!

馬上註冊
免費試用 Ragic!

用 Google 帳號註冊

立即科技 Ragic, Inc.
02-7728-8692
台北市中正區南昌路二段81號9樓