Ajax教程實例詳解

什么是 AJAX

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

AJAX 不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。

AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù)，在不重新加載整個頁面的情況下(AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù))。

通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。

傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個網(wǎng)頁面。

XMLHttpRequest 對象

Ajax的核心是JavaScript對象XmlHttpRequest

<script type="text/javascript">
function createXHR(){
var xhr = null;
try {
// Firefox, Opera .+, Safari，IE+
xhr = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer 
try {
xhr = new ActiveXObject("Msxml.XMLHTTP");
}
catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
xhr = null;
}
}
}
return xhr;
}
</script> 

XMLHttpRequest對象用法

XMLHttpRequest對象有兩個重要方法 open與send

在使用XMLHttpRequest對象時要調(diào)用的第一個方法是open方法，調(diào)用方式：XMLHttpRequest.open(“get”,”default.aspx”,true); 這段代碼會針對default.aspx頁面發(fā)送get請求，關(guān)于這段代碼有三點需要注意：

1. URL是相對于當(dāng)前頁面的路徑，也可以使用絕對路徑

2. 調(diào)用open方法并不會真正的發(fā)送請求，而是初始化一個請求準(zhǔn)備發(fā)送

3. 只能向同一個域中使用相同協(xié)議和端口的URL發(fā)送請求，否則會因為安全原因報錯

要想把請求發(fā)往服務(wù)器需要調(diào)用send方法，send方法接受一個參數(shù)，參數(shù)是請求主體要發(fā)送的數(shù)據(jù)，如果不需要發(fā)送數(shù)據(jù)則傳入null，在調(diào)用send方法之后請求被發(fā)往服務(wù)器，如下

xhr.send(null);

請求發(fā)往服務(wù)器，服務(wù)器根據(jù)請求生成響應(yīng)（Response），傳回給XHR對象，在收到響應(yīng)后相應(yīng)數(shù)據(jù)會填充到XHR對象的屬性，有四個相關(guān)屬性會被填充：

1. responseText：作為響應(yīng)主體被返回的文本

2. responseXML：如果響應(yīng)內(nèi)容的類型是”text/xml”或”application/xml”，這個屬性將保存包含著相應(yīng)數(shù)據(jù)的XML文檔

3. status：響應(yīng)的HTTP狀態(tài)（200,404,500等）

4. statusText：HTTP狀態(tài)說明

onreadystatechange 事件

當(dāng)請求被發(fā)送到服務(wù)器時，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。

每當(dāng) readyState 改變時，就會觸發(fā) onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

在 onreadystatechange 事件中，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時所執(zhí)行的任務(wù)。

當(dāng) readyState 等于 4 且狀態(tài)為 200 時，表示響應(yīng)已就緒：

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState== && xmlhttp.status==)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
} 

我們可以在接受響應(yīng)之前調(diào)用abort方法取消異步請求：XMLHttpRequest .abort();

注意：

在使用XMLHttpRequest對象的send()方法時，如果使用的是get請求或者不需要發(fā)送數(shù)據(jù)的post請求時，需要使用send(null);

如果想要發(fā)送數(shù)據(jù)數(shù)據(jù)，則需要使用post請求，先使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

以上內(nèi)容是小編給大家介紹的Ajax教程實例詳解，希望對大家有所幫助！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com