jquery实现页面局部刷新

后台管理中总是使用frameset进行分成部分进行管理，但是感觉很不好用，尤其是页面间调转还要判断window.parent，太令我费神了，于是学习使用XMLHttpRequest进行页面局部刷新。代码如下：

Java代码  收藏代码
  1. <html>  
  2.     <head>  
  3.         <script type="text/javascript">   
  4.             window.onload = function(){   
  5.             document.getElementById("email").onblur = function(){   
  6.                 if(window.XMLHttpRequest){   
  7.                     http_request = new XMLHttpRequest();   
  8.                     if(http_request.overrideMimeType){  
  9.                     http_request.overrideMimeType("text/xml");   
  10.                     }   
  11.                 }else if(window.ActiveXObject){   
  12.                     try{   
  13.                         http_request = new ActiveXObject("Msxml2.XMLHTTP");   
  14.                     }catch(e){   
  15.                         try{      
  16.                             http_request = new ActiveXObject("Microsoft.XMLHTTP");   
  17.                         }catch(e){}   
  18.                     }   
  19.                 }   
  20.                 if(!http_request){   
  21.                     window.alert("不能创建XMLHttpRequest对象实例！");   
  22.                     return false;   
  23.                 }   
  24.                 http_request.onreadystatechange = function(){   
  25.                     if(http_request.readyState == 4 &&   
  26.                         http_request.status == 200) {   
  27.                         document.getElementById("emailTip").innerHTML   
  28.                         =http_request.responseText;   
  29.                     }   
  30.                 };   
  31.                 http_request.open("GET", "email.jsp?email="+this.value, true);   
  32.                 http_request.send(null);   
  33.                 }   
  34.             }   
  35.   </script>  
  36.     </head>  
  37.     <body>  
  38.         <input type="button" value="修改" onclick="getOtherMessage();" />  
  39.         <input type="text" id="email" />  
  40.         <span id="emailTip"></span>  
  41.         <div id="view">  
  42.             456  
  43.         </div>  
  44.     </body>  
  45. </html>  

 

后经高手提醒，可以使用ajax技术来写，使用jquery很简单，示例如下：

Java代码  收藏代码
  1. <html>  
  2.     <head>  
  3.         <script type="text/javascript" src="js/jquery.js"></script>  
  4.         <script type="text/javascript">   
  5.         function getOtherMessage(){   
  6.             $.ajax({   
  7.                 type:"post",     
  8.                 url:"${pageContext.request.contextPath}/getOtherMessage.do",   
  9.                 success:function(msg){   
  10.                     $("#view").html(msg);   
  11.                 },   
  12.                 error:function(){   
  13.                     alert("wrong");   
  14.                 }   
  15.             });   
  16.        }   
  17.   </script>  
  18.     </head>  
  19.     <body>  
  20.         <input type="button" value="修改" onclick="getOtherMessage();" />  
  21.         <div id="view">  
  22.             456  
  23.         </div>  
  24.     </body>  
  25. </html>  

 

posted @ 2014-06-25 14:33  技术狂  阅读(1806)  评论(0)  编辑  收藏  举报