AJAX 實例
為了幫助您理解AJAX 的工作原理,我們創建了一個小型的AJAX 應用程序:
AJAX 實例解析
上面的AJAX 應用程序包含一個div 和一個按鈕。
div 部分用於顯示來自服務器的信息。 當按鈕被點擊時,它負責調用名為loadXMLDoc() 的函數:
<!DOCTYPE html>
<html>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
<html>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
接下來,在頁面的head 部分添加一個<script> 標籤。 該標籤中包含了這個loadXMLDoc() 函數:
<head>
<script>
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>
<script>
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>
下面的章節會為您講解AJAX 的工作原理。