ajax发送异步请求—

ajax发送异步请求——GET方式

首先，我们新建一个和web项目，然后新建一个servlet我，我们命名为AServlt，然后写入如下代码:

 1 package cn.cuibusi.servlet;
 2 
 3 import javax.servlet.ServletException;
 4 import javax.servlet.annotation.WebServlet;
 5 import javax.servlet.http.HttpServlet;
 6 import javax.servlet.http.HttpServletRequest;
 7 import javax.servlet.http.HttpServletResponse;
 8 import java.io.IOException;
 9 
10 /**
11  * Created by cuibusi on 2017/4/20.
12  */
13 @WebServlet("/AServlet")
14 public class AServlet extends HttpServlet {
15     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
16         System.out.println("Hello AJAX");
17         response.getWriter().print("Hello AJAX!!!");
18     }
19 }

然后，我们的服务器端就建立完毕了。

我们再新建一个jsp页面，命名为ajaxdemo.jsp，加入一个按钮和一个h1标签，意图是在我们点击按钮时发送异步请求，然后通过h1标签来显示服务器端发回来的消息：

1   <body>
2   <button id="btn">点击这里</button>
3   <h1 id="h1"></h1>
4   </body>

接下来就是我们核心的js代码，代码如下，步骤都在注释里：

 1 <script type="text/javascript">
 2         // 创建异步对象
 3         function createXMLHttpRequest() {
 4             try {
 5                 return new XMLHttpRequest();//大多数浏览器
 6             } catch (e) {
 7                 try {
 8                     return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
 9                 } catch (e) {
10                     try {
11                         return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
12                     } catch (e) {
13                         alert("哥们儿，您用的是什么浏览器啊？");
14                         throw e;
15                     }
16                 }
17             }
18         }
19 
20         window.onload = function() {//文档加载完毕后执行
21             var btn = document.getElementById("btn");
22             btn.onclick = function() {//给按钮的点击事件注册监听
23               /*
24                ajax四步操作，得到服务器的响应
25                把响应结果显示到h1元素中
26                */
27               /*
28                1. 得到异步对象
29                */
30                 var xmlHttp = createXMLHttpRequest();
31               /*
32                2. 打开与服务器的连接
33                * 指定请求方式
34                * 指定请求的URL
35                * 指定是否为异步请求
36                */
37                 xmlHttp.open("GET", "<c:url value='/AServlet'/>", true);
38               /*
39                3. 发送请求
40                */
41                 xmlHttp.send(null);//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！
42               /*
43                4. 给异步对象的onreadystatechange事件注册监听器
44                */
45                 xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行
46                     // 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功）
47                     if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
48                         // 获取服务器的响应结束
49                         var text = xmlHttp.responseText;
50                         // 获取h1元素
51                         var h1 = document.getElementById("h1");
52                         h1.innerHTML = text;
53                     }
54                 };
55             };
56         };
57     </script>

最后，我们来看一下运行效果：