Chinaunix首页 | 论坛 | 博客
  • 博客访问: 2537462
  • 博文数量: 245
  • 博客积分: 4125
  • 博客等级: 上校
  • 技术积分: 3113
  • 用 户 组: 普通用户
  • 注册时间: 2009-03-25 23:56
文章分类

全部博文(245)

文章存档

2015年(2)

2014年(26)

2013年(41)

2012年(40)

2011年(134)

2010年(2)

分类: 系统运维

2011-09-07 11:15:09

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

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

以下是详细代码:

showhint.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.     <head>
  4.         <title>showhint.html</title>

  5.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6.         <meta http-equiv="description" content="this is my page">
  7.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  8.         
  9.         <script language="javascript" type="text/javascript">
  10.   var xmlHttp;
  11.   function createXMLHttpRequest(){
  12.       if(window.ActiveXObject){
  13.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  14.       }else if(window.XMLHttpRequest){
  15.         xmlHttp = new XMLHttpRequest();
  16.       }
  17.   }
  18.   
  19.   function doRequest(){
  20.     createXMLHttpRequest();
  21.     var url = "servlet/ShowHintServlet?q=" + document.getElementById("email").value + "&timeStamp=" + new Date().getTime();
  22.     xmlHttp.onreadystatechange = handleStateChange;
  23.     xmlHttp.open("GET",url,true);
  24.     xmlHttp.send(null);
  25.    
  26.   }
  27.   
  28.   function handleStateChange(){
  29.     if(xmlHttp.readyState == 4){
  30.         if(xmlHttp.status == 200){
  31.            document.getElementById("hintbox").innerHTML = xmlHttp.responseText;
  32.         }
  33.      }
  34.   }
  35.   </script>
  36.     </head>

  37.     <body>
  38.         请输入你的手机号码:
  39.         <input type="text" name="email" id="email" onkeyup="doRequest()" />
  40.         <div id="hintbox"></div>
  41.     </body>
  42. </html>

ShowHintServlet代码

  1. package ajax.study;

  2. import java.io.IOException;
  3. import java.io.PrintWriter;

  4. import javax.servlet.ServletException;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;

  8. public class ShowHintServlet extends HttpServlet {

  9.     public void doGet(HttpServletRequest request, HttpServletResponse response)
  10.             throws ServletException, IOException {

  11.         response.setContentType("text/html");
  12.         String[] emails = {
  13.                 "18789245070",
  14.                 "13647579626",
  15.                 "13648649621",
  16.                 "18789273423",
  17.                 "13876221345",
  18.                 "13697542356",
  19.                 "15248939447"
  20.         
  21.         };
  22.         PrintWriter out = response.getWriter();
  23.         String q = request.getParameter("q");
  24.         String hint = "";
  25.         if(q.length()>0){
  26.             for(int i=0; i<emails.length; i++){
  27.                 if(q.equalsIgnoreCase(emails[i].substring(0, q.length()))){
  28.                     if(hint==""){
  29.                         hint = emails[i];
  30.                     }else{
  31.                         hint = hint + " " + emails[i];
  32.                     }
  33.                     
  34.                 }
  35.             }
  36.         }
  37.         if(hint==""){
  38.             hint = "no suggestion";
  39.         }
  40.         out.println(hint);
  41.         out.flush();
  42.         out.close();
  43.     }

  44.     
  45.     public void doPost(HttpServletRequest request, HttpServletResponse response)
  46.             throws ServletException, IOException {
  47.          doGet(request,response);
  48.     }

  49. }


阅读(2624) | 评论(0) | 转发(1) |
给主人留下些什么吧!~~