上一篇提到作者在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);});