[ AJAX介紹 ]
Ajax是使用用戶端指令碼與Web伺服器交換資料的Web應用開發方法。Web頁面不用打斷互動流程進行重新加裁,就可以動態地更新。使用Ajax,使用者可以建立接近本地案頭應用的直接、高可用、更豐富、更動態Web使用者介面。
非同步Javascrīpt和XML(AJAX)不是什麼新技術,而是使用幾種現有技術——包括階層式樣式表(CSS)、Javascrīpt、XHTML、XML和可擴充樣式語言轉換(XSLT),開發外觀及操作類似案頭軟體的Web應用軟體。
[ AJAX執行原理 ]
一個Ajax互動從一個稱為XMLHttpRequest的Javascrīpt對象開始。如同名字所暗示的,它允許一個用戶端指令碼來執行HTTP請求,並且將會解析一個XML格式的伺服器響應。Ajax處理過程中的第一步是建立一個XMLHttpRequest執行個體。使用HTTP方法(GET或POST)來處理請求,並將目標URL設定到XMLHttpRequest對象上。
當你發送HTTP請求,你不希望瀏覽器掛起並等待伺服器的響應,取而代之的是,你希望通過頁面繼續響應使用者的介面互動,並在伺服器響應真正到達後處理它們。要完成它,你可以向XMLHttpRequest註冊一個回呼函數,並非同步地派發XMLHttpRequest請求。控制權馬上就被返回到瀏覽器,當伺服器響應到達時,回呼函數將會被調用。
[ AJAX實際應用 ]
1. 初始化Ajax
Ajax實際上就是調用了XMLHttpRequest對象,那麼首先我們的就必須調用這個對象,我們構建一個初始化Ajax的函數:
/**
* 初始化一個xmlhttp對象
*/
function InitAjax()
{
var ajax=false;
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
ajax = false;
}
}
if (!ajax && typeof XMLHttpRequest!=''undefined'') {
ajax = new XMLHttpRequest();
}
return ajax;
}
你也許會說,這個代碼因為要調用XMLHTTP組件,是不是只有IE瀏覽器能使,不是的經我實驗,Firefox也是能使用的。
那麼我們在執行任何Ajax操作之前,都必須先調用我們的InitAjax()函數來執行個體化一個Ajax對象。
2. 使用Get方式
現在我們第一步來執行一個Get請求,加入我們需要擷取 /show.php?id=1的資料,那麼我們應該怎麼做呢?
假設有一個連結:<a href="/show.php?id=1">新聞1</a>,我點該連結的時候,不想任何重新整理就能夠看到連結的內容,那麼我們該怎麼做呢?
//將連結改為:
<a href="#" ōnClick="getNews(1)">新聞1</a>
//並且設定一個接收新聞的層,並且設定為不顯示:
<div id="show_news"></div>
同時構造相應的Javascrīpt函數:
function getNews(newsID)
{
//如果沒有把參數newsID傳進來
if (typeof(newsID) == ''undefined'')
{
return false;
}
//需要進行Ajax的URL地址
var url = "/show.php?id="+ newsID;
//擷取新聞顯示層的位置
var show = document.getElementById("show_news");
//執行個體化Ajax對象
var ajax = InitAjax();
//使用Get方式進行請求
ajax.open("GET", url, true);
//擷取執行狀態
ajax.onreadystatechange = function() {
//如果執行是狀態正常,
<