AJAX 实例

在以下的AJAX范例中，我们将了解到当用户以网页格式输入数据时一个网页是如何与网络服务器连接的。

实例解析-超文本标记语言模式

 
First Name:

Suggestions:

就如你看到的，它只是一个普通的表单，里面有一称为"txt1"的输入框

下一段包括了一个称做“txtHint”的SPAN。这个SPAN是用来存储从服务器重新获得的信息的。

当用户输入数据，名为“showHint()”的函数将被执行。这个函数的执行是由“onkeyup”事件触发的。换种说法：每当用户在txt1区域内触动键盘按钮，showHint的功能就被执行。

Example Explained - The showHint() Function
实例解析- 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里就会显示反馈的文字