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

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

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

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

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

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

Suggest

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

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

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

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

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

12.1.1Ajax簡介Ajax（AsynchronousJavascriptAndXML，異步JavaScript

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

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

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

以及Opera）均支持XMLHttpRequest

對(duì)象（new

XMLHttpRequest()），老版本的Internet

Explorer（IE5

和IE6）使用ActiveXObject對(duì)象（new

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

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

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

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

12.1.3Ajax向服務(wù)器發(fā)送請(qǐng)求2．POST請(qǐng)求POST方式請(qǐng)求，示例代碼如下：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ā)從入門到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

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

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

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

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

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

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

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

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

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

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

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

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

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

"pname":"陳恒", "password":"123456", "page":40}《JavaWeb開發(fā)從入門到實(shí)戰(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個(gè)或多個(gè)以英文“,”分隔的值的列表組成。數(shù)組結(jié)構(gòu)的語法結(jié)構(gòu)如下：[

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

"sno":"2023022299999",

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

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

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

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

12.2.3JSON在Ajax中的使用從12.2.2節(jié)可以看出拼寫一個(gè)JSON文本變量非常繁瑣且易出錯(cuò)。若服務(wù)器需要響應(yīng)一個(gè)結(jié)構(gòu)復(fù)雜、數(shù)據(jù)量大的數(shù)據(jù)對(duì)象，那么轉(zhuǎn)換過程將更加費(fèi)時(shí)費(fèi)力。因此，在實(shí)際開發(fā)中，Java對(duì)象和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個(gè)Jackson開源包，本書采用的版本是2.14.1，讀者可通過地址“/artifact/com.fasterxml.jackson.core”下載得到?！禞avaWeb開發(fā)從入門到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

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

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

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

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

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

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

Less，Do

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

6.0+、FF

1.5+、Safari

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

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

12.3.2jQuery安裝首先從jQuery官方網(wǎng)站/download/下載jQuery插件：jquery-3.6.0.min.js，將其復(fù)制到Web項(xiàng)目開發(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ā)從入門到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

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

12.3.3jQuery語法jQuery語法是通過選取HTML元素，并對(duì)選取的元素執(zhí)行某些操作，語法如下：$(selector).action()其中，美元符號(hào)$定義jQuery；選擇符（selector）“查詢”"和“查找”HTML元素；jQuery的action()執(zhí)行對(duì)元素的操作。示例如下：$("#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"的表單字段的值?！禞avaWeb開發(fā)從入門到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

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

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