AJAX 關鍵詞：
javascript指令碼和可延伸標記語言 (XML)(XML)
WEB瀏覽器技術
開放式WEB標準
瀏覽器以及獨立平台
更好更快的網路應用程式
XML以及HTTP請求
AJAX = 非同步JavaScript和可延伸標記語言 (XML)
AJAX是一種運用JavaScript和可延伸標記語言 (XML)(XML)，在網路瀏覽器和伺服器之間傳送或接受資料的技術。
AJAX是一種瀏覽器技術
AJAX是一種運用於瀏覽器中的技術。在瀏覽器和伺服器之間，它使用非同步資料進行轉換，並允許網頁向伺服器索取少量資訊而非整個網頁。
這項技術標誌著網路應用程式的微小化、迅捷化以及便捷化。
AJAX是一種不需依靠伺服器軟體而獨立運做的瀏覽器技術。
AJAX是基於公用標準的
AJAX基於以下一些公用標準：
XML 可延伸標記語言 (XML)
HTML 超文字標記語言 (HTML)
CSS 層疊樣式表
運用於ALAX的公用標準被很好的定義並且得到一些主要的常用瀏覽器支援。ALAX應用程式是獨立的瀏覽器和平台（互動平台，互動瀏覽器技術）。
AJAX事關更好的網路應用程式
網路應用程式比單機應用程式有更多的好處，它能符合更多使用者的需求，更易安裝且方便支援和擴充。
然而，網路應用程式並非總是像單機應用程式一樣好使喚。
而運用AJAX，網路應用程式將變地更實用（更小、更快、更便於使用）。
今天就開始使用AJAX吧！
無需學習新的知識。
AJAX是基於公用標準的。這些標準已經被大多數開發人員使用多年。
大多數現存的網路應用程式可以用AJAX進行重新編寫以取代傳統的超文字標記語言 (HTML)方式。
AJAX使用可擴充語言和HTTP請求
傳統的網路應用程式會將輸入的資訊提交給伺服器（使用HTML表單）。在伺服器通過代碼後，將會把一個全新的完整的頁面傳送給使用者。
由於使用者每次提交輸入資訊的時候伺服器都將傳回一個新的頁面，傳統的網路應用程式通常運行緩慢且使用不便。
使用AJAX，網頁應用程式能不經重新下載整個網頁就發送並重新獲得資料。這是通過發送HTTP請求和使用JS對網頁進行部分修改來實現的。
聯絡伺服器的較好的方式是發送像可延伸標記語言 (XML)這樣的資料（其他的方法也可以採用）。
你將在這篇引論的下一章節更多地瞭解到這一切是如何做到的。
AJAX執行個體
AJAX可以用來建立更多互動網路應用程式。
AJAX 執行個體
在以下的AJAX範例中，我們將瞭解到當使用者以網頁格式輸入資料時一個網頁是如何與網路伺服器串連的。
在下面的框中輸入姓名 *實際操作請前往W3Schools
First Name:
Suggestions:
執行個體解析-超文字標記語言 (HTML)模式
以上的範例所含超文字標記語言 (HTML)代碼如下：
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form><p>Suggestions: <span id="txtHint"></span></p>
就如你看到的，它只是一個普通的表單，裡面有一稱為"txt1"的輸入框
下一段包括了一個稱做“txtHint”的SPAN。這個SPAN是用來儲存從伺服器重新獲得的資訊的。
當使用者輸入資料，名為“showHint()”的函數將被執行。這個函數的執行是由“onkeyup”事件觸發的。換種說法：每當使用者在txt1地區內觸動鍵盤按鈕，showHint的功能就被執行。
執行個體解析- showHint()函數
showHint()函數是一種位於HTML頂端的簡單的JS函數。
函數包含以下代碼：
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=""
}
}
每當有字元被鍵入輸入區內就會執行這個函數
如有字元被輸入文字輸入區(str.length>0)函數就執行：
建立一個XMLHTTP對象
發送一個HTTP請求到伺服器上的"gethint.asp"上
當HTTP觸發一次變動則XMLHTTP對象就會執行stateChanged()函數
執行個體解析 - stateChanged()函數
stateChanged()函數包含以下代碼：
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
每當XMLHTTP對象的狀態發生改變stateChanged()函數就會被執行
當狀態改變為4(或為"完成"),txtHint span裡就會顯示反饋的文字
AJAX原始碼
AJAX 執行個體 - AJAX 源碼
下面的原始碼是前一個頁面的。你可以將它複製並粘貼，自己來嘗試。
AJAX HTML頁面
這是一個HTML網頁。它包括了一個簡單的HTML表單和關聯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 服務端頁面
服務端頁面被JS所調遣，是一名為"gethint.asp"的ASP檔案，頁面是用VBS來針對IIS所寫的。它可以被輕鬆的寫成PHP或是一些其他的服務語言，它只是檢查了名字組並將相吻合的名字返回給用戶端：
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
