時下流行的Ajax並不是新技術，它只是一些老技術的組合，這一點你可以從它的英文全稱上瞭解到，Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的縮寫，也即非同步JavaScript和XML。
要瞭解Ajax的工作原理，下列技術必須掌握：
- （1）HTML 用於建立 Web 表單並確定應用程式其他部分使用的欄位。
- （2）JavaScript 代碼是運行 Ajax 應用程式的核心代碼，協助改進與伺服器應用程式的通訊。
- （3）DHTML 或 Dynamic HTML，用於動態更新表單。我們將使用
div、span 和其他動態超文字標記語言 元素來標記 HTML。
- （4）文件物件模型 DOM 用於（通過 JavaScript 代碼）處理 HTML 結構和（某些情況下）伺服器返回的 XML。
1，Ajax中要用到的最主要的JavaScript對象是XMLHttpRequest對象，這個對象是一切應用Ajax技術編寫代碼的最基本對象，也是最重要的對象，不同的瀏覽器下建立該對象的方法是不一樣的，所以在做網頁開發的時候必須建立能在通用瀏覽器上啟動並執行XMLHttpRequest對象，下面是建立該對象的代碼<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script> 2，建立對象後，需要開啟請求，一般採用get方式var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true); 3，指定回調方法request.onreadystatechange = updatePage; 4，發送請求request.send(null); 5，回調方法，處理伺服器響應function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML = response[1].replace(/\n/g, "");
} else
alert("status is " + request.status);
}
}最後匯總一下上面寫的JavaScript代碼<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText.split("|");
document.getElementById("order").value = response[0];
document.getElementById("address").innerHTML = response[1].replace(/\n/g, " ");
} else
alert("status is " + request.status);
}
}
</script>按照上述五個步驟，就可以實現ajax非同步傳輸的局部重新整理，非常簡單。。。
