image

AJAX-前后端交互的藝術(shù)

為什么要用AJAX？

當(dāng)我們通過(guò)提交表單向服務(wù)器提交內(nèi)容，或者進(jìn)行一些其他操作，均涉及到了與瀏覽器之間的交互，傳統(tǒng)的方式與AJAX方式的處理方法是不同的

• 傳統(tǒng)方式：用戶觸發(fā)一個(gè)HTTP請(qǐng)求到 Web服務(wù)器，服務(wù)器接收并處理傳來(lái)的數(shù)據(jù)，然后回送一個(gè)新的頁(yè)面

  • 分析1：這種方式浪費(fèi)了很多資源和帶寬，很多情況下，返回的頁(yè)面大部分HTML代碼是一致的
  • 分析2：客戶在服務(wù)器處理請(qǐng)求期間，只能等待，不能進(jìn)行操作

• AJAX方式：AJAX可以只向服務(wù)器發(fā)送請(qǐng)求，并且取回必要的數(shù)據(jù)，客戶端采用 JavaScript 的方式處理來(lái)自服務(wù)器的回應(yīng)

  • 分析1：大大的減少了數(shù)據(jù)量，服務(wù)器回應(yīng)速度更快，部分處理轉(zhuǎn)移到了客戶端，減輕了服務(wù)器的負(fù)荷
  • 分析2：可以實(shí)現(xiàn)客戶端和服務(wù)器的異步通訊方式（后面說(shuō)）

舉個(gè)例子:

image

• 如果我們通過(guò) “傳統(tǒng)方式” 對(duì)這個(gè)頁(yè)面中的內(nèi)容分頁(yè)，這樣的話，每次分頁(yè)都會(huì)刷新整個(gè)頁(yè)面，導(dǎo)致已經(jīng)成功顯示的頭部信息，以及左側(cè)固定信息，重新從服務(wù)器中獲取，造成了帶寬和服務(wù)器資源的孫歡，同時(shí)用戶也增加了等待時(shí)間，

• 如果我們通過(guò) “AJAX方式” 實(shí)現(xiàn)內(nèi)容分頁(yè)，AJAX只需要從服務(wù)器中獲取到 需要的這些信息也就是圖中的紅色區(qū)域內(nèi)的數(shù)據(jù)，這樣就不需要刷新整個(gè)頁(yè)面，只需要局部刷新就可以了，既能節(jié)省資源，又提升了用戶的體驗(yàn)感

什么是 AJAX

AJAX(Asynchronous JavaScript and XML) 異步的 JavaScript 和 XML，是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)

