AJAX 關(guān)鍵詞：
JavaScript腳本和可擴(kuò)展標(biāo)記語(yǔ)言(XML)
WEB瀏覽器技術(shù)
開(kāi)放式WEB標(biāo)準(zhǔn)
瀏覽器以及獨(dú)立平臺(tái)
更好更快的網(wǎng)絡(luò)應(yīng)用程序
XML以及HTTP請(qǐng)求
AJAX = 異步JavaScript和可擴(kuò)展標(biāo)記語(yǔ)言
AJAX是一種運(yùn)用JavaScript和可擴(kuò)展標(biāo)記語(yǔ)言(XML)，在網(wǎng)絡(luò)瀏覽器和服務(wù)器之間傳送或接受數(shù)據(jù)的技術(shù)。
AJAX是一種瀏覽器技術(shù)
AJAX是一種運(yùn)用于瀏覽器中的技術(shù)。在瀏覽器和服務(wù)器之間，它使用異步數(shù)據(jù)進(jìn)行轉(zhuǎn)換，并允許網(wǎng)頁(yè)向服務(wù)器索取少量信息而非整個(gè)網(wǎng)頁(yè)。
這項(xiàng)技術(shù)標(biāo)志著網(wǎng)絡(luò)應(yīng)用程序的微小化、迅捷化以及便捷化。
AJAX是一種不需依靠服務(wù)器軟件而獨(dú)立運(yùn)做的瀏覽器技術(shù)。
AJAX是基于公共標(biāo)準(zhǔn)的
AJAX基于以下一些公共標(biāo)準(zhǔn)：
XML 可擴(kuò)展標(biāo)記語(yǔ)言
HTML 超文本標(biāo)記語(yǔ)言
CSS 層疊樣式表
運(yùn)用于ALAX的公共標(biāo)準(zhǔn)被很好的定義并且得到一些主要的常用瀏覽器支持。ALAX應(yīng)用程序是獨(dú)立的瀏覽器和平臺(tái)（交互平臺(tái)，交互瀏覽器技術(shù)）。
AJAX事關(guān)更好的網(wǎng)絡(luò)應(yīng)用程序
網(wǎng)絡(luò)應(yīng)用程序比單機(jī)應(yīng)用程序有更多的好處，它能符合更多用戶(hù)的需求，更易安裝且方便支持和擴(kuò)展。
然而，網(wǎng)絡(luò)應(yīng)用程序并非總是像單機(jī)應(yīng)用程序一樣好使喚。
而運(yùn)用AJAX，網(wǎng)絡(luò)應(yīng)用程序?qū)⒆兊馗鼘?shí)用（更小、更快、更易于使用）。
今天就開(kāi)始使用AJAX吧！
無(wú)需學(xué)習(xí)新的知識(shí)。
AJAX是基于公共標(biāo)準(zhǔn)的。這些標(biāo)準(zhǔn)已經(jīng)被大多數(shù)開(kāi)發(fā)人員使用多年。
大多數(shù)現(xiàn)存的網(wǎng)絡(luò)應(yīng)用程序可以用AJAX進(jìn)行重新編寫(xiě)以取代傳統(tǒng)的超文本標(biāo)記語(yǔ)言方式。
AJAX使用可擴(kuò)展語(yǔ)言和HTTP請(qǐng)求
傳統(tǒng)的網(wǎng)絡(luò)應(yīng)用程序會(huì)將輸入的信息提交給服務(wù)器（使用HTML表單）。在服務(wù)器通過(guò)代碼后，將會(huì)把一個(gè)全新的完整的頁(yè)面?zhèn)魉徒o用戶(hù)。
由于用戶(hù)每次提交輸入信息的時(shí)候服務(wù)器都將傳回一個(gè)新的頁(yè)面，傳統(tǒng)的網(wǎng)絡(luò)應(yīng)用程序通常運(yùn)行緩慢且使用不便。
使用AJAX，網(wǎng)頁(yè)應(yīng)用程序能不經(jīng)重新下載整個(gè)網(wǎng)頁(yè)就發(fā)送并重新獲得數(shù)據(jù)。這是通過(guò)發(fā)送HTTP請(qǐng)求和使用JS對(duì)網(wǎng)頁(yè)進(jìn)行部分修改來(lái)實(shí)現(xiàn)的。
聯(lián)系服務(wù)器的較好的方式是發(fā)送像可擴(kuò)展標(biāo)記語(yǔ)言這樣的數(shù)據(jù)（其他的方法也可以采用）。
你將在這篇引論的下一章節(jié)更多地了解到這一切是如何做到的。
AJAX實(shí)例
AJAX可以用來(lái)創(chuàng)建更多交互式的網(wǎng)絡(luò)應(yīng)用程序。
AJAX 實(shí)例
在以下的AJAX范例中，我們將了解到當(dāng)用戶(hù)以網(wǎng)頁(yè)格式輸入數(shù)據(jù)時(shí)一個(gè)網(wǎng)頁(yè)是如何與網(wǎng)絡(luò)服務(wù)器連接的。
在下面的框中輸入姓名 *實(shí)際操作請(qǐng)前往W3Schools
First Name:
Suggestions:
實(shí)例解析-超文本標(biāo)記語(yǔ)言模式
以上的范例所含超文本標(biāo)記語(yǔ)言代碼如下：
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form><p>Suggestions: <span id="txtHint"></span></p>
就如你看到的，它只是一個(gè)普通的表單，里面有一稱(chēng)為"txt1"的輸入框
下一段包括了一個(gè)稱(chēng)做“txtHint”的SPAN。這個(gè)SPAN是用來(lái)存儲(chǔ)從服務(wù)器重新獲得的信息的。
當(dāng)用戶(hù)輸入數(shù)據(jù)，名為“showHint()”的函數(shù)將被執(zhí)行。這個(gè)函數(shù)的執(zhí)行是由“onkeyup”事件觸發(fā)的。換種說(shuō)法：每當(dāng)用戶(hù)在txt1區(qū)域內(nèi)觸動(dòng)鍵盤(pán)按鈕，showHint的功能就被執(zhí)行。
實(shí)例解析- showHint()函數(shù)
showHint()函數(shù)是一種位于HTML頂端的簡(jiǎn)單的JS函數(shù)。
函數(shù)包含以下代碼：
function showHint(str)
{
if (str.length > 0)
{
var url="gethint.asp?sid="+Math.random()+"&q="+str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
}
else
{
document.getElementById("txtHint").innerHTML=""
}
}
每當(dāng)有字符被鍵入輸入?yún)^(qū)內(nèi)就會(huì)執(zhí)行這個(gè)函數(shù)
如有字符被輸入文字輸入?yún)^(qū)(str.length>0)函數(shù)就執(zhí)行：
建立一個(gè)XMLHTTP對(duì)象
發(fā)送一個(gè)HTTP請(qǐng)求到服務(wù)器上的"gethint.asp"上
當(dāng)HTTP觸發(fā)一次變動(dòng)則XMLHTTP對(duì)象就會(huì)執(zhí)行stateChanged()函數(shù)
實(shí)例解析 - stateChanged()函數(shù)
stateChanged()函數(shù)包含以下代碼：
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
每當(dāng)XMLHTTP對(duì)象的狀態(tài)發(fā)生改變stateChanged()函數(shù)就會(huì)被執(zhí)行
當(dāng)狀態(tài)改變?yōu)?(或?yàn)?quot;完成"),txtHint span里就會(huì)顯示反饋的文字
AJAX源代碼
AJAX 實(shí)例 - AJAX 源碼
下面的源代碼是前一個(gè)頁(yè)面的。你可以將它復(fù)制并粘貼，自己來(lái)嘗試。
AJAX HTML頁(yè)面
這是一個(gè)HTML網(wǎng)頁(yè)。它包括了一個(gè)簡(jiǎn)單的HTML表單和關(guān)聯(lián)JS的link
<html>
<head>
<script src="clienthint.js"></script>
</head><body><form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form><p>Suggestions: <span id="txtHint"></span></p> </body>
</html>The JavaScript code is listed below.
JS代碼在下面
AJAX 的 JS
這是JS代碼，被保存在"clienthint.js"文件中
var xmlHttp
function showHint(str)
{
if (str.length > 0)
{
var url="gethint.asp?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
}
else
{
document.getElementById("txtHint").innerHTML=""
}
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject(handler)
{
var objXmlHttp=null
if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesnt work in Opera")
return;
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}
AJAX 服務(wù)端頁(yè)面
服務(wù)端頁(yè)面被JS所調(diào)遣，是一名為"gethint.asp"的ASP文件，頁(yè)面是用VBS來(lái)針對(duì)IIS所寫(xiě)的。它可以被輕松的寫(xiě)成PHP或是一些其他的服務(wù)語(yǔ)言，它只是檢查了名字組并將相吻合的名字返回給客戶(hù)端：
dim a(30)
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
q=request.querystring("q")if len(q)>0 then
hint=""
for i=1 to 30
x1=ucase(mid(q,1,len(q)))
x2=ucase(mid(a(i),1,len(q)))
if x1=x2 then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
新聞熱點(diǎn)
疑難解答
圖片精選
