AJAX，即"Asynchronous JavaScript And XML"的縮寫，可翻譯為非同步JavaScript及XML技術。其核心是一個寄宿在瀏覽器中名為XMLHTTPRequest的類。通過此類，可以做到無需提交表單就可以實現與伺服器的串連；無需重新整理整個頁面，就可以動態更新頁面中一部分的內容。XMLHTTPRequest通常使用XML作為資料交換的載體，但也可使用其他的載體，如純文字。簡單來說，就是通過XMLHTTPRequest發送資訊給伺服器，非同步接收伺服器處理並返回資訊，然後通過JavaScript動態更新頁面的部分內容。
儘管AJAX近來非常火爆，但AJAX並非新的技術，正如其名所示，只不過是JavaScript加上XML的技術罷了。而且使用上非常簡單。
應用AJAX的流程：
1、定義一個事件處理器
2、擷取XMLHTTPRequest，並將事件處理器註冊給它
3、與伺服器串連
4、發送資訊
5、伺服器返回處理完畢的資訊
6、每當XMLHTTPRequest的狀態發生變化，自動觸發事件處理器
7、事件處理器動態更新頁面
本文通過一個簡單的例子來說明如何在IE6中使用AJAX技術。在這例子中，用戶端每隔十秒，從伺服器端取回一個隨機的字串，在不重新重新整理頁情況下，自動更新部分頁面內容。例子僅用到了兩個jsp檔案，client.jsp及server.jsp。為了方便說明，我用server.jsp來代替本應作為Servlet的Server.java。
先看client.jsp內容：
<%@page contentType="text/html"%>
<%@page pageEncoding="gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AJAX Demo</title>
<script language="JavaScript">
var xmlHttp;
function getGiftFromServer() {
var url = "http://localhost:8084/ajax/server.jsp";
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = showGift;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
setTimeout("getGiftFromServer()",10000);
}
function showGift() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
document.getElementById("output").innerHTML = "Time is for " + xmlHttp.responseText + ".";
}
}
</script>
</head>
<body onload="getGiftFromServer()">
<h1>AJAX例子</h1>
<div id="output"></div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
