來撰寫您第一個AJax程式，使用非同步的方式向伺服端取得文字檔案，並加以顯示，首先請準備一個Html網頁：
<!DOCTYPE html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN">
<Html>
<head>
<meta content="text/Html; charset=Big5" http-equiv="content-type">
<title>Hello! AJax! Examples...</title>
<script type="text/Javascript" src="HelloAJaxEx-1.JS"></script>
</head>
<body>
<center><input value="AJax請求" type="button"></center>
</body>
</Html>
這個Html網頁會取得Javascript檔案，而按下按鈕後，會執行startRequest()函式，JavaScript檔案如下所示：
var XMLHttp;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function startRequest() {
createXMLHttpRequest();
XMLHttp.onreadystatechange = handleStateChange;
XMLHttp.open("GET", "HelloAJaxEx-1.txt");
XMLHttp.send(null);
}
function handleStateChange() {
if(XMLHttp.readyState == 4) {
if(XMLHttp.status == 200) {
alert("伺服端回應：" + XMLHttp.responseText);
}
}
}
在startRequest()中會建立XMLHttpRequest，並發出非同步請求取得HelloAjaxEx-1.txt，在當中只是簡單的文字訊息，注意如果當中要撰寫中文，則文字檔案必須儲存為UTF8，假設HelloAJaxEx1.txt如下撰寫：
這是非同步請求的回應文字
您可以按下 鏈結 來觀看結果。
您可以結合DOM來顯示取得的回應文字，不必使用對話方塊或重清（Refresh）網頁，例如在網頁中設定一個<div>：
<!DOCTYPE html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN">
<Html>
<head>
<meta content="text/Html; charset=Big5" http-equiv="content-type">
<title>Hello! AJax! Examples...</title>
<script type="text/Javascript" src="HelloAJaxEx-2.JS"></script>
</head>
<body>
<center>
<input value="AJax請求" type="button">
<br>
<div id="response"></div>
</center>
</body>
</Html>
而HelloAJaxEx-2.JS可以改寫如下：
var XMLHttp;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function startRequest() {
createXMLHttpRequest();
XMLHttp.onreadystatechange = handleStateChange;
XMLHttp.open("GET", "HelloAJaxEx-2.txt");
XMLHttp.send(null);
}
function handleStateChange() {
if(XMLHttp.readyState == 4) {
if(XMLHttp.status == 200) {
document.getElementById("response").innerHtml =
XMLHttp.responseText;
}
}
}
在這邊為了簡化範例，直接使用DOM物件的innerHtml屬性，您可以按 鏈結 觀看結果。