Ajax实现类似google搜索下拉框提示功能(4/4)

下面的例子将为您演示当用户在输入框中键入字符时，网页如何与 web 服务器进行通信。

本示例包括2个文件。分别为showhint.html和ShowHintServlet。

以下是详细代码：

showhint.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>showhint.html</title>
<Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<Meta http-equiv="description" content="this is my page">
<Meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="javascript" type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function doRequest(){
createXMLHttpRequest();
var url = "servlet/ShowHintServlet?q=" + document.getElementById("email").value + "&timeStamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
document.getElementById("hintBox").innerHTML = xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
请输入你的手机号码:
<input type="text" name="email" id="email" onkeyup="doRequest()" />
<div id="hintBox"></div>
</body>
</html>

ShowHintServlet代码

猜你在找的Ajax相关文章