AJAX-先後端交互的藝術

時間 2020-01-26

標籤 ajax 後端交互藝術欄目 Ajax 简体版

原文原文鏈接

AJAX-先後端交互的藝術

爲何要用AJAX？

當咱們經過提交表單向服務器提交內容，或者進行一些其餘操做，均涉及到了與瀏覽器之間的交互，傳統的方式與AJAX方式的處理方法是不一樣的javascript

傳統方式：用戶觸發一個HTTP請求到 Web服務器，服務器接收並處理傳來的數據，而後回送一個新的頁面html
- 分析1：這種方式浪費了不少資源和帶寬，不少狀況下，返回的頁面大部分HTML代碼是一致的
- 分析2：客戶在服務器處理請求期間，只能等待，不能進行操做
AJAX方式：AJAX能夠只向服務器發送請求，而且取回必要的數據，客戶端採用 JavaScript 的方式處理來自服務器的迴應前端
- 分析1：大大的減小了數據量，服務器迴應速度更快，部分處理轉移到了客戶端，減輕了服務器的負荷
- 分析2：能夠實現客戶端和服務器的異步通信方式（後面說）

舉個例子:

若是咱們經過「傳統方式」對這個頁面中的內容分頁，這樣的話，每次分頁都會刷新整個頁面，致使已經成功顯示的頭部信息，以及左側固定信息，從新從服務器中獲取，形成了帶寬和服務器資源的孫歡，同時用戶也增長了等待時間，
若是咱們經過「AJAX方式」實現內容分頁，AJAX只須要從服務器中獲取到須要的這些信息也就是圖中的紅色區域內的數據，這樣就不須要刷新整個頁面，只須要局部刷新就能夠了，既能節省資源，又提高了用戶的體驗感

什麼是 AJAX

AJAX(Asynchronous JavaScript and XML) 異步的 JavaScript 和 XML，是指一種建立交互式網頁應用的網頁開發技術java

