下面的例子将为您演示当用户在输入框中键入字符时，网页如何与 web 服务器进行通信。
本示例包括2个文件。分别为showhint.html和ShowHintServlet。
以下是详细代码：
showhint.html
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
@H_404_25@ - <html>
@H_404_25@ - <head>
@H_404_25@ - <title>showhint.html</title>
@H_404_25@ -
@H_404_25@ - <Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
@H_404_25@ - <Meta http-equiv="description" content="this is my page">
@H_404_25@ - <Meta http-equiv="content-type" content="text/html; charset=UTF-8">
@H_404_25@ -
@H_404_25@ - <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
@H_404_25@ - <script language="javascript" type="text/javascript">
@H_404_25@ - var xmlHttp;
@H_404_25@ - function createXMLHttpRequest(){
@H_404_25@ - if(window.ActiveXObject){
@H_404_25@ - xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
@H_404_25@ - }else if(window.XMLHttpRequest){
@H_404_25@ - xmlHttp = new XMLHttpRequest();
@H_404_25@ - }
@H_404_25@ - }
@H_404_25@ -
@H_404_25@ - function doRequest(){
@H_404_25@ - createXMLHttpRequest();
@H_404_25@ - var url = "servlet/ShowHintServlet?q=" + document.getElementById("email").value + "&timeStamp=" + new Date().getTime();
@H_404_25@ - xmlHttp.onreadystatechange = handleStateChange;
@H_404_25@ - xmlHttp.open("GET",url,true);
@H_404_25@ - xmlHttp.send(null);
@H_404_25@ -
@H_404_25@ - }
@H_404_25@ -
@H_404_25@ - function handleStateChange(){
@H_404_25@ - if(xmlHttp.readyState == 4){
@H_404_25@ - if(xmlHttp.status == 200){
@H_404_25@ - document.getElementById("hintBox").innerHTML = xmlHttp.responseText;
@H_404_25@ - }
@H_404_25@ - }
@H_404_25@ - }
@H_404_25@ - </script>
@H_404_25@ - </head>
@H_404_25@ -
@H_404_25@ - <body>
@H_404_25@ - 请输入你的手机号码:
@H_404_25@ - <input type="text" name="email" id="email" onkeyup="doRequest()" />
@H_404_25@ - <div id="hintBox"></div>
@H_404_25@ - </body>
@H_404_25@ - </html>@H_404_25@
ShowHintServlet代码
- package ajax.study;
@H_404_25@ -
@H_404_25@ - import java.io.IOException;
@H_404_25@ - import java.io.PrintWriter;
@H_404_25@ -
@H_404_25@ - import javax.servlet.ServletException;
@H_404_25@ - import javax.servlet.http.HttpServlet;
@H_404_25@ - import javax.servlet.http.HttpServletRequest;
@H_404_25@ - import javax.servlet.http.HttpServletResponse;
@H_404_25@ -
@H_404_25@ - public class ShowHintServlet extends HttpServlet {
@H_404_25@ -
@H_404_25@ - public void doGet(HttpServletRequest request, HttpServletResponse response)
@H_404_25@ - throws ServletException, IOException {
@H_404_25@ -
@H_404_25@ - response.setContentType("text/html");
@H_404_25@ - String[] emails = {
@H_404_25@ - "18789245070",
@H_404_25@ - "13647579626",
@H_404_25@ - "13648649621",
@H_404_25@ - "18789273423",
@H_404_25@ - "13876221345",
@H_404_25@ - "13697542356",
@H_404_25@ - "15248939447"
@H_404_25@ -
@H_404_25@ - };
@H_404_25@ - PrintWriter out = response.getWriter();
@H_404_25@ - String q = request.getParameter("q");
@H_404_25@ - String hint = "";
@H_404_25@ - if(q.length()>0){
@H_404_25@ - for(int i=0; i<emails.length; i++){
@H_404_25@ - if(q.equalsIgnoreCase(emails[i].substring(0, q.length()))){
@H_404_25@ - if(hint==""){
@H_404_25@ - hint = emails[i];
@H_404_25@ - }else{
@H_404_25@ - hint = hint + " " + emails[i];
@H_404_25@ - }
@H_404_25@ -
@H_404_25@ - }
@H_404_25@ - }
@H_404_25@ - }
@H_404_25@ - if(hint==""){
@H_404_25@ - hint = "no suggestion";
@H_404_25@ - }
@H_404_25@ - out.println(hint);
@H_404_25@ - out.flush();
@H_404_25@ - out.close();
@H_404_25@ - }
@H_404_25@ -
@H_404_25@ -
@H_404_25@ - public void doPost(HttpServletRequest request, IOException {
@H_404_25@ - doGet(request,response);
@H_404_25@ - }
@H_404_25@ -
@H_404_25@ - }@H_404_25@
