AJAX 实例解析-优快云博客

本文介绍了一个 AJAX 的实际应用案例，展示了如何通过 HTML 和 JavaScript 实现动态数据加载。该示例包括一个简单的 HTML 表单，当用户输入文本时，会触发 AJAX 请求，从而获取并显示建议内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX Example - AJAX Source
AJAX 实例 - AJAX 源码

The source code below belongs to the AJAX example on the previous pages.
下面的源代码是前一个页面的。

You can copy and paste it, and try it yourself.
你可以将它复制并粘贴，自己来尝试。

The AJAX HTML Page
AJAX HTML页面

This is the HTML page. It contains a simple HTML form and a link to a JavaScript.
这是一个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代码在下面

The AJAX JavaScript
AJAX 的 JS

This is the JavaScript code, stored in the file "clienthint.js":
这是JS代码，被保存在"clienthint.js"文件中

var xmlHttp

function showHint(str)
{
if (str.length==0)
{ 
document.getElementById("txtHint").innerHTML=""
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
var url="gethint.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 
} 

function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

The AJAX server page is explained in the next chapter.
有关AJAX服务器端页面的解释放在下一篇中。

AJAX代码

AJAX Example - AJAX SourceAJAX 实例 - AJAX 源码

The AJAX HTML PageAJAX HTML页面

The AJAX JavaScriptAJAX 的 JS

AJAX Example - AJAX Source
AJAX 实例 - AJAX 源码

The AJAX HTML Page
AJAX HTML页面

The AJAX JavaScript
AJAX 的 JS