第一種讀法：AJAX —— ['eidʒæks] 標準音標讀法
第二種讀法：阿賈克斯

（內容選自：what is Ajax 中文爲是本身翻譯的，功底過淺，或許不是很理想）jquery

Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.
AJAX 使用 XHTML 來描述內容，CSS設置樣式，DOM 和 JavaScript實現動態展現內容。web

Conventional web applications transmit information to and from the sever using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server.
傳統的 web應用程序使用同步的方式向服務器發送和傳輸數據，這就是說，你填完一個表單後，點擊提交，而後會重定向到一個含新數據的頁面（數據由服務器傳來）。ajax

With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.
使用AJAX的時候，當你點擊「提交」，JavaScript 會發送一個請求到服務器，解析請求響應，而且更新到頁面中，純粹來講，用戶是沒法感受到任何數據被傳送到了服務器。json

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
XML通常做爲從服務端接受數據的格式，固然也能夠用包括 plain text 等其餘格式。後端

AJAX is a web browser technology independent of web server software.
AJAX 是一種與 web 服務軟件向獨立的 web 瀏覽器技術。瀏覽器

A user can continue to use the application while the client program requests information from the server in the background.
當客戶端在向服務端請求數據的時候，用戶仍然能夠繼續使用應用。

Intuitive and natural user interaction. Clicking is not required, mouse movement is a sufficient event trigger.
（AJAX展示出一種）直觀天然的用戶交互體驗，點擊事件再也不是必須的，鼠標移動事件已經足夠。

Data-driven as opposed to page-driven.
（AJAX）使用數據驅動而不是頁面驅動。

看完了這些說明，咱們解釋一下定義中的兩個重點概念：

(一) 什麼是異步呢？

(1) 異步的基本概念

異步和同步每每是同時被提到的兩個概念，這二者都是基於客戶端和服務器端相互通訊的基礎上

同步：客戶端必須的等待服務器端給予的響應，在此期間不能進行其餘操做
異步：與同步不一樣，客戶端不須要等待服務器響應，在此期間能夠進行任何操做

簡單概述流程：

同步：發送請求 → 等待服務器處理 → 返回

異步：事件觸發 → 服務器處理（不等待）→ 處理結束

(2) 異步的好處

AJAX 就是一種能夠在無需從新加載整個網頁的狀況下就能夠實現與客戶端與服務器的異步通信

往簡單了說就是：不用刷新整個網頁，就能修改網頁局部內容

正如咱們開頭所說到的，在開發中，若是每一次局部的小修改都進行頁面刷新，這顯然對性能會有所下降，並且用戶正在執行的操做也會中斷

(二) 數據傳輸格式

Aajx 的英文全稱爲 Asynchronous JavaScript and XML ，雖然包含了XML，可是數據格式還能夠有 JSON等

關於其數據傳輸格式有這樣一種說明：

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
XML通常做爲從服務端接受數據的格式，固然也能夠用包括 plain text 等其餘格式

AJAX中常使用的兩種數據傳輸格式爲：XML/JSON ,不過如今更多的是使用 JSON 格式，它做爲一種輕量級的數據交換格式，更小，更快，也更加容易解析

若是對於XML/JSON 還不夠熟悉的話，能夠先去了解一些基本的概念以及用法

AJAX的優缺點及應用場景

(一) 優缺點

優勢：
- 局部刷新，優化了用戶體驗
- 異步通訊，不須要打斷用戶操做，具備良好的響應能力
- 將一些工做從服務器轉移到客戶端中，節省了服務器和帶寬資源
- 按需取數據，減輕了服務器負擔，也大大減小了冗餘請求
缺點：
- AJAX 主要依賴於JavaScript ，瀏覽器對 JavaScript 的兼容性將直接影響 AJAX的使用
- 瀏覽器的後退機制被破壞，這也正是局部刷新所帶來的問題，不過如今有一些方式能夠儘量彌補這些問題
- 移動端對 AJAX 的支持沒有那麼好

(二) 應用場景

① 搜索框聯想列表

② 局部刷新分頁效果

③ 同頁面加載更多數據

④ 表單數據校驗

XMLHttpRequest - 核心對象

XMLHttpRequest = AJAX？

做爲一個小菜鳥而言，僅限於一下不算太深刻的應用，我經常會有這樣一種感受，XMLHttpRequest = AJAX 嗎？

（內容選自：what is Ajax 中文爲是本身翻譯的，功底過淺，或許不是很理想）

可按我的須要選擇是否跳過這個問題，直接跳轉到後面的語法等部分

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and JavaScript.
AJAX 所表明的的是 JavaScript和XML。AJAX是一種新技術，它經過利用 XML，HTML，CSS 和 JavaScript 來建立更好，更快，更具備交互性的Web應用程序。

AJAX is based on the following open standards −

AJAX 是基於如下公共的標準

Browser-based presentation using HTML and Cascading Style Sheets (CSS).
瀏覽器使用 HTML 以及 CSS 進行展現。

Data is stored in XML format and fetched from the server.
從服務端獲取的數據以 XML 格式存儲。

Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.
在後臺使用 XMLHttpRequest 請求數據。

JavaScript to make everything happen.
JavaScript 負責整個流程的實現

看完了上面的說明，咱們能夠看出來，AJAX不是指一種單一的技術，而是，利用了多種技術而產生的一種技術方案，上面提到的，主要依賴的技術也就是 HTML CSS JavaScript，而真正負責咱們實現瀏覽器與服務器進行請求與相應的就是 XMLHttpRequest

下面，咱們來重點了解一下它

(一) XMLHttpRequest 基本原理

Ajax中最大的特色就是請求會被異步對象XMLHttpRequest進行封裝，而後再發送到服務器，接着服務器以流的形式將數據返回給瀏覽器

也正是由於服務器返回的數據是經過流的形式發送的，XMLHttpRequest對象會不停的監聽服務器，且獲得服務器數據，因此瀏覽器不須要刷新就能夠獲取服務器端的數據

(二) XMLHttpRequest 方法和屬性

注：下面會講解具體的用法，在此處僅做爲方法和屬性的基本概括和梳理，不作過於具體的說明，可先簡單瀏覽，待到看完文章再回來閱讀

方法：

open( )

準備初始化一個AJAX請求
- open( method, URL )
- open( method, URL, async )
- open( method, URL, async, userName )
- open( method, URL, async, userName, password )
send( content )
發送請求
setRequestHeader( label, value )
設置請求頭信息
getAllResponseHeaders()
以字符串的形式返回完整的HTTP頭信息集
getResponseHeader( headerName )
返回指定的響應頭部信息
abort()
取消當前的請求

屬性：

onreadystatechange
監聽事件，當 readyState 屬性發生變化時觸發
readyState
定義了 XMLHttpRequest 對象的當前狀態（0 1 2 3 4）
responseText
以字符串的形式返回響應
responseXML
返回XML格式的響應，此屬性返回一個XML文檔對象
status
返回 HTTP 狀態 (e.g., 404 for "Not Found" and 200 for "OK").
statusText
返回 HTTP 狀態的說明 (e.g., "Not Found" or "OK").

附：思惟導圖

使用 AJAX 的步驟

(一) 建立 XMLHttpRequest 對象

針對不一樣版本的瀏覽器，建立 XMLHttpRequest 對象有着不一樣的方法，分爲兩類：

比較新的現代瀏覽器：IE7+, Firefox, Chrome, Opera, Safari
舊版本的IE瀏覽器等：IE6, IE5

針對不一樣的狀況咱們能夠須要一個能夠兼容各類瀏覽器的通用函數

<script language="javascript" type="text/javascript">
    
    function ajaxFunction() {
        var ajaxRequest;
        try {
            // 兼容 IE7+, Firefox, Chrome, Opera, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e) {
            // 兼容 Internet Explorer Browsers
            try {
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    return false;
                }
            }
        }
    }

