也談Ajax技術(異步JavaScript和XML)

時下流行的Ajax并不是新技術，它只是一些老技術的組合，這一點你可以從它的英文全稱上了解到，Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的縮寫，也即異步JavaScript和XML。

要了解Ajax的工作原理，下列技術必須掌握：

（1）HTML 用于建立 Web 表單并確定應用程序其他部分使用的字段。
（2）JavaScript 代碼是運行 Ajax 應用程序的核心代碼，幫助改進與服務器應用程序的通信。
（3）DHTML 或 Dynamic HTML，用于動態更新表單。我們將使用 div、span 和其他動態 HTML 元素來標記 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(//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(//g, " ");
} else
alert("status is " + request.status);
}
}
</script>

按照上述五個步驟，就可以實現ajax異步傳輸的局部刷新，非常簡單。

轉自：http://www.cnblogs.com/gisland/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