AJAX的非同步請求

阿新 • • 發佈：2020-12-10

技術標籤：D_JavaWeb階段 # D15_JavaWeb中的Ajax知識 java ajax

1.非同步請求物件

在區域性重新整理，需要建立一個物件，代替瀏覽器發起請求的行為，這個物件存在記憶體中。代替瀏覽器發起請求並接收響應資料。這個物件叫做非同步請求物件。
全域性重新整理是同步行為，區域性重新整理是非同步行為[瀏覽器資料沒有全部更新] 這個非同步物件用於在後臺與伺服器交換資料。
XMLHttpRequest 就是我們說的非同步物件。
XMLHttpRequest 物件能夠：

在不重新載入頁面的情況下更新網頁
在頁面已載入後向伺服器請求資料
在頁面已載入後從伺服器接收資料
所有現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內建了 XMLHttpRequest 物件。通過一行簡單的 JavaScript 程式碼，我們就可以建立 XMLHttpRequest 物件

建立 XMLHttpRequest 物件的語法（xhr） ：
var xmlhttp=new XMLHttpRequest();
AJAX 中的核心物件就是 XMLHttpRequest

2.XMLHttpRequest物件解析

XMLHttpRequest 物件 open( method , url, true ) 第三個引數 true 表示非同步請求
非同步請求特點：

1)某一個時刻，瀏覽器可以委託多個非同步請求物件傳送請求，無需等待請求處理完成。
2)瀏覽器委託非同步請求物件工作期間，瀏覽器處於活躍狀態。可以繼續向下執行其他命令。
3)當響應就緒後再對響應結果進行處理

實現步驟：

1.設定非同步物件 open 方法第三個引數為 true

// 初始請求引數 xmlHttp.open(“get”,“searchProvinceJson?proid=”+proid,true);
2.send()後面，增加 alert()
// 傳送請求 xmlHttp.send(); alert(“我是最後一行的程式碼”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type= 
"text/javascript">
        // 在這裡使用javaScript語言發起Ajax請求，訪問伺服器AjaxServlet中javaScriptAjax
        function ajaxRequest() {
            // 1、我們首先要建立XMLHttpRequest
            var xmlHttpRequest = new XMLHttpRequest();

            // 2、呼叫open方法設定請求引數
            // method：請求的型別；GET 或 POST
            // url：檔案在伺服器上的位置
            // async：true（非同步或 false（同步
            xmlHttpRequest.open("GET","http://localhost:8080/16_AJAX/ajaxServlet?action=javaScriptAjax",true);

            // 4、在send方法前繫結onreadystatechange事件，處理請求完成後的操作。
            // onreadystatechange 事件
            // 當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。
            // 每當 readyState 改變時，就會觸發 onreadystatechange 事件。

            xmlHttpRequest.onreadystatechange = function () {
                if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                    // alert("收到伺服器返回的資料:" + xmlHttpRequest.responseText);
                    //JSON.parse() 把 json 字串轉換成為 json 物件
                    var jsonObj = JSON.parse(xmlHttpRequest.responseText);
                    // 把響應的資料顯示在頁面上
                    document.getElementById("div01").innerHTML = "編號：" + jsonObj.id + ",姓名：" + jsonObj.name;
                }
            }
            // 3、呼叫send方法傳送請求
            xmlHttpRequest.send();

            alert("我是最後一行的程式碼");

        }
    </script>
</head>
<body>
    <button onclick="ajaxRequest()">ajax request</button>
    <div id="div01">
    </div>
</body>
</html>

3.SearchServletJson 類的 doGet 方法第一個加入斷點
4.部署應用，在瀏覽器訪問應用。
點選“ajax request”按鈕，請求傳送到 Servlet，程式暫停執行， js 中 alert 執行繼續執行，沒有等待請求處理完成，瀏覽器視窗彈窗“我是最後一行的程式碼”字串

3.同步請求

XMLHttpRequest 物件 open( method , url, false ) 第三個引數 false 表示同步請求
同步請求特點：

某一個時刻，瀏覽器只能委託一個非同步請求物件傳送請求，必須等待請求處理完成。
瀏覽器委託非同步請求物件工作期間，瀏覽器處於等待狀態。不能執行其他命令。
不推薦使用。

實現步驟：同之前步驟，需要 open(method,url,false)第三個引數設為 false。且部署應用後，程式暫停執行， js 中 alert 不會執行，處於等待狀態

SpringMVC中如何實現Ajax非同步請求

　　一環境搭建　　首先是常規的spring mvc環境搭建，不用多說，需要注意的是，這裡需要引入jackson相關jar包，然後在spring配置檔案“springmvc-servlet.xml”中新增json解析相關配置，我這裡的完整程式碼如下：

ajax非同步請求，$.each遍歷拼接資料

ajax非同步請求，$.each遍歷拼接資料自己在做一個前後端分離的demo，現在需要用ajax非同步請求後端資料，然後用jquery的$.each遍歷，然後拼接資料。

jquery 簡單使用和傳送 ajax 非同步請求

技術標籤：java 相關jqueryajaxjava jquery 的簡單使用。需要引入 js 檔案。 jquery 獲取 select 標籤、 input （radio）標籤的選中狀態。注意過濾器加空格代表從子類中找，不加空格是從自身查詢

SpringMVC @RequestBody和@ResponseBody註解以及 Ajax非同步請求

例項講解： 1.先建立一個實體類Student: public class Student { private String sname; private String password;

Jquery使用Ajax傳送非同步請求，模擬前後臺介面開發模式

AJax上傳各種表單 1.普通表單 (input) enctype=\"application/x-www-form-urlencoded\" <form action=\"\" method=\"post\" enctype=\"application/x-www-form-urlencoded\">

AJAX的非同步請求

技術標籤：D_JavaWeb階段# D15_JavaWeb中的Ajax知識javaajax 1.非同步請求物件在區域性重新整理，需要建立一個物件，代替瀏覽器發起請求的行為，這個物件存在記憶體中。代替瀏覽器發起請求並接收響應資料。這個

ajax之傳送非同步請求(四步)

一：得到XMLHttpRequest 同步請求，一請求一響應。非同步請求，多請求多響應。區域性重新整理。

vue-resourc發起非同步請求的方法

除了vue-resource之外，還可以使用\'axios‘的第三方包實現資料的請求因為跨域失敗訪問不到，不過同域的可以直接訪問.html檔案來檢驗，這樣可以不用搭伺服器建議使用axios來進行非同步訪問請求

servlet非同步請求與spring mvc非同步請求

servlet非同步請求 import java.io.IOException; import javax.servlet.AsyncContext; import javax.servlet.ServletException;

如何在FastAdmin中使用Ajax傳送請求?

html頁面： js檔案裡新增以下程式碼：{field: \'uid\', title: __(\'解綁\'), table: table, buttons: [{name: \'ajax\',text: __(\'解綁\'),title: __(\'解綁\'),classname: \'btn btn-xs btn-success btn-magic bt