Java Web 開發(fā)從入門到實戰(zhàn) 課件 第12章 Ajax、JSON以及jQuery技術(shù)

第12章Ajax、JSON以及jQuery技術(shù)學(xué)習(xí)目的與要求本章重點介紹Ajax、JSON以及jQuery。通過本章的學(xué)習(xí)，理解Ajax技術(shù)原理，掌握Ajax、JSON以及jQuery等技術(shù)應(yīng)用。《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

目錄12.1Ajax技術(shù)12.2JSON技術(shù)12.3jQuery技術(shù)《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.1Ajax技術(shù)在2005年，Google通過其Google

Suggest

使Ajax技術(shù)變得流行起來。Google

Suggest使用Ajax技術(shù)創(chuàng)造出動態(tài)性極強(qiáng)的Web界面：在Google的搜索框輸入關(guān)鍵字時，JavaScript會把這些字符發(fā)送到服務(wù)器，然后服務(wù)器會返回一個搜索建議的列表。后來Google又推出了Google

Maps這種典型的富客戶端應(yīng)用。Google

Maps的地圖支持鼠標(biāo)的拖動、放大和縮小，地圖隨著鼠標(biāo)的拖動進(jìn)行新數(shù)據(jù)的加載，但頁面本身無須重新加載。這種整頁無刷新下的動態(tài)交互性效果，使Web應(yīng)用達(dá)到了近似桌面應(yīng)用的效果，Ajax技術(shù)隨之迅速發(fā)展?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.1.1Ajax簡介Ajax（AsynchronousJavascriptAndXML，異步JavaScript

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

主編，清華大學(xué)出版社，2024

12.1.2XMLHttpRequest對象XMLHttpRequest對象是Ajax的核心，Ajax引擎使用XMLHttpRequest和服務(wù)器進(jìn)行異步通信，是Ajax技術(shù)得以實現(xiàn)的一個重要的JavaScript對象。所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari

以及Opera）均支持XMLHttpRequest

對象（new

XMLHttpRequest()），老版本的Internet

Explorer（IE5

和IE6）使用ActiveXObject對象（new

ActiveXObject("Microsoft.XMLHTTP")）?！纠?2-1】創(chuàng)建JSP頁面example12_1.jsp，在該頁面的JavaScript代碼中創(chuàng)建XMLHttpRequest對象?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

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

主編，清華大學(xué)出版社，2024

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

主編，清華大學(xué)出版社，2024

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

主編，清華大學(xué)出版社，2024

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

主編，清華大學(xué)出版社，2024

12.1.5Ajax示例一個Ajax應(yīng)用的實現(xiàn)一般需要以下幾個步驟：1．在頁面中定義Ajax請求的觸發(fā)事件；2．創(chuàng)建Ajax對象varxmlhttp=newXMLHttpRequest()；3．確定請求地址和請求參數(shù)；4．調(diào)用XMLHttpRequest對象的open()方法建立對服務(wù)器的調(diào)用xmlhttp.open("GET","AjaxTestServlet",true)；5．通過XMLHttpRequest對象的onreadystatechange屬性指定響應(yīng)事件的處理函數(shù)；6．在函數(shù)中根據(jù)響應(yīng)狀態(tài)進(jìn)行數(shù)據(jù)獲取和數(shù)據(jù)處理工作；7．調(diào)用XMLHttpRequest對象的send()方法發(fā)送請求xmlhttp.send(null);【例12-2】創(chuàng)建JSP頁面example12_2.jsp，在該頁面中演示一個在用戶輸入完學(xué)號時，觸發(fā)Ajax異步請求，從服務(wù)器獲取學(xué)號所對應(yīng)的學(xué)生信息，并對頁面中相應(yīng)的學(xué)生信息進(jìn)行更新填充?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