</script>

簡單的也能夠這麼寫

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var xhr;
        if (window.XMLHttpRequest) {
            xhr=new XMLHttpRequest();
        }
        else {
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    
</script>

(二) 準備AJAX請求

xhr.open(method, URL, async);

參數1：請求方式（Get、Post）
- get：請求參數在URL後拼，send方法爲空
- post：請求參數在send方法中寫，open方法中僅僅寫 URL便可
參數2：請求URL
參數3：true-異步，false-同步（通常均爲 true）

(1) 必須知道的 GET 與 POST

GET 請求：

GET 請求經常使用於獲取服務器的數據，例如咱們使用連接（href）或 URL 等發起請求，而咱們經常須要將頁面中的參數，傳遞到後端進行定位或處理，GET請求的方式就會將數據拼接到 RUL後面，方便服務器進行解析

格式：？、開頭，& 分隔字符串，參數之間不須要空格，參數值不須要單雙引號包括，例如：

loginServlet?username=admin&password=admin

POST 請求：

POST 請求用於向服務器發送被處理的數據，提交表單既可使用GET，也可使用POST方式，推薦使用POST方式，查詢數據的時候推薦使用GET方式

GET：沒有請求體，但空行是存在的，附帶的參數有限制，數據容量不能超過1k

POST：存在請求體，能夠在請求的實體內容中向服務器發送數據，傳送的數據量是無限制的

(2) GET 方式請求的格式：

xhr.open("GET","loginServlet?username=admin&password=admin",true);

(3) POST 方式請求的格式：

xhr.open("POST",loginServlet,true);

使用 POST 方式提交的時候，其須要發送的數據怎麼辦呢？答案是：在 send 的方法中做爲參數進行傳遞，發往服務器

(三) AJAX 發送請求

xhr.send();

(1) GET 方式請求的格式：

xhr.send(null);

使用 GET 方式仍是比較簡單的，只須要在send方法彙總傳入一個null值便可了

(2) POST 方式請求的格式：

若是須要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。而後在 send() 方法中規定您但願發送的數據：

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("username=admin&password=admin");

(四) 處理響應

xhr.onreadystatechange=function() {
//判斷readyState就緒狀態是否爲4，判斷status響應狀態碼是否爲200
if (xhr.readyState==4 && xhr.status==200) {
    //獲取服務器的響應結果
    var responseText = xhr.responseText;
    alert(responseText);
    }
}

狀態	描述
readyState = 0	請求未初始化：在建立XMLHttpRequest對象以後，但在調用open（）方法以前
readyState = 1	請求已創建：在調用open（）方法以後但在調用send（）以前
readyState = 2	請求已發送：調用send（）以後
readyState = 3	求正在處理中：瀏覽器與服務器創建通訊以後，但服務器未完成響應以前
readyState = 4	求已完成：請求完成後，而且已從服務器徹底接收到響應數據

狀態碼	解釋
200	請求成功
302	請求重定向
304	請求資源沒有改變
404	請求資源補不存在，屬性客戶端錯誤
500	服務器內部錯誤

編寫一個簡單的 AJAX 程序（原生方式）咱們簡單的模擬一個表單校驗的程序

index.html
注：爲效果更容易理解，設置按鈕點擊事件進行校驗，實際可以使用失/獲焦點相關方法進行優化

<input type="text" id="username">
<input type="button" onclick="ajaxFunction()" value="向後臺判斷用戶名是否存在"></br>
<div id="msgError">校驗顯示區域</div>

JavaScript 代碼

<script language="javascript" type="text/javascript">
    function ajaxFunction() {
        var ajaxRequest;
        try {
            // 兼容 IE7+, Firefox, Chrome, Opera, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e) {
            // 兼容 Internet Explorer Browsers
            try {
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    return false;
                }
            }
        }
        //準備請求
        ajaxRequest.open("POST", "loginServlet", true);

        //因爲是POST提交方式，因此添加 HTTP 頭
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //獲取到表單中輸入的值
        var name_input = document.getElementById("username").value;

        //發送請求
        ajaxRequest.send("username=" + name_input);

        ajaxRequest.onreadystatechange = function () {
            //判斷readyState就緒狀態是否爲4，判斷status響應狀態碼是否爲200
            if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                //獲取服務器的響應結果
                var responseText = ajaxRequest.responseText;

                var div = document.getElementById("msgError");
                div.innerText = responseText;

            }
        }
    }
