ajax简单例子

完成的功能：

client.jsp页面文本框输入内容，触发onblur事件后调用docheck方法，由server.jsp在内容后面加上“hello”,结果显示在<div id="result"></div>

 

client.jsp

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.     <script type="text/javascript" src="http://www.hxlysw.com/ajax/check.js"></script>  
  12.   </head>  
  13.     
  14.   <body>  
  15.     <input id="username" type="text" onblur="doCheck()">  
  16.     <div id="result" >显示结果</div>  
  17.   </body>  
  18. </html>  


server.jsp

 

 

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <%  
  2.     String name = request.getParameter("name");  
  3.     response.getWriter().write(name + "hello");  
  4. %>  


check.js文件

 

 

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. var xhr;  
  2.     function doCheck(){  
  3.         if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari  
  4.             xhr=new XMLHttpRequest();  
  5.         }  
  6.         else{// code for IE6, IE5  
  7.             xhr=new ActiveXObject("Microsoft.XMLHTTP");  
  8.         }  
  9.         var name=document.getElementById("username").value;  
  10.         var url="ajax/server.jsp?name="+name;  
  11.         xhr.onreadystatechange = callback;  
  12.         xhr.open("GET",url,true);  
  13.         xhr.send(null);  
  14.     }  
  15.       
  16.     function callback(){  
  17.   
  18.         if (xhr.readyState == 4 && xhr.status == 200) {  
  19.         alert(xhr.responseText);  
  20.             document.getElementById("result").innerHTML = xhr.responseText;  
  21.             }  
  22.     }  
posted @ 2014-05-22 12:06  ：快乐王子  阅读(108)  评论(0)  编辑  收藏  举报