目錄12.1Ajax技術(shù)12.2JSON技術(shù)12.3jQuery技術(shù)《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.2JSON技術(shù)JSON（JavaScriptObjectNotation，JS對象標(biāo)記）是一種輕量級的數(shù)據(jù)交換格式?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

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

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

"pname":"陳恒", "password":"123456", "page":40}《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.2.1JSON的數(shù)據(jù)結(jié)構(gòu)2．?dāng)?shù)組結(jié)構(gòu)數(shù)組結(jié)構(gòu)以“[”開始，以“]”結(jié)束。中間部分由0個或多個以英文“,”分隔的值的列表組成。數(shù)組結(jié)構(gòu)的語法結(jié)構(gòu)如下：[

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

"sno":"2023022299999",

"sname":"張三", "hobby":["籃球","足球"], "college":{ "cname":"清華大學(xué)", "city":"北京" }}《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.2.2JSON在JavaScript中的使用JSON是JavaScript的原生格式，在JavaScript中處理JSON數(shù)據(jù)不需要任何API或工具包?！纠?2-3】創(chuàng)建JSP頁面example12_3.jsp，在該頁面的JavaScript中處理JSON數(shù)據(jù)。在JavaScript中可以使用eval()函數(shù)將JSON文本轉(zhuǎn)換為JavaScript對象。例如，對Ajax請求響應(yīng)結(jié)果（假設(shè)響應(yīng)數(shù)據(jù)格式為JSON）的轉(zhuǎn)換。varjsonText="{\"sname\":\"陳恒\",\"sage\":\"88\"}";//兩邊加圓括號將參數(shù)值無條件地視為表達(dá)式進(jìn)行解析varjsObj=eval("("+jsonText+")");在JavaScript中可以使用JSON.stringify()方法將JavaScript對象轉(zhuǎn)換為字符串。varobj={"sname":"陳恒","sno":20230101,"sage":88};varmyJSON=JSON.stringify(obj);《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

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

jackson-annotations.jar：JSON轉(zhuǎn)換注解包。

jackson-core.jar：JSON轉(zhuǎn)換核心包。

jackson-databind.jar：JSON轉(zhuǎn)換的數(shù)據(jù)綁定包。以上3個Jackson開源包，本書采用的版本是2.14.1，讀者可通過地址“/artifact/com.fasterxml.jackson.core”下載得到?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.2.3JSON在Ajax中的使用在使用Jackson插件進(jìn)行Java對象和JSON數(shù)據(jù)之間的互相轉(zhuǎn)換時，需要將以上3個Jackson開源包復(fù)制到Web應(yīng)用的/WEB-INF/lib目錄下，本章將以上3個Jackson開源包復(fù)制到Web應(yīng)用ch12的/WEB-INF/lib目錄下。下面使用Jackson插件將例12-2的代碼進(jìn)行改進(jìn)?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

目錄12.1Ajax技術(shù)12.2JSON技術(shù)12.3jQuery技術(shù)《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.3.1jQuery簡介jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設(shè)計的宗旨是“write

Less，Do

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

6.0+、FF

1.5+、Safari

2.0+、Opera9.0+等?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.3.2jQuery安裝首先從jQuery官方網(wǎng)站/download/下載jQuery插件：jquery-3.6.0.min.js，將其復(fù)制到Web項目開發(fā)目錄的webapp/js目錄下。然后在JSP頁面中，通過<scripttype="text/javascript"src="js/jquery-3.6.0.min.js"></script>代碼將jquery-3.6.0.min.js引入當(dāng)前頁面中?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

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

主編，清華大學(xué)出版社，2024

12.3.4jQuery對Ajax的實現(xiàn)jQuery提供多個與Ajax有關(guān)的方法，下面結(jié)合實例介紹兩個常用的方法：ajax()方法和load()方法。1．a(chǎn)jax()方法$.ajax()方法只有一個參數(shù)：參數(shù)key/value對象，包含各配置及回調(diào)函數(shù)信息。示例如例12-4所示?！纠?2-4】編寫JSP頁面exampl