一泌绣、Ajax技術(shù)簡介
Ajax（Asynchronous JavaScript and XML阿迈，異步JavaScript和XML），Ajax 不是新的編程語言待逞，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法嗤无。
Ajax 最大的優(yōu)點(diǎn)是在不重新加載整個頁面的情況下怜庸，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容嚎卫。Ajax 不需要任何瀏覽器插件担扑，但需要用戶允許JavaScript在瀏覽器上執(zhí)行。
Ajax本身是一門綜合性的技術(shù)，其主要應(yīng)用包含了HTML、JavaScript鹤盒、XML秦驯、DOM洛心、XMLHttpRequest等頁面技術(shù)词身，但是在這之中最重要的就是XMLHttpRequest對象户辫。
Ajax技術(shù)并不只依賴于Java
Ajax技術(shù)并不是只能在Java中使用奥额，現(xiàn)在的各個動態(tài)Web實現(xiàn)技術(shù)触菜，如PHP、ASP.NET都已經(jīng)很好的支持了Ajax技術(shù)切威。
二犬缨、XMLHttpRequest對象
在Ajax中主要是通過XMLHttpRequest對象處理發(fā)送異步請求和回應(yīng)的，所有現(xiàn)代瀏覽器（IE7+截酷、Firefox三热、Chrome念搬、Safari 以及 Opera）均支持 XMLHttpRequest對象（IE5 和 IE6 使用 ActiveXObject）。如果要創(chuàng)建一個XMLHttpRequest對象則必須使用JavaScript。
為了應(yīng)對所有的現(xiàn)代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest對象魂务。如果支持相艇，則創(chuàng)建 XMLHttpRequest 對象咙轩。如果不支持，則創(chuàng)建 ActiveXObject ：
<script>
var xmlHttp;
function createXMLHttp() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
// IE 內(nèi)核的瀏覽器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
XMLHttpRequest對象中定義了的屬性：
readState一共有5中取值：
- 0：請求沒有發(fā)出（在調(diào)用open()函數(shù)之前）累颂。
- 1：請求已經(jīng)建立但還沒有發(fā)出（在調(diào)用send()函數(shù)之前）。
- 2：請求已經(jīng)發(fā)出正在處理之中（這里通常可以從響應(yīng)得到內(nèi)容頭部）篇裁。
- 3：請求已經(jīng)處理黍聂，正在接受服務(wù)器的信息产还，響應(yīng)中通常有部分?jǐn)?shù)據(jù)可用，但是服務(wù)器還沒有完成響應(yīng)脐区。
- 4：響應(yīng)已經(jīng)完成，可以訪問服務(wù)器響應(yīng)并使用它也糊。
XMLHttpRequest對象中的方法：
XMLHttpRequest對象的open()和send()方法在回調(diào)函數(shù)中出現(xiàn)比較多慷妙，一般都會用open()方法設(shè)置一個提交的路徑膝擂，并通過地址重寫的方式設(shè)置一些請求的參數(shù)，而真正的發(fā)出請求操作可以通過send()方法完成屏鳍。
如果是POST方法則需要在send()內(nèi)傳入數(shù)據(jù)
GET 還是 POST？
與 POST 相比穿挨，GET 更簡單也更快厉萝，并且在大部分情況下都能用。
然而，在以下情況中前弯，請使用 POST 請求：
- 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
- 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
- 發(fā)送包含未知字符的用戶輸入時惠险，POST 比 GET 更穩(wěn)定也更可靠
三、第一個Ajax程序
請求一個靜態(tài)頁面
<!DOCTYPE HTML>
<html>
<head>
<title>JSP page</title>
<script>
var xmlHttp;
function createXMLHttp() {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
// IE 內(nèi)核的瀏覽器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function showMsg() {
createXMLHttp();
xmlHttp.open("POST", "content.htm");
xmlHttp.onreadystatechange = showMsgCallback;
xmlHttp.send(null);
}
function showMsgCallback() {
if (xmlHttp.readyState == 4) { // 數(shù)據(jù)返回完畢
if (xmlHttp.status == 200) { // HTTP操作正常
//接收返回的內(nèi)容
var text = xmlHttp.responseText;
//設(shè)置使用的CSS樣式表
//document.getElementById("msg").className = "樣式表名稱";
document.getElementById("msg").innerHTML = text;
}
}
}
</script>
</head>
<body>
<input type="button" onclick="showMsg()" value="調(diào)用Ajax顯示內(nèi)容">
<span id="msg"></span>
</body>
</html>
如需獲得來自服務(wù)器的響應(yīng)抒线，請使用XMLHttpRequest 對象的 responseText 或 responseXML屬性班巩。
onreadystatechange 事件
當(dāng)請求被發(fā)送到服務(wù)器時，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)嘶炭。
每當(dāng) readyState 改變時抱慌，就會觸發(fā) onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息眨猎。
下面是 XMLHttpRequest 對象的三個重要的屬性：
在 onreadystatechange 事件中抑进，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時所執(zhí)行的任務(wù)。
當(dāng) readyState 等于 4 且狀態(tài)為 200 時睡陪，表示響應(yīng)已就緒：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
注意： onreadystatechange 事件被觸發(fā) 5 次（0 - 4）寺渗，對應(yīng)著 readyState 的每個變化匿情。
