【JavaScript】AJAX總結(異步JavaScript和XML)


AJAX介紹

通過 AJAX,你可以創建更好、更快以及更友好的 WEB 應用程序。

AJAX 基於 JavaScript 和 JavaScript的XMLHttpRequest對象。

AJAX 應用程序獨立於瀏覽器和平台,是瀏覽器端技術非服務器端.

AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸(HTTP 請求),這樣就可使網頁從服務器請求少量的信息,而不是整個頁面。 

它可以實現在不重載頁面的情況下, 比如:用戶名注冊檢測、動態load或創建某塊內容。

AJAX 使用 Http 請求

傳統的HTTP請求,是每當用戶提交輸入后服務器都會返回一張新的頁面,可有時我們需要的只是更新部分頁面. 

XMLHttpRequest對象:

通過使用 XMLHttpRequest 對象,web 開發者可以做到在頁面已加載后從服務器更新頁面! 

用戶可以停留在同一個頁面,他不會注意到腳本在后台請求過頁面,或向服務器發送過數據。 服務器處理完后會回傳結果然后更新頁面。

基礎語法

var xmlHttp;
function createXmlHttp() {
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}//使用ActiveXObject,其他瀏覽器使用XMLHttpRequest內建對象

XMLHttpRequest對象三個屬性

onreadystatechange 屬性

存有處理服務器響應的函數xmlHttp.onreadystatechange=function() { // 我們需要在這里寫一些代碼 }

readyState 屬性

存有服務器響應的狀態信息。每當 readyState 改變時,onreadystatechange后面的函數就會被執行。


responseText 屬性

可以通過 responseText 屬性來取回由服務器返回的數據。
xmlHttp.onreadystatechange = function() { 
//服務器的HTTP狀態碼==200即響應成功
if(xmlHttp.readyState==4 && xmlHttp.status==200) {
// 從服務器的response獲得數據
alert(xmlHttp.responseText);
} else{document.getElementById(“div1”).innerHTML=“<img src=‘loadding.gif’/>”
}
}

向服務器發送一個請求

要想把請求發送到服務器,我們就需要使用 open() 方法和 send() 方法。

open() 方法:

第一個參數定義發送請求所使用的方法(GET 還是 POST)。第二個參數規定服務器端腳本的 URL。第三個參數規定應當對請求進行異步地處理。

send() 方法:

可將請求送往服務器。如:

xmlHttp.open("GET","time.jsp?username=tom",true); 
xmlHttp.send(null);

完整代碼 (校驗用戶名唯一性)

//校驗用戶名唯一性
function NameOnly(){
//alert(1);
createXmlHttp();
var username = document.getElementById("username").value;
var url = "http://192.168.8.4:8080/reg.jsp?username=" + username + "&date=" + new Date();
//當對象的狀態發生改變,就執行一次回調函數
//alert(22);
//alert(url);
xmlHttp.onreadystatechange = function(){
//alert(xmlHttp.readyState);
if(xmlHttp.readyState == 4) {//代表服務器已經處理完該請求
//alert(xmlHttp.status);
//if(xmlHttp.status==200 || xmlHttp.status==0) {//狀態碼==200 代表狀態碼是正常的(404 500不正常)
//如果在本地運行(如:C:\\ajax\\ helloworld.htm),那么status屬性不管是在”成功”還是”頁面未找到”的情況下,都返回的是0。
//也就是說沒有通過Web服務器形式的Ajax請求返回值都是0;
//alert(22);
var msg = xmlHttp.responseText; //獲取服務器端的響應文本
if(msg==1){alert("被注冊!!");}
else alert("該賬號可以注冊");
xmlHttp.responseXml();//如果服務器端返回的是xml文檔
//}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com