• 第一種讀法：AJAX —— ['eid??ks] 標(biāo)準(zhǔn)音標(biāo)讀法
• 第二種讀法：阿賈克斯

（內(nèi)容選自：what is Ajax 中文為是自己翻譯的，功底過(guò)淺，或許不是很理想）

• Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.

  AJAX 使用 XHTML 來(lái)描述內(nèi)容，CSS設(shè)置樣式，DOM 和 JavaScript實(shí)現(xiàn)動(dòng)態(tài)展示內(nèi)容。

• 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.

  傳統(tǒng)的 web應(yīng)用程序使用同步的方式向服務(wù)器發(fā)送和傳輸數(shù)據(jù)，這就是說(shuō)，你填完一個(gè)表單后，點(diǎn)擊提交，然后會(huì)重定向到一個(gè)含新數(shù)據(jù)的頁(yè)面（數(shù)據(jù)由服務(wù)器傳來(lái)）。

• 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的時(shí)候，當(dāng)你點(diǎn)擊 “提交”，JavaScript 會(huì)發(fā)送一個(gè)請(qǐng)求到服務(wù)器，解析請(qǐng)求響應(yīng)，并且更新到頁(yè)面中，純粹來(lái)說(shuō)，用戶是無(wú)法感覺(jué)到任何數(shù)據(jù)被傳送到了服務(wù)器。

• XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

  XML一般作為從服務(wù)端接受數(shù)據(jù)的格式，當(dāng)然也可以用包括 plain text 等 其他格式。

• AJAX is a web browser technology independent of web server software.

  AJAX 是一種與 web 服務(wù)軟件向獨(dú)立的 web 瀏覽器技術(shù)。

• A user can continue to use the application while the client program requests information from the server in the background.

  當(dāng)客戶端在向服務(wù)端請(qǐng)求數(shù)據(jù)的時(shí)候，用戶仍然可以繼續(xù)使用應(yīng)用。

• Intuitive and natural user interaction. Clicking is not required, mouse movement is a sufficient event trigger.

  （AJAX展現(xiàn)出一種）直觀自然的用戶交互體驗(yàn)，點(diǎn)擊事件不再是必須的，鼠標(biāo)移動(dòng)事件已經(jīng)足夠。

• Data-driven as opposed to page-driven.

  （AJAX）使用數(shù)據(jù)驅(qū)動(dòng)而不是頁(yè)面驅(qū)動(dòng)。

看完了這些說(shuō)明，我們解釋一下定義中的兩個(gè)重點(diǎn)概念：AJAX is Based on Open Standards

AJAX is based on the following open standards ?

• Browser-based presentation using HTML and Cascading Style Sheets (CSS).
• Data is stored in XML format and fetched from the server.
• Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.
• JavaScript to make everything happen.

(一) 什么是異步呢？

(1) 異步的基本概念

異步和同步往往是同時(shí)被提到的兩個(gè)概念，這兩者都是基于客戶端和服務(wù)器端相互通信的基礎(chǔ)上

• 同步：客戶端必須的等待服務(wù)器端給予的響應(yīng)，在此期間不能進(jìn)行其他操作
• 異步：與同步不同，客戶端不需要等待服務(wù)器響應(yīng)，在此期間可以進(jìn)行任何操作

簡(jiǎn)單概述流程：

同步：發(fā)送請(qǐng)求 → 等待服務(wù)器處理 → 返回

異步：事件觸發(fā) → 服務(wù)器處理 （不等待）→ 處理結(jié)束

image

(2) 異步的好處

AJAX 就是一種可以在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下 就可以實(shí)現(xiàn)與客戶端與服務(wù)器的異步通訊

往簡(jiǎn)單了說(shuō)就是：不用刷新整個(gè)網(wǎng)頁(yè)，就能修改網(wǎng)頁(yè)局部?jī)?nèi)容

正如我們開(kāi)頭所說(shuō)到的，在開(kāi)發(fā)中，如果每一次局部的小修改都進(jìn)行頁(yè)面刷新，這顯然對(duì)性能會(huì)有所降低，而且用戶正在執(zhí)行的操作也會(huì)中斷

(二) 數(shù)據(jù)傳輸格式

Aajx 的英文全稱為 Asynchronous JavaScript and XML ，雖然包含了XML，但是數(shù)據(jù)格式還可以有 JSON等

關(guān)于其數(shù)據(jù)傳輸格式有這樣一種說(shuō)明：

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

XML一般作為從服務(wù)端接受數(shù)據(jù)的格式，當(dāng)然也可以用包括 plain text 等 其他格式

AJAX中常使用的兩種數(shù)據(jù)傳輸格式為：XML/JSON ,不過(guò)現(xiàn)在更多的是使用 JSON 格式，它作為一種輕量級(jí)的數(shù)據(jù)交換格式，更小，更快，也更加容易解析

如果對(duì)于XML/JSON 還不夠熟悉的話，可以先去了解一些基本的概念以及用法

AJAX的優(yōu)缺點(diǎn)及應(yīng)用場(chǎng)景

(一) 優(yōu)缺點(diǎn)

• 優(yōu)點(diǎn)：

  • 局部刷新，優(yōu)化了用戶體驗(yàn)
  • 異步通信，不需要打斷用戶操作，具有良好的響應(yīng)能力
  • 將一些工作從服務(wù)器轉(zhuǎn)移到客戶端中，節(jié)省了服務(wù)器和帶寬資源
  • 按需取數(shù)據(jù) ，減輕了服務(wù)器負(fù)擔(dān)，也大大減少了冗余請(qǐng)求

