2 回答

TA貢獻1794條經(jīng)驗 獲得超7個贊
JavaScript能流行,一個很重要的原因是AJAX技術(shù)的應用。在網(wǎng)頁中有很多的應用。舉兩個常見的AJAX應用的例子:
1、 在搜索中,我們輸入關鍵字時,網(wǎng)頁會實時展現(xiàn)搜索結(jié)果;這是用AJAX實現(xiàn)的。
2、 使用地圖時,地圖會根據(jù)用戶顯示的位置不停的更新。這也是通過AJAX實現(xiàn)。
那么什么是AJAX呢?
AJAX全稱為Asynchronous JavaScript And XML直譯就是異步的JavaScript和XML(這里我們主要介紹下JavaScript中AJAX的應用)
通常當JavaScript向服務器發(fā)送請求獲取數(shù)據(jù)時,服務器會返回數(shù)據(jù)。在傳統(tǒng)沒有使用AJAX的網(wǎng)頁中,需要刷新頁面使其重新加載。而AJAX可以使網(wǎng)頁在不重新加載頁面的情況下對網(wǎng)頁的局部進行更新。(比如,當你要放大地圖的時候,你會不斷的向服務器請求地圖當前位置的詳細信息,服務器返回數(shù)據(jù)給你,這里我們并不需要重新加載整個頁面,不然用戶體驗就太差了。而是局部更新頁面。)
由于我不可能在這寫一個地圖這樣復雜的例子,而為了演示AJAX的使用,我借用了秒秒學的一個簡單示例:
// 簡單的AJAX舉例。
// 1: 創(chuàng)建請求變量
var myRequest;
// 瀏覽器的特征檢查。
if (window.XMLHttpRequest) { //若支持,則是火狐、谷歌等瀏覽器。
myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // 若不支持, 則是IE瀏覽器。
myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2: 為請求添加事件處理代碼。
myRequest.onreadystatechange = function(){
console.log("匿名函數(shù)被調(diào)用!");
console.log(myRequest.readyState);
if (myRequest.readyState === 4) {
var p = document.createElement("p");
var t = document.createTextNode(myRequest.responseText);
p.appendChild(t);
document.getElementById("mainContent").appendChild(p);
}
};
// 3: 配置發(fā)送請求
myRequest.open('GET', 'simple.txt', true);
myRequest.send(null);
//....
使用AJAX主要分三部分,如示例中的
1、 創(chuàng)建請求的變量。
在script文件中,首先聲明XMLHttpRequest對象,這也是題主說的Ajax的核心。瀏覽器頁面能通過XMLHttpRequest對象和服務器進行通訊。因為這個對象的創(chuàng)建因瀏覽器的不同而有區(qū)別。所以我們要用if語句判斷XMLHttpRequest是否存在。
2、 為請求添加事件處理代碼
創(chuàng)建好XMLHttpRequest對象后,就可以向服務器發(fā)送請求了,不過我們首先處理服務器響應的事件。當服務器響應后會觸發(fā)myRequest對象的onreadystatechange事件。
在onreadystatechange事件中我們看到myRequest調(diào)用了readyState屬性,readyState有4個值表示目前響應所在的階段,各數(shù)值表示如下:
l 1:請求已經(jīng)建立,但是還沒有發(fā)送(還沒有調(diào)用 send())。
l 2:請求已發(fā)送,正在處理中(通?,F(xiàn)在可以從響應中獲取內(nèi)容頭)。
l 3:請求在處理中;通常響應中已有部分數(shù)據(jù)可用了,但是服務器還沒有完成響應的生成。
l 4:響應已完成;您可以獲取并使用服務器的響應了。
我們一般只關心readyState的值為4的情況,表示響應已完成。
3、 配置發(fā)送請求
使用open方法配置請求。它有三個參數(shù):
1、第一個參數(shù)表示用GET獲取服務器中的數(shù)據(jù)。
2、第二個參數(shù)是一個服務器地址,這里我們用本地的simple.txt代替,省去創(chuàng)建服務器的麻煩。
3、第三個參數(shù)true表示請求是異步的,即當請求發(fā)送后,JavaScript不會為了等待服務器的響應而阻塞,它會繼續(xù)執(zhí)行后續(xù)代碼。
配置好請求后,用send方法發(fā)送請求,這里給send傳遞的參數(shù)是null,若有其它參數(shù)需要發(fā)送,也可以傳遞給send方法。
這樣AJAX的簡單使用例子就說完了,以上示例來自教程網(wǎng)站秒秒學,希望對你有幫助。

TA貢獻1921條經(jīng)驗 獲得超9個贊
AJAX全稱為Asynchronous JavaScript And XML直譯就是異步的JavaScript和XML。
通常當JavaScript向服務器發(fā)送請求獲取數(shù)據(jù)時,服務器會返回數(shù)據(jù)。在傳統(tǒng)沒有使用AJAX的網(wǎng)頁中,需要刷新頁面使其重新加載。而AJAX可以使網(wǎng)頁在不重新加載頁面的情況下對網(wǎng)頁的局部進行更新。
使用AJAX主要分三部分:
1、 創(chuàng)建請求的變量。
2、 為請求添加事件處理代碼。
3、 配置發(fā)送請求。
【AJAX舉例】
12345678910111213141516 | var myRequest; if (window.XMLHttpRequest) { myRequest = new XMLHttpRequest();} else if (window.ActiveXObject) { myRequest = new ActiveXObject( "Microsoft.XMLHTTP" ); } myRequest.onreadystatechange = function (){ console.log( "匿名函數(shù)被調(diào)用!" ); console.log(myRequest.readyState); if (myRequest.readyState === 4) { var p = document.createElement( "p" ); var t = document.createTextNode(myRequest.responseText); p.appendChild(t); document.getElementById( "mainContent" ).appendChild(p);}}; myRequest.open( 'GET' , 'simple.txt' , true ); myRequest.send( null ); |
添加回答
舉報