纯Ajax实现Google Suggest功能。

最新推荐文章于 2015-04-30 08:29:29 发布

原创最新推荐文章于 2015-04-30 08:29:29 发布 · 694 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个基于Ajax技术的异步数据交互案例，通过JavaScript实现页面元素的动态加载和更新，无需刷新整个页面即可完成数据的发送与接收。文章详细解释了如何创建XMLHttpRequest对象，并通过POST请求方式与服务器进行通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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";
      }