• 缺點(diǎn)：

  • AJAX 主要依賴于JavaScript ，瀏覽器對(duì) JavaScript 的兼容性將直接影響 AJAX的使用
  • 瀏覽器的后退機(jī)制被破壞，這也正是局部刷新所帶來(lái)的問(wèn)題，不過(guò)現(xiàn)在有一些方式可以盡可能彌補(bǔ)這些問(wèn)題
  • 移動(dòng)端對(duì) AJAX 的支持沒(méi)有那么好

(二) 應(yīng)用場(chǎng)景

• ① 搜索框聯(lián)想列表

image

• ② 局部刷新分頁(yè)效果

image

• ③ 同頁(yè)面加載更多數(shù)據(jù)

image

• ④ 表單數(shù)據(jù)校驗(yàn)

image

XMLHttpRequest - 核心對(duì)象

XMLHttpRequest = AJAX？

作為一個(gè)小菜鳥(niǎo)而言，僅限于一下不算太深入的應(yīng)用，我常常會(huì)有這樣一種感覺(jué)，XMLHttpRequest = AJAX 嗎？

（內(nèi)容選自：what is Ajax 中文為是自己翻譯的，功底過(guò)淺，或許不是很理想）

可按個(gè)人需要選擇是否跳過(guò)這個(gè)問(wèn)題，直接跳轉(zhuǎn)到后面的語(yǔ)法等部分

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是一種新技術(shù)，它通過(guò)利用 XML，HTML，CSS 和 JavaScript 來(lái)創(chuàng)建更好，更快，更具有交互性的Web應(yīng)用程序。

AJAX is based on the following open standards ?

AJAX 是基于以下公共的標(biāo)準(zhǔn)

• Browser-based presentation using HTML and Cascading Style Sheets (CSS).

  瀏覽器使用 HTML 以及 CSS 進(jìn)行展示。

• Data is stored in XML format and fetched from the server.

  從服務(wù)端獲取的數(shù)據(jù)以 XML 格式存儲(chǔ)。

• Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.

  在后臺(tái)使用 XMLHttpRequest 請(qǐng)求數(shù)據(jù) 。

• JavaScript to make everything happen.

  JavaScript 負(fù)責(zé)整個(gè)流程的實(shí)現(xiàn)

看完了上面的說(shuō)明， 我們可以看出來(lái)，AJAX不是指一種單一的技術(shù)，而是，利用了多種技術(shù)而產(chǎn)生的一種技術(shù)方案，上面提到的，主要依賴的技術(shù)也就是 HTML CSS JavaScript，而真正負(fù)責(zé)我們實(shí)現(xiàn)瀏覽器與服務(wù)器 進(jìn)行請(qǐng)求與相應(yīng)的就是 XMLHttpRequest

下面，我們來(lái)重點(diǎn)了解一下它

(一) XMLHttpRequest 基本原理

Ajax中最大的特點(diǎn) 就是請(qǐng)求會(huì)被異步對(duì)象XMLHttpRequest進(jìn)行封裝，然后再發(fā)送到服務(wù)器，接著服務(wù)器以流的形式將數(shù)據(jù)返回給瀏覽器

也正是因?yàn)榉?wù)器返回的數(shù)據(jù)是通過(guò)流的形式發(fā)送的，XMLHttpRequest對(duì)象會(huì)不停的監(jiān)聽(tīng)服務(wù)器，且得到服務(wù)器數(shù)據(jù)，所以瀏覽器不需要刷新就可以獲取服務(wù)器端的數(shù)據(jù)

(二) XMLHttpRequest 方法和屬性

注：下面會(huì)講解具體的用法，在此處僅作為方法和屬性的基本歸納和梳理，不做過(guò)于具體的說(shuō)明，可先簡(jiǎn)單瀏覽，待到看完文章再回來(lái)閱讀

方法：

• open( )

  準(zhǔn)備初始化一個(gè)AJAX請(qǐng)求

  • open( method, URL )

  • open( method, URL, async )

  • open( method, URL, async, userName )

  • open( method, URL, async, userName, password )

