第10章Ajax、JSON以及jQuery技術學習目的與要求本章重點介紹Ajax、JSON以及jQuery。通過本章的學習，理解Ajax技術原理，掌握Ajax、JSON以及jQuery等技術應用。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

目錄《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.1Ajax技術10.2JSON技術10.3jQuery技術10.1Ajax技術在2005年，Google通過其Google

Suggest

使Ajax技術變得流行起來。Google

Suggest使用Ajax技術創造出動態性極強的Web界面：在Google的搜索框輸入關鍵字時，JavaScript會把這些字符發送到服務器，然后服務器會返回一個搜索建議的列表。后來Google又推出了Google

Maps這種典型的富客戶端應用。Google

Maps的地圖支持鼠標的拖動、放大和縮小，地圖隨著鼠標的拖動進行新數據的加載，但頁面本身無須重新加載。這種整頁無刷新下的動態交互性效果，使Web應用達到了近似桌面應用的效果，Ajax技術隨之迅速發展。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.1.1Ajax簡介Ajax（AsynchronousJavascriptAndXML，異步JavaScript

和XML）是一種創建交互式網頁應用的網頁開發技術，使得“不刷新頁面向服務器發起請求”成為可能。Ajax應用與傳統Web應用相比較，客戶端瀏覽器通過JavaScript事件觸發對Ajax引擎的調用，Ajax引擎在Ajax應用中擔負著一個中間層的任務，負責收集數據并通過Ajax的XMLHttpRequest對象向服務器發送HTTP請求，服務器處理完成后返回XML、JSON以及文本等類型的響應結果，Ajax引擎根據響應結果類型進行解析后再配合HTML和CSS渲染，將結果顯示到客戶端頁面。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.1.2XMLHttpRequest對象XMLHttpRequest對象是Ajax的核心，Ajax引擎使用XMLHttpRequest和服務器進行異步通信，是Ajax技術得以實現的一個重要的JavaScript對象。所有現代瀏覽器（IE7+、Firefox、Chrome、Safari

以及Opera）均支持XMLHttpRequest

對象（new

XMLHttpRequest()），老版本的Internet

Explorer（IE5

和IE6）使用ActiveXObject對象（new

ActiveXObject("Microsoft.XMLHTTP")）。【例10-1】創建JSP頁面example10_1.jsp，在該頁面的JavaScript代碼中創建XMLHttpRequest對象。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.1.3Ajax向服務器發送請求創建XMLHttpRequest對象后，Ajax就可以使用XMLHttpRequest對象的open()和send()方法將請求發送到服務器，請求可分為GET方式請求和POST方式請求。1．GET請求GET方式請求，示例代碼如下：xmlhttp.open("GET","AjaxTestServlet",true);xmlhttp.send();其中，open(method,url,async)方法的參數method規定請求的類型，url指定請求的URL地址，async指定是否異步處理請求，true表示請求本質上異步的，默認值是true；send(content)方法將請求發送到服務器，如果請求聲明為異步，該方法就立即返回，否則將會等待直到接收到響應為止，可選參數content可以是DOM對象的實例、輸入流或者字符串，傳入參數的內容作為請求體的一部分發送，content參數僅用于POST請求。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.1.3Ajax向服務器發送請求2．POST請求POST方式請求，示例代碼如下：xmlhttp.open("POST","AjaxTestServlet",true);xmlhttp.send();如果需要像HTML表單那樣提交POST數據，首先使用setRequestHeader()來添加HTTP頭，然后在send()方法中規定希望發送的數據，示例代碼如下：xmlhttp.open("POST","AjaxTestServlet",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("uname=chenheng&upwd=123456");其中，setRequestHeader(header,value)方法的header參數規定頭的名稱，value規定頭的值。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.1.4Ajax獲得服務器的響應Ajax向服務器發送請求后，如需獲得服務器的響應，可以使用XMLHttpRequest對象的responseText或responseXML屬性。示例代碼如下：document.getElementById("myResponse").innerHTML=xmlhttp.responseText;responseText屬性包含客戶端接收到服務器的HTTP響應的文本內容。當readyState屬性值為0（表示請求未初始化）、1（服務器連接已建立）或2（請求已接收）時，responseText包含一個空字符串；當readyState屬性值為3（請求處理中）時，responseText包含還未完成的響應信息；當readyState屬性值為4（請求已完成，且響應已就緒）時，responseText包含完整的響應信息。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.1.4Ajax獲得服務器的響應Ajax獲得服務器的響應時，除了用到responseText、responseXML和readyState屬性外，還經常用到onreadystatechange和status屬性。onreadystatechange屬性指定每次狀態改變所觸發事件的事件處理函數。也就是說，每當readyState屬性改變時，就會調用onreadystatechange屬性指定的函數。status屬性描述了HTTP狀態碼。需要注意的是只有readyState的值為3或4時，才能使用status屬性。常用的狀態碼有200（請求成功）、202（請求被接收但處理未完成）、400（錯誤請求）、404（請求資源未找到）和500（內部服務器錯誤）。在onreadystatechange事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。當readyState等于4且狀態為200時，表示響應已就緒，代碼如下：xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4&&xmlhttp.status==200){document.getElementById("myResponse").innerHTML=xmlhttp.responseText;}}《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.1.5Ajax示例一個Ajax應用的實現一般需要以下幾個步驟：1．在頁面中定義Ajax請求的觸發事件；2．創建Ajax對象varxmlhttp=newXMLHttpRequest()；3．確定請求地址和請求參數；4．調用XMLHttpRequest對象的open()方法建立對服務器的調用xmlhttp.open("GET","AjaxTestServlet",true)；5．通過XMLHttpRequest對象的onreadystatechange屬性指定響應事件的處理函數；6．在函數中根據響應狀態進行數據獲取和數據處理工作；7．調用XMLHttpRequest對象的send()方法發送請求xmlhttp.send(null);【例10-2】創建JSP頁面example10_2.jsp，在該頁面中演示一個在用戶輸入完學號時，觸發Ajax異步請求，從服務器獲取學號所對應的學生信息，并對頁面中相應的學生信息進行更新填充。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

