|
AJAX、AJAX实例及AJAX源代码（asp）(2) 下一段包括了一个称做“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=""
| 
