技術文章 » 認識 ajax

認識 ajax

2020-09-19 12:03:16

相關文章推薦：

1.1 什麼是ajax:

  • Ajax即「Asynchronous Javascript And XML」(非同步JavaScript 和XML)，是指一種建立互動式網頁應用的網頁開發技術。Ajax=非同步JavaScript和XML（標準通用標示語言的子集）。通過在後臺與伺服器進行少量資料交換,Ajax可以使用網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新（無重新整理技術）。傳統的網頁（不使用Ajax）如果需要更新內容，必須過載整個網頁頁面。

1.2Ajax的應用場景：

1.2.1 檢查使用者名稱是否已被註冊：

很多站點的註冊頁面都具被自動檢測使用者名稱是否存在的友好提示，該功能整體頁面並沒有重新整理，但仍然可以非同步與伺服器進行資料交換，查詢使用者輸入的使用者名稱是否存在資料庫。

1.2.2 省市級聯下拉框聯動：

很多站點都存在輸入使用者地址的操作，在完成地址輸入時，使用者所在的省份是下拉框，當選擇不同的省份時會出現不同市區的選擇，這就是最常見的省市聯動效果。

1.2.3 內容自動補全：

不管時專注於搜尋的百度，還是站點內商品搜尋的淘寶，都有搜尋的功能，在i搜尋方塊輸入查詢關鍵字時，整個頁面沒有重新整理，但會根據關鍵字顯示相關查詢字條，這個過程是非同步的。

百度的搜尋補全功能：

淘寶的搜尋補全功能：

1.3 同步方式與非同步方式的區別：

  1. 同步方式傳送請求：傳送一個請求，需要等待響應返回，然後才能夠傳送下一個請求，如果該請求沒有響應，不能傳送下一個請求，使用者端會一直處於等待過程中。
  2. 非同步方式傳送請求：傳送一個請求，不需要等待響應返回，隨時可以再傳送下一個請求，即不需要等待。

1.4 Ajax的原理分析：

  • AJAX引擎會在不重新整理瀏覽器位址列的情況下，傳送非同步請求：
  1. 使用JavaScript獲取瀏覽器內建的AJAX引擎（XMLHttpRequest物件）
  2. 使用js確定請求路徑和請求引數
  3. AJAX引擎物件根據請求路徑和請求引數進行傳送請求
  • 伺服器接收到Ajax引擎的請求進行處理：
  1. 伺服器獲得請求引數資料
  2. 伺服器處理請求業務（呼叫業務層程式碼）
  3. 伺服器響應資料給Ajax引擎
  • Ajax引擎獲得伺服器響應的資料，通過執行JavaScript的回撥函數將資料更新到瀏覽器頁面的具體位置：
  1. 通過設定給Ajax引擎的回撥函數獲取伺服器響應的資料
  2. 使用JavaScript在指定的位置，顯示響應的資料，從而區域性修改頁面的資料，達到區域性重新整理的目的。

2.1js原生的Ajax：

  • js原生的Ajax開發步驟：

  1. 建立Ajax引擎物件

  2. 為Ajax引擎物件繫結監聽（監聽伺服器已將資料響應給引擎）

  3. 繫結提交地址

  4. 傳送請求

  5. 監聽裡面處理響應資料

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        //同步請求點選事件
        function sendRequest() {
            //js刷位址列請求伺服器端
            location.href = "Ajax1Servlet?name=admin&password=123abc";
        }
        
        //非同步請求點選事件
        function sendAsynRequest() {
            //1.建立ajax引擎物件
            var xmlHttp = new XMLHttpRequest();
            //2.設定回撥函數，目的是處理伺服器完全返回的資料
            xmlHttp.onreadystatechange = function () {
                /**
                 * 這個回撥函數什麼呼叫呢？是ajax引擎物件與伺服器通訊狀態碼改變的時候呼叫
                 * ajax引擎物件與伺服器通訊狀態碼xmlHttp.readystate，範圍0~4
                 * 0：請求未初始化
                 * 1：伺服器連線已建立
                 * 2：請求已接收
                 * 3：請求處理中
                 * 4：請求已完成，且響應已就緒
                 * 這個回撥函數一共被呼叫4次，但只有狀態碼4的時候才代表伺服器響應完成資料完成。
                 * ajax引擎通訊轉態碼為4和http通訊轉態碼為200
                 */
                if(xmlHttp.readyState==4 && xmlHttp.status==200){
                    //獲取響應資料
                    var content = xmlHttp.responseText;
                    alert(content);
                }
            }
            //3.設定請求路徑和請求引數
            /**
             * xmlHttp.open(method,url)
             * method,請求方法，get或post請求
             * url：請求路徑
             */
            xmlHttp.open("get","Ajax1Servlet?name=admin&psw=abc123");
            //4.傳送請求
            xmlHttp.send();
        }
    </script>
</head>
<body>
<input type="button" value="傳送同步請求" onclick="sendRequest();"/>
<input type="button" value="傳送非同步請求" onclick="sendAsynRequest();"/>
</body>
</html>
package com.sunny.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "Ajax1Servlet", urlPatterns = "/Ajax1Servlet")
public class Ajax1Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //獲取請求引數
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        //列印出來
        System.out.println("name="+name);
        System.out.println("password="+password);
        //輸出資料前端
        response.getWriter().write("hello js ajax");
    }
}

2.2 Ajax引擎連線狀態readyState值0~4變化過程：

  • 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
  • 0: 請求未初始化
  • 1: 伺服器連線已建立
  • 2: 請求已接收
  • 3: 請求處理中
  • 4: 請求已完成，且響應已就緒

這裡狀態值4只能說明接收到了伺服器的響應伺服器處理ajax請求結束，但是不能代表正確的獲取了伺服器的響應，需要配合http狀態碼200兩個條件就可以說明正確的獲取了伺服器響應。只有這兩個條件滿足，xmlhttp.responseText才可以獲取到正確的響應資料。 

xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4){
				if(xmlhttp.status == 200){
					alert("響應資料" + xmlhttp.responseText);
				}
			}
		};

相關學習推薦：

以上就是認識 ajax的詳細內容，更多請關注TW511.COM其它相關文章！