目錄《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.1Ajax技術10.2JSON技術10.3jQuery技術10.2JSON技術JSON（JavaScriptObjectNotation，JS對象標記）是一種輕量級的數據交換格式。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.2.1JSON的數據結構與XML一樣，JSON也是基于純文本的數據格式。它有兩種數據結構。1．對象結構對象結構以“{”開始，以“}”結束。中間部分由0個或多個以英文“,”分隔的key/value對構成，key和value之間以英文“:”分隔。對象結構的語法結構如下：{

key1:value1, key2:value2, …}其中，key必須為String類型，value可以是String、Number、Object、Array等數據類型。例如，一個person對象包含姓名、密碼、年齡等信息，使用JSON的表示形式如下：{

"pname":"陳恒", "password":"123456", "page":40}《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.2.1JSON的數據結構2．數組結構數組結構以“[”開始，以“]”結束。中間部分由0個或多個以英文“,”分隔的值的列表組成。數組結構的語法結構如下：[

value1, value2, …]上述兩種（對象、數組）數據結構也可以分別組合構成更為復雜的數據結構。例如：一個student對象包含sno、sname、hobby和college對象，其JSON的表示形式如下：{

"sno":"2023022299999",

"sname":"張三", "hobby":["籃球","足球"], "college":{ "cname":"清華大學", "city":"北京" }}《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.2.2JSON在JavaScript中的使用JSON是JavaScript的原生格式，在JavaScript中處理JSON數據不需要任何API或工具包。【例10-3】創建JSP頁面example10_3.jsp，在該頁面的JavaScript中處理JSON數據。在JavaScript中可以使用eval()函數將JSON文本轉換為JavaScript對象。例如，對Ajax請求響應結果（假設響應數據格式為JSON）的轉換。varjsonText="{\"sname\":\"陳恒\",\"sage\":\"88\"}";//兩邊加圓括號將參數值無條件地視為表達式進行解析varjsObj=eval("("+jsonText+")");在JavaScript中可以使用JSON.stringify()方法將JavaScript對象轉換為字符串。varobj={"sname":"陳恒","sno":20230101,"sage":88};varmyJSON=JSON.stringify(obj);《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.2.3JSON在Ajax中的使用從10.2.2節可以看出拼寫一個JSON文本變量非常繁瑣且易出錯。若服務器需要響應一個結構復雜、數據量大的數據對象，那么轉換過程將更加費時費力。因此，在實際開發中，Java對象和JSON數據之間的互相轉換通常使用第三方插件來協助完成，例如：JSON-Lib、Jackson、Gson和FastJson等。本節以Jackson為例，講解JSON在Ajax中的使用。Jackson開源包及其描述如下所示。

jackson-annotations.jar：JSON轉換注解包。

jackson-core.jar：JSON轉換核心包。

jackson-databind.jar：JSON轉換的數據綁定包。以上3個Jackson開源包，本書采用的版本是2.14.1，讀者可通過地址“/artifact/com.fasterxml.jackson.core”下載得到。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.2.3JSON在Ajax中的使用在使用Jackson插件進行Java對象和JSON數據之間的互相轉換時，需要將以上3個Jackson開源包復制到Web應用的/WEB-INF/lib目錄下，本章將以上3個Jackson開源包復制到Web應用ch10的/WEB-INF/lib目錄下。下面使用Jackson插件將例10-2的代碼進行改進。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

目錄《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.1Ajax技術10.2JSON技術10.3jQuery技術10.3.1jQuery簡介jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write

Less，Do

More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE

6.0+、FF

1.5+、Safari

2.0+、Opera9.0+等。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.3.2jQuery安裝首先從jQuery官方網站/download/下載jQuery插件：jquery-3.6.0.min.js，將其復制到Web項目開發目錄的webapp/js目錄下。然后在JSP頁面中，通過<scripttype="text/javascript"src="js/jquery-3.6.0.min.js"></script>代碼將jquery-3.6.0.min.js引入當前頁面中。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.3.3jQuery語法jQuery語法是通過選取HTML元素，并對選取的元素執行某些操作，語法如下：$(selector).action()其中，美元符號$定義jQuery；選擇符（selector）“查詢”"和“查找”HTML元素；jQuery的action()執行對元素的操作。示例如下：$("#test").hide()隱藏所有id="test"的元素；$("#test").text("Helloworld!")設置id="test"元素的文本內容為“Helloworld!”；$("#test").html("<b>Helloworld!</b>")設置id="test"元素的內容（包括HTML標記）；$("#test").val("chenheng")設置id="test"的表單字段的值；$("#test").text()返回id="test"元素的文本內容；$("#test").html()返回id="test"元素的內容（包括HTML標記）；$("#test").val()獲得id="test"的表單字段的值。《JavaWeb開發從入門到實戰（微課視頻版）（IntelliJIDEA版）》陳恒

主編，清華大學出版社，2024

10.3.4jQuery對Ajax的實現jQuery提供多個與Ajax有關的方法，下面結合實例介紹兩個常用的方法：ajax()方法和load()方法。1．ajax()方法$.ajax()方法只有一個參數：參數key/value對象，包含各配置及回調函數信息。示例如例10-4所示。【例10-4】編寫JSP頁面example10_4.jsp，在