• send( content )

  發(fā)送請(qǐng)求

• setRequestHeader( label, value )

  設(shè)置請(qǐng)求頭信息

• getAllResponseHeaders()

  以字符串的形式返回完整的HTTP頭信息集

• getResponseHeader( headerName )

  返回指定的響應(yīng)頭部信息

• abort()

  取消當(dāng)前的請(qǐng)求

屬性：

• onreadystatechange

  監(jiān)聽(tīng)事件，當(dāng) readyState 屬性發(fā)生變化時(shí)觸發(fā)

• readyState

  定義了 XMLHttpRequest 對(duì)象的當(dāng)前狀態(tài) （0 1 2 3 4）

• responseText

  以字符串的形式返回響應(yīng)

• responseXML

  返回XML格式的響應(yīng)，此屬性返回一個(gè)XML文檔對(duì)象

• status

  返回 HTTP 狀態(tài) (e.g., 404 for "Not Found" and 200 for "OK").

• statusText

  返回 HTTP 狀態(tài)的說(shuō)明 (e.g., "Not Found" or "OK").

附：思維導(dǎo)圖

image

使用 AJAX 的步驟

(一) 創(chuàng)建 XMLHttpRequest 對(duì)象

針對(duì)不同版本的瀏覽器，創(chuàng)建 XMLHttpRequest 對(duì)象有著不同的方法，分為兩類(lèi)：

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

針對(duì)不同的情況我們可以需要一個(gè)可以兼容各種瀏覽器的通用函數(shù)

<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>

簡(jiǎn)單的也可以這么寫(xiě)

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

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

(二) 準(zhǔn)備AJAX請(qǐng)求

xhr.open(method, URL, async);

• 參數(shù)1：請(qǐng)求方式（Get、Post）
  • get：請(qǐng)求參數(shù)在URL后拼，send方法為空
  • post：請(qǐng)求參數(shù)在send方法中寫(xiě)，open方法中僅僅寫(xiě) URL即可
• 參數(shù)2：請(qǐng)求URL
• 參數(shù)3：true-異步，false-同步（一般均為 true）

(1) 必須知道的 GET 與 POST

GET 請(qǐng)求：

GET 請(qǐng)求常用于獲取服務(wù)器的數(shù)據(jù)，例如我們使用 鏈接（href）或 URL 等發(fā)起請(qǐng)求，而我們常常需要將頁(yè)面中的參數(shù)，傳遞到后端進(jìn)行定位或處理，GET請(qǐng)求的方式就會(huì)將數(shù)據(jù)拼接到 RUL后面，方便服務(wù)器進(jìn)行解析

格式：？、開(kāi)頭，& 分隔字符串，參數(shù)之間不需要空格，參數(shù)值不需要單雙引號(hào)包括，例如：

loginServlet?username=admin&password=admin

POST 請(qǐng)求：

POST 請(qǐng)求用于向服務(wù)器發(fā)送被處理的數(shù)據(jù)，提交表單既可以使用GET，也可以使用POST方式，推薦使用POST方式，查詢數(shù)據(jù)的時(shí)候推薦使用GET方式

GET：沒(méi)有請(qǐng)求體，但空行是存在的，附帶的參數(shù)有限制，數(shù)據(jù)容量不能超過(guò)1k

POST：存在請(qǐng)求體，可以在請(qǐng)求的實(shí)體內(nèi)容中向服務(wù)器發(fā)送數(shù)據(jù)，傳送的數(shù)據(jù)量是無(wú)限制的

(2) GET 方式請(qǐng)求的格式：

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

(3) POST 方式請(qǐng)求的格式：

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

使用 POST 方式提交的時(shí)候，其需要發(fā)送的數(shù)據(jù)怎么辦呢？ 答案是：在 send 的方法中作為參數(shù)進(jìn)行傳遞，發(fā)往服務(wù)器

(三) AJAX 發(fā)送請(qǐng)求

xhr.send();

(1) GET 方式請(qǐng)求的格式：

xhr.send(null);

使用 GET 方式還是比較簡(jiǎn)單的，只需要在send方法匯總傳入一個(gè)null值即可了

