纯Ajax实现Google Suggest功能。

复制代码<scripttype="text/javascript"> varxmlHttpRequest; functioncreateXmlHttpRequest(){ if(window.ActiveXObject){ return newActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ return new XMLHttpRequest(); } } functionsendData(){ var context =document.getElementById("context"); if(context.value.length>0 &&context.value != ""){ varurl = '${pageContext.request.contextPath}/servlet/AjaxServlet'; xmlHttpRequest= createXmlHttpRequest(); xmlHttpRequest.onreadystatechange= ready; xmlHttpRequest.open("post",url,true); xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlHttpRequest.send("context="+context.value); } } functionready(){ var arr = new Array(); var tishi =document.getElementById("tishi"); if(xmlHttpRequest.readyState == 4 &&xmlHttpRequest.status == 200){ var b = xmlHttpRequest.responseText; if(b!= null){ repaintDIV(tishi,b); } } } functionrepaintDIV(tishi, b){ tishi.style.display = "block"; removeAllChild(tishi); var arr1 = b.split(" "); for(var i = 0; i < arr1.length; i++){ createNodeDIV(arr1[i]); } } functionremoveAllChild(tishi){ for(var i = 0; i <tishi.childNodes.length; i++){ tishi.removeChild(tishi.childNodes[i]); } } functioncreateNodeDIV(obj){ var node =document.createElement("div"); node.style.width = 150; node.style.height = 10; node.innerHTML = obj; node.onmouseover = function(){ node.style.background="gray"; } node.onmouseout = function(){ node.style.background="white"; } node.style.display="block"; document.getElementById("tishi").appendChild(node); } functiondiscover(){ document.getElementById("tishi").style.display= "none"; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<scripttype="text/javascript">
      varxmlHttpRequest;
      functioncreateXmlHttpRequest(){
          if(window.ActiveXObject){
              return newActiveXObject("Microsoft.XMLHTTP");
          }else if(window.XMLHttpRequest){
              return new XMLHttpRequest();
          }
      }
     
      functionsendData(){
         var context =document.getElementById("context");
         if(context.value.length>0 &&context.value != ""){
            varurl = '${pageContext.request.contextPath}/servlet/AjaxServlet';
            xmlHttpRequest= createXmlHttpRequest();
            xmlHttpRequest.onreadystatechange= ready;
            xmlHttpRequest.open("post",url,true);
            xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlHttpRequest.send("context="+context.value);
         }
      }
     
      functionready(){
         var arr = new Array();
         var tishi =document.getElementById("tishi");
         if(xmlHttpRequest.readyState == 4 &&xmlHttpRequest.status == 200){
            var b = xmlHttpRequest.responseText;
            if(b!= null){
               repaintDIV(tishi,b);
             }
         }
      }
     
      functionrepaintDIV(tishi, b){
         tishi.style.display = "block";
         removeAllChild(tishi);
         var arr1 = b.split(" ");
         for(var i = 0; i < arr1.length; i++){
            createNodeDIV(arr1[i]);
         }
      }
     
      functionremoveAllChild(tishi){
         for(var i = 0; i <tishi.childNodes.length; i++){
            tishi.removeChild(tishi.childNodes[i]);
         }
      }
     
      functioncreateNodeDIV(obj){
         var node =document.createElement("div");
         node.style.width = 150;
         node.style.height = 10;
         node.innerHTML = obj;
         node.onmouseover = function(){
            node.style.background="gray";
         }
         node.onmouseout = function(){
            node.style.background="white";
         }
         node.style.display="block";
         document.getElementById("tishi").appendChild(node);
      }
     
      functiondiscover(){
         document.getElementById("tishi").style.display= "none";
      }