</script>

loginServlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");

        String username = request.getParameter("username");
        
        //此語句僅爲方便判斷是否後端正常收到了前端的數據，可選擇刪除
        System.out.println("接收到的數據：" + username);

        try {
            if (username.equals("admin")) {
                Thread.sleep(5000);
                response.getWriter().print("該用戶名已經存在");
            } else {
                Thread.sleep(5000);
                response.getWriter().print("該用戶名能夠註冊");
            }
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

咱們這樣就在無需從新加載整個網頁的狀況下就能夠實現與客戶端與服務器的異步通信，咱們爲了演示，同時在後臺主動設置延時5秒響應的狀況下，但咱們用戶仍然能夠在此期間進行操做，具體狀況，能夠自行簡單模擬試驗

JQuery 實現方式

使用原生的 JavaScript 實現 AJAX 確實比較麻煩，而使用 Jquery 也能夠幫助咱們實現這樣一種需求，並且也會讓咱們的代碼更加簡潔，直觀

舉個例子：

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var name_input = document.getElementById("username").value;

        $.ajax({
            url: "loginServlet",
            type: "POST",
            data: {"username": name_input},
            success: function (data) {
                var div = document.getElementById("msgError");
                div.innerText = data;
            },
            error: function () {
                alert("發生錯誤");
            }
        });
    }

</script>

url：請求路徑
type：請求方式
date：請求參數，想對應於原生JS實現的，data: "username=admin&age=20"
success：響應成功後的回調函數
error：果請求響應出現錯誤，會執行的回調函數
dateType：設置接受到的響應數據的格式（上例中未寫）

固然它的參數和設置選項不止這些，在這裏只選擇了一些相對簡單或者說必須的，詳情能夠參考 JQuery API 文檔

舉個例子：

在 Servlet 和 html 均不變的基礎上，咱們修改 js代碼，使用jquery的方式來實現一樣的功能

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var name_input = document.getElementById("username").value;

        $.ajax({
            url: "loginServlet",
            type: "POST",
            data: {"username": name_input},
            success: function (data) {
                var div = document.getElementById("msgError");
                div.innerText = data;
            },
            error: function () {
                alert("發生錯誤");
            }
        });
    }

</script>

通過測試結果是同樣的

JQuery確實極大的簡化了咱們的代碼，可是若是你只是想快速的實現這一種需求，JQuery 其實還提供了兩個更爲簡單的方式，以取代複雜 $.ajax

(一) $.get()方法

說明：這是一個簡單的 GET 請求功能，來取代複雜的 $.ajax

完整結構： $.get(url,[data],callback,type)

url：待載入頁面的URL地址
data：待發送 Key/value 參數
callback：載入成功時回調函數
type：返回內容格式，xml, html, script, json, text, _default

這種方式旨在快速的實現請求，當請求成功的時候能夠調用回調函數，若是須要在出錯的時候執行函數，仍是須要使用 $.ajax()

(二) $.post()方法

說明：這是一個簡單的 POST 請求功能，來取代複雜的 $.ajax

完整結構： $.post(url, [data], [callback], [type])

url：發送請求地址
data：待發送 Key/value 參數
callback：發送成功時回調函數
type：返回內容格式，xml, html, script, json, text, _default。

仍是沿用上面的 html和Servlet，修改function代碼

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var name_input = document.getElementById("username").value;

        $.get("loginServlet",{username:name_input},function (data) {
            var div = document.getElementById("msgError");
            div.innerText = data;
        },"text");
    }

</script>

總結：$.get()方法和 $.post()方法方法都可以快速簡潔的完成一些基本操做，若是操做比較複雜，仍是須要使用 $.ajax()方式

總結：

AJAX 的的基本知識，以及使用 JavaScript 和 JQuery 這兩種實現方式，咱們就已經介紹完了，到如今爲止，如何發起而且接收響應已經不在話下了，而且咱們對 AJAX 有了必定的認識，可是 AJAX 的一些應用場景，以及AJAX 如何搭配常見的如 JSON 等數據格式，實現先後端的交互，並無提到，咱們就放到後面說，將所有的內容擠到一塊兒，不管是從篇幅或者說內容的針對性都是不夠強的，不過AJAX 也確實是咱們成長路上不可不學的一門技術了，有什麼不清楚的，能夠嘗試着看一些國內外的資源站點，w3chool、tutorialspoint 等等，多翻翻 API 文檔，尤爲是一些英文的文檔和資料，我感受對我我的幫助仍是很大的。

一樣在此感謝你們的支持！謝謝！

你們的每個閱讀和讚我都當作了喜歡！❤️