(2) POST 方式請(qǐng)求的格式：

如果需要像 HTML 表單那樣 POST 數(shù)據(jù)，請(qǐng)使用 setRequestHeader() 來(lái)添加 HTTP 頭。然后在 send() 方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：

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

(四) 處理響應(yīng)

xhr.onreadystatechange=function() {
//判斷readyState就緒狀態(tài)是否為4，判斷status響應(yīng)狀態(tài)碼是否為200
if (xhr.readyState==4 && xhr.status==200) {
    //獲取服務(wù)器的響應(yīng)結(jié)果
    var responseText = xhr.responseText;
    alert(responseText);
    }
}

編寫(xiě)一個(gè)簡(jiǎn)單的 AJAX 程序（原生方式）我們簡(jiǎn)單的模擬一個(gè)表單校驗(yàn)的程序

• index.html

  注：為效果更容易理解，設(shè)置按鈕點(diǎn)擊事件進(jìn)行校驗(yàn)，實(shí)際可使用失/獲焦點(diǎn)相關(guān)方法進(jìn)行優(yōu)化

<input type="text" id="username">
<input type="button" onclick="ajaxFunction()" value="向后臺(tái)判斷用戶名是否存在"></br>
<div id="msgError">校驗(yàn)顯示區(qū)域</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;
                }
            }
        }
        //準(zhǔn)備請(qǐng)求
        ajaxRequest.open("POST", "loginServlet", true);

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

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

        //發(fā)送請(qǐng)求
        ajaxRequest.send("username=" + name_input);

        ajaxRequest.onreadystatechange = function () {
            //判斷readyState就緒狀態(tài)是否為4，判斷status響應(yīng)狀態(tài)碼是否為200
            if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                //獲取服務(wù)器的響應(yīng)結(jié)果
                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");
        
        //此語(yǔ)句僅為方便判斷是否后端正常收到了前端的數(shù)據(jù)，可選擇刪除
        System.out.println("接收到的數(shù)據(jù)：" + username);

        try {
            if (username.equals("admin")) {
                Thread.sleep(5000);
                response.getWriter().print("該用戶名已經(jīng)存在");
            } else {
                Thread.sleep(5000);
                response.getWriter().print("該用戶名可以注冊(cè)");
            }
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

image

image

image

我們這樣就在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下 就可以實(shí)現(xiàn)與客戶端與服務(wù)器的異步通訊，我們?yōu)榱搜菔?，同時(shí)在后臺(tái)主動(dòng)設(shè)置 延時(shí)5秒響應(yīng)的情況下，但我們用戶仍然可以在此期間進(jìn)行操作，具體情況，可以自行簡(jiǎn)單模擬試驗(yàn)

JQuery 實(shí)現(xiàn)方式

使用原生的 JavaScript 實(shí)現(xiàn) AJAX 確實(shí)比較麻煩，而 使用 Jquery 也可以幫助我們實(shí)現(xiàn)這樣一種需求，而且也會(huì)讓我們的代碼更加簡(jiǎn)潔，直觀

舉個(gè)例子：

<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("發(fā)生錯(cuò)誤");
            }
        });
    }

</script>

• url：請(qǐng)求路徑
• type：請(qǐng)求方式
• date：請(qǐng)求參數(shù)，想對(duì)應(yīng)于原生JS實(shí)現(xiàn)的，data: "username=admin&age=20"
• success：響應(yīng)成功后的回調(diào)函數(shù)
• error：果請(qǐng)求響應(yīng)出現(xiàn)錯(cuò)誤，會(huì)執(zhí)行的回調(diào)函數(shù)
• dateType：設(shè)置接受到的響應(yīng)數(shù)據(jù)的格式（上例中未寫(xiě)）

當(dāng)然它的參數(shù)和設(shè)置選項(xiàng)不止這些，在這里只選擇了一些相對(duì)簡(jiǎn)單或者說(shuō)必須的，詳情可以參考 JQuery API 文檔

舉個(gè)例子：

