健壯的AJAX源碼學(xué)習(xí)應(yīng)用示例
更新時間:2006年09月17日 00:00:00 作者:
本示例主要演示如何操作XMLHttpRequest.....
XMLHttpRequest 簡介
要真正實(shí)現(xiàn)這種絢麗的奇跡,必須非常熟悉一個 JavaScript 對象,即 XMLHttpRequest。這個小小的對象實(shí)際上已經(jīng)在幾種瀏覽器中存在一段時間了,它是本專欄今后幾個月中要介紹的 Web 2.0、Ajax 和大部分其他內(nèi)容的核心。為了讓您快速地大體了解它,下面給出將要用于該對象的很少的幾個 方法和屬性。
open():建立到服務(wù)器的新請求。
send():向服務(wù)器發(fā)送請求。
abort():退出當(dāng)前請求。
readyState:提供當(dāng)前 HTML 的就緒狀態(tài)。
responseText:服務(wù)器返回的請求響應(yīng)文本。
客戶端HTML代碼:
<script language="javascript" type="text/javascript">
var xmlHttp = false;
try {
xmlHttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlHttp = false;
}
}
}
if (!xmlHttp)
alert("Error initializing XMLHttpRequest!");
function getCustomerInfo() {
var phone = document.getElementById("qq").value;
var url = "demo2.asp?qq=" + escape(phone);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send(null);
}
function updatePage() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var response = xmlHttp.responseText.split("|");
document.getElementById("message").innerHTML = '號碼是:' + response[0] + '<br>姓名是:' + response[1] + '<br>性別是:' + response[2] + '<br>職務(wù)是:' + response[3];
alert("響應(yīng)服務(wù)完成!");
}
else if (xmlHttp.status == 404) {
alert('請求的網(wǎng)址不存在!');
}
else {
alert('錯誤:錯誤代碼為:' + xmlHttp.status);
}
}
}
</script>
<input id="qq" type="text" onchange="getCustomerInfo()" />
<div id="message">請嘗試輸入我的QQ號碼:178010108,會看到返回的詳細(xì)資料.</div>
服務(wù)端程序代碼:
<%
Response.ContentType = "text/xml"
Response.CharSet = "GB2312"
if request("qq") = "178010108" then
response.write "178010108|阿里西西|男|ASP技術(shù)"
else
response.write "這個QQ號碼是空號哦"
end if
%>
XMLHttpRequest 簡介
要真正實(shí)現(xiàn)這種絢麗的奇跡,必須非常熟悉一個 JavaScript 對象,即 XMLHttpRequest。這個小小的對象實(shí)際上已經(jīng)在幾種瀏覽器中存在一段時間了,它是本專欄今后幾個月中要介紹的 Web 2.0、Ajax 和大部分其他內(nèi)容的核心。為了讓您快速地大體了解它,下面給出將要用于該對象的很少的幾個 方法和屬性。
open():建立到服務(wù)器的新請求。
send():向服務(wù)器發(fā)送請求。
abort():退出當(dāng)前請求。
readyState:提供當(dāng)前 HTML 的就緒狀態(tài)。
responseText:服務(wù)器返回的請求響應(yīng)文本。
客戶端HTML代碼:
復(fù)制代碼 代碼如下:
<script language="javascript" type="text/javascript">
var xmlHttp = false;
try {
xmlHttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlHttp = false;
}
}
}
if (!xmlHttp)
alert("Error initializing XMLHttpRequest!");
function getCustomerInfo() {
var phone = document.getElementById("qq").value;
var url = "demo2.asp?qq=" + escape(phone);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send(null);
}
function updatePage() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var response = xmlHttp.responseText.split("|");
document.getElementById("message").innerHTML = '號碼是:' + response[0] + '<br>姓名是:' + response[1] + '<br>性別是:' + response[2] + '<br>職務(wù)是:' + response[3];
alert("響應(yīng)服務(wù)完成!");
}
else if (xmlHttp.status == 404) {
alert('請求的網(wǎng)址不存在!');
}
else {
alert('錯誤:錯誤代碼為:' + xmlHttp.status);
}
}
}
</script>
<input id="qq" type="text" onchange="getCustomerInfo()" />
<div id="message">請嘗試輸入我的QQ號碼:178010108,會看到返回的詳細(xì)資料.</div>
服務(wù)端程序代碼:
復(fù)制代碼 代碼如下:
<%
Response.ContentType = "text/xml"
Response.CharSet = "GB2312"
if request("qq") = "178010108" then
response.write "178010108|阿里西西|男|ASP技術(shù)"
else
response.write "這個QQ號碼是空號哦"
end if
%>
相關(guān)文章
AJAX驗(yàn)證數(shù)據(jù)庫內(nèi)容并將值顯示在頁面
光標(biāo)離開文本框,在本頁面的相應(yīng)地方獲取數(shù)據(jù)庫中改值所對應(yīng)的其他數(shù)據(jù),相應(yīng)的實(shí)現(xiàn)代碼如下,感興趣的朋友可以看看2014-08-08用ajax實(shí)現(xiàn)預(yù)覽鏈接可以看到鏈接的內(nèi)容
用CSS設(shè)置預(yù)覽彈出窗口的樣式、用JavaScript進(jìn)行服務(wù)器請求并且顯示彈出窗口,需要的朋友可以參考下2014-08-08不使用XMLHttpRequest對象實(shí)現(xiàn)Ajax效果的方法小結(jié)
這篇文章主要介紹了不使用XMLHttpRequest對象實(shí)現(xiàn)Ajax效果的方法,結(jié)合具體實(shí)例形式分析了三種不使用XMLHttpRequest對象實(shí)現(xiàn)Ajax功能的相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-07-07Axios和Ajax的區(qū)別是什么(詳細(xì)介紹)
ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新,axios實(shí)現(xiàn)了對ajax的封裝,axios有的ajax都有,ajax有的axios不一定有,總結(jié)一句話就是axios是ajax,ajax不止axios,本文對Axios和Ajax的區(qū)別是什么給大家講解的非常詳細(xì),需要的朋友一起看看吧2023-10-10js結(jié)合json實(shí)現(xiàn)ajax簡單實(shí)例
這篇文章主要為大家詳細(xì)介紹了js結(jié)合json實(shí)現(xiàn)ajax簡單實(shí)例的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05Ajax bootstrap美化網(wǎng)頁并實(shí)現(xiàn)頁面的加載刪除與查看詳情
Bootstrap是Twitter推出的一個開源的用于前端開發(fā)的工具包,Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范,它即是由動態(tài)CSS語言Less寫成。下面通過本文給大家介紹Ajax bootstrap美化網(wǎng)頁并實(shí)現(xiàn)頁面的加載刪除與查看詳情,需要的朋友可以參考下2017-03-03AJAX實(shí)現(xiàn)仿Google Suggest效果
AJAX實(shí)現(xiàn)仿Google Suggest效果...2007-07-07