本文介绍如何利用XMLHttpRequest对象实现网页的部分内容更新而无需重新加载整个页面。通过一个具体的示例展示了如何在用户输入时实时获取并展示服务器返回的数据。
所有现代的浏览器都支持 XMLHttpRequest 对象。
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据
<html>
<head>
<script type="text/javascript">
xmlHttp=null;
function showHint(str)
{
if (str.length==0)
{
//输入为空时显示空。
document.getElementById("txtHint").innerHTML="";
return;
}
try
{
//创建异步调用对象（现代浏览器适用）
xmlHttp=new XMLHttpRequest();
}
catch(e)
{
try
{
//创建老式浏览器异步调用
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
}
//请求地址，Math.random();去随机数，防止url每次请求一样而是异步调用失效
url="/ajax/gethint.asp?q=" + str;
url=url+"&sid="+Math.random();
xmlHttp.open("GET",url,false);
xmlHttp.send(null);
//xmlHttp.responseText; 接收异步调用结果
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
</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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