在 Servlet 和 html 均不變的基礎(chǔ)上，我們修改 js代碼，使用jquery的方式來(lái)實(shí)現(xiàn)同樣的功能

<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("發(fā)生錯(cuò)誤");
            }
        });
    }

</script>

經(jīng)過(guò)測(cè)試結(jié)果是一樣的

image

JQuery確實(shí)極大的簡(jiǎn)化了我們的代碼，但是如果你只是想快速的實(shí)現(xiàn)這一種需求，JQuery 其實(shí)還提供了兩個(gè)更為簡(jiǎn)單的方式，以取代復(fù)雜 $.ajax

(一) $.get()方法

說(shuō)明：這是一個(gè)簡(jiǎn)單的 GET 請(qǐng)求功能，來(lái)取代復(fù)雜的 $.ajax

完整結(jié)構(gòu)： $.get(url,[data],callback,type)

• url：待載入頁(yè)面的URL地址

• data：待發(fā)送 Key/value 參數(shù)

• callback：載入成功時(shí)回調(diào)函數(shù)

• type：返回內(nèi)容格式，xml, html, script, json, text, _default

這種方式旨在快速的實(shí)現(xiàn)請(qǐng)求，當(dāng)請(qǐng)求成功的時(shí)候可以調(diào)用回調(diào)函數(shù)，如果需要在出錯(cuò)的時(shí)候執(zhí)行函數(shù)，還是需要使用 $.ajax()

(二) $.post()方法

說(shuō)明：這是一個(gè)簡(jiǎn)單的 POST 請(qǐng)求功能，來(lái)取代復(fù)雜的 $.ajax

完整結(jié)構(gòu)： $.post(url, [data], [callback], [type])

• url：發(fā)送請(qǐng)求地址

• data：待發(fā)送 Key/value 參數(shù)

• callback：發(fā)送成功時(shí)回調(diào)函數(shù)

• type：返回內(nèi)容格式，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>

image

image

總結(jié)：$.get()方法 和 $.post()方法方法均可以快速簡(jiǎn)潔的完成一些基本操作，如果操作比較復(fù)雜，還是需要使用 $.ajax()方式

總結(jié)：

AJAX 的的基本知識(shí)，以及使用 JavaScript 和 JQuery 這兩種實(shí)現(xiàn)方式，我們就已經(jīng)介紹完了，到現(xiàn)在為止，如何發(fā)起并且接收響應(yīng)已經(jīng)不在話下了，并且我們對(duì) AJAX 有了一定的認(rèn)識(shí)，但是 AJAX 的一些應(yīng)用場(chǎng)景，以及AJAX 如何搭配 常見(jiàn)的 如 JSON 等數(shù)據(jù)格式，實(shí)現(xiàn)前后端的交互，并沒(méi)有提到，我們就放到后面說(shuō)，將全部的內(nèi)容擠到一起，無(wú)論是從篇幅或者說(shuō)內(nèi)容的針對(duì)性都是不夠強(qiáng)的，不過(guò)AJAX 也確實(shí)是我們成長(zhǎng)路上不可不學(xué)的一門(mén)技術(shù)了，有什么不清楚的， 可以嘗試著看一些國(guó)內(nèi)外的資源站點(diǎn)，w3chool、tutorialspoint 等等，多翻翻 API 文檔，尤其是一些英文的文檔和資料，我感覺(jué)對(duì)我個(gè)人幫助還是很大的。

同樣在此感謝大家的支持！謝謝！

大家的每一個(gè)閱讀和贊我都當(dāng)做了喜歡！??

結(jié)尾：

如果文章中有什么不足，或者錯(cuò)誤的地方，歡迎大家留言分享想法，感謝朋友們的支持！

如果能幫到的話，那就來(lái)關(guān)注我吧！如果你更喜歡微信文章的閱讀方式，也可以關(guān)注我的公眾號(hào)哈

在這里的我們素不相識(shí)，卻都在為了自己的夢(mèng)而努力 ?

一個(gè)堅(jiān)持推送原創(chuàng)開(kāi)發(fā)技術(shù)文章的公眾號(hào)：理想二旬不止

image