首页 > 代码库 > ajax 异步 通信 小例子 servlet与 jsp异步

ajax 异步 通信 小例子 servlet与 jsp异步

2024-07-06 12:37:01   226人阅读

get  请求参数通过 url那里写进去，然后send(null)

html文件和 servlet进行通信 通过ajax 进行通信

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>AJAX进行get方式的请求测试</title>
 6 </head>
 7 <body>
 8     <input type="button" id="b1" name="b1" value="http://www.mamicode.com/测试与服务器的通信"/>
 9     <div id="d1">
10                 
11     </div>
12     <script type="text/javascript">
13         

14         window.onload=function(){//当页面被全部加在完毕后再执行
15             //给b1按钮注册事件
16             document.getElementById("b1").onclick=function(){
17                 //AJAX代码
18                 
19                 //得到XmlHttpRequest对象
20                 var xhr = createXmlHttpRequest();
21                 //xhr的readyState改变都会触发onreadystatechange事件
22                     
23                     /*
24                      * readyState的取值：
25                      *     0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 
26                      *     1 (初始化) 对象已建立，尚未调用send方法 
27                      *  2 (发送数据) send方法已调用，但是当前的状态及http头未知 
28                      *     3 (数据传送中) 已接收部分数据，因为响应及http头不全， 
29                      *     4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 
30 
31                      */
32                 xhr.onreadystatechange=function(){
33                     if(xhr.readyState==4){
34                         //真正的处理
35                         if(xhr.status==200||xhr.status==304){
36                             //服务器正确返回
37                             var data = http://www.mamicode.com/xhr.responseText;//服务器返回的数据
38                             //把返回的数据写到div中
39                             document.getElementById("d1").innerHTML=data;
40                         }
41                     }
42                 }
43                 //建立与服务器的连接
44                     /*
45                      * oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
46                      * bstrMethod:请求方式。一般使用get或post
47                      * bstrUrl:请求的资源地址：可以绝对或相对路径
48                      * varAsync:是否是异步请求。默认是true。
49                      */
　　　　　　　　　　　　//由于浏览器请求url如果都是一样的话，就不请求了，所以后面加个时间信息，让url不同，

50                 xhr.open("GET","/ajaxday02/servlet/ServletDemo1?time="+new Date().getTime());
51                 //发送数据
52                     //oXMLHttpRequest.send(varBody);  varBody:请求参数
53                 xhr.send(null);
54 
55                 //接收服务器返回的数据
56                     
57                 
58             }
59         }
60         function createXmlHttpRequest(){
61            var xmlHttp;
62            try{    //Firefox, Opera 8.0+, Safari
63                    xmlHttp=new XMLHttpRequest();
64             }catch (e){
65                    try{    //Internet Explorer
66                           xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
67                     }catch (e){
68                           try{
69                                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
70                           }catch (e){}  
71                    }
72             }
73            return xmlHttp;
74          }
75 
76     </script>
77 </body>
78 </html>

servlet

 1 package cn.itcast.controller;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.annotation.WebServlet;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 @WebServlet("/servlet/ServletDemo1")
13 public class ServletDemo1 extends HttpServlet {
14     private static final long serialVersionUID = 1L;
15        
16    
17     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
18         response.setContentType("text/html;charset=UTF-8");
19         PrintWriter out = response.getWriter();
20         out.write("hello ajax");
21         System.out.println("ServletDemo1执行了");
22     }
23 
24     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
25         doGet(request,response);
26     }
27 
28 }

 


联系
我们