AJAX和回撥函式
AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。
通過 AJAX，JavaScript 無需等待伺服器的響應，而是：
- 在等待伺服器響應時執行其他指令碼
- 當響應就緒後對響應進行處理
AJAX - 建立 XMLHttpRequest 物件
xmlhttp=newXMLHttpRequest();
AJAX - 向伺服器傳送請求請求
如需將請求傳送到伺服器，我們使用 XMLHttpRequest 物件的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();
方法
| 描述 | |
|---|---|
| open(method,url,async) |
規定請求的型別、URL 以及是否非同步處理請求。
|
| send(string) |
將請求傳送到伺服器。
|
AJAX - 伺服器 響應
如需獲得來自伺服器的響應，請使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。| 屬性 | 描述 |
|---|---|
| responseText | 獲得字串形式的響應資料。 |
| responseXML | 獲得 XML 形式的響應資料。 |
AJAX - onreadystatechange 事件
請求被髮送到伺服器時，我們需要執行一些基於響應的任務。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態資訊。
下面是 XMLHttpRequest 物件的三個重要的屬性：
| 屬性 | 描述 |
|---|---|
| onreadystatechange | 儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。 |
| readyState |
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
|
| status | 200: "OK" 404: 未找到頁面 |
在 onreadystatechange 事件中，我們規定當伺服器響應已做好被處理的準備時所執行的任務。
當 readyState 等於 4 且狀態為 200 時，表示響應已就緒例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執行程式碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改該文字內容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內容</button>
</body>
</html>使用回撥函式
回撥函式是一種以引數形式傳遞給另一個函式的函式。（黃色部分應該為回撥函式）
（wiki上的解釋：In , acallback is any
executable code that is passed as an
argument to other code, which is expected to call back (execute) the argument at a given time. This execution may be immediate as in asynchronous callback, or it might happen at a later time as in anasynchronous callback.）
如果您的網站上存在多個 AJAX 任務，那麼您應該為建立 XMLHttpRequest 物件編寫一個標準的函式，併為每個 AJAX 任務呼叫該函式。
該函式呼叫應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次呼叫可能不盡相同）
因為可以把呼叫者與被呼叫者分開，所以呼叫者不關心誰是被呼叫者。它只需知道存在一個具有特定原型和限制條件的被呼叫函式。（在這裡呼叫的是myFunction,被呼叫的是loadXMLDoc）
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 程式碼
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 程式碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改文字內容</h2></div>
<button type="button" onclick="myFunction()">修改內容</button>
</body>
</html>