ajax發送異步請求——GET方式

時間 2019-11-14

標籤 ajax 發送異步請求方式欄目 Ajax 简体版

原文原文鏈接

首先，咱們新建一個和web項目，而後新建一個servlet我，咱們命名爲AServlt，而後寫入以下代碼:javascript

 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 }

而後，咱們的服務器端就創建完畢了。java

咱們再新建一個jsp頁面，命名爲ajaxdemo.jsp，加入一個按鈕和一個h1標籤，意圖是在咱們點擊按鈕時發送異步請求，而後經過h1標籤來顯示服務器端發回來的消息：web

1   <body>
2   <button id="btn">點擊這裏</button>
3   <h1 id="h1"></h1>
4   </body>

接下來就是咱們核心的js代碼，代碼以下，步驟都在註釋裏：ajax

 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>