JavaScript+jQuery前端開(kāi)發(fā)基礎(chǔ)教程（第2版）（微課版）第12章

JavaScript+jQuery前端開(kāi)發(fā)基礎(chǔ)教程微課版第12章AJAX本章主要內(nèi)容：加載服務(wù)器數(shù)據(jù)get()方法和post()方法獲取JSON數(shù)據(jù)獲取腳本事件處理12.1.1AJAX概述AJAX主要涉及JavaScript、HTML、XML和DOM等多種客戶端網(wǎng)頁(yè)技術(shù)。在傳統(tǒng)Web開(kāi)發(fā)模式下，獲取服務(wù)器數(shù)據(jù)意味著瀏覽器會(huì)發(fā)起一個(gè)HTTP請(qǐng)求，服務(wù)器接收到請(qǐng)求后，返回響應(yīng)結(jié)果。瀏覽器接收到響應(yīng)結(jié)果后，將其顯示在瀏覽器窗口中。在這種模式下，即使僅修改頁(yè)面中的一個(gè)字符，也需要從服務(wù)器返回包含該字符的整個(gè)HTML文檔內(nèi)容，并且，在瀏覽器顯示出響應(yīng)結(jié)果之前，用戶只能等待。傳統(tǒng)Web開(kāi)發(fā)模式的顯著缺點(diǎn)是，響應(yīng)HTTP請(qǐng)求總是需要返回新頁(yè)面的全部HTML內(nèi)容，這增加了網(wǎng)絡(luò)數(shù)據(jù)流量和服務(wù)器計(jì)算工作量，用戶體驗(yàn)也差。AJAX技術(shù)在后臺(tái)發(fā)起HTTP請(qǐng)求，不影響用戶繼續(xù)瀏覽當(dāng)前頁(yè)面。服務(wù)器只返回更新頁(yè)面必需的數(shù)據(jù)，這些數(shù)據(jù)通常為一個(gè)字符串。瀏覽器在接收到響應(yīng)后，在不刷新頁(yè)面的情況下，通過(guò)JavaScript腳本將響應(yīng)內(nèi)容顯示在當(dāng)前頁(yè)面中。AJAX使用XMLHttpRequest對(duì)象來(lái)完成HTTP請(qǐng)求。典型的AJAX請(qǐng)求腳本通常包含下列基本步驟。（1）創(chuàng)建XMLHttpRequest對(duì)象。（2）設(shè)置readystatechange事件處理函數(shù)。（3）打開(kāi)請(qǐng)求。（4）發(fā)送請(qǐng)求。AJAX請(qǐng)求腳本基本結(jié)構(gòu)如下。var

xhr

=

getXMLHttpRequest()

//創(chuàng)建XMLHttpRequest對(duì)象xhr.onreadystatechange

=

function

()

{

//設(shè)置readystatechange事件處理函數(shù)

……

//處理服務(wù)器返回的響應(yīng)結(jié)果}xhr.open("GET",

"ajaxtext.txt")

//打開(kāi)請(qǐng)求xhr.send()

//發(fā)送請(qǐng)求12.1.2部署服務(wù)器本書(shū)采用Node.js作為

Web服務(wù)器，下面介紹如何在Windows10中部署Node.js，具體操作步驟如下。……12.1.3創(chuàng)建XMLHttpRequest對(duì)象Edge、Firefox、Chrome、Safari及Opera等瀏覽器均支持調(diào)用內(nèi)置的XMLHttpRequest()函數(shù)來(lái)創(chuàng)建XMLHttpRequest對(duì)象。var

xhr

=

new

XMLHttpRequest()12.1.4XMLHttpRequest對(duì)象常用屬性1．onreadystatechange該屬性用于設(shè)置readystatechange事件處理函數(shù)。2．readystate該屬性用于返回AJAX請(qǐng)求的處理狀態(tài)。readystate屬性有下列5種取值。0：請(qǐng)求未初始化。1：服務(wù)器連接已建立。2：請(qǐng)求已接收。3：請(qǐng)求處理中。4：請(qǐng)求已完成，且響應(yīng)已就緒。readystate屬性發(fā)生改變時(shí)會(huì)產(chǎn)生readystatechange事件，JavaScript調(diào)用事件處理函數(shù)處理響應(yīng)。3．status屬性status屬性返回服務(wù)器處理HTTP請(qǐng)求的狀態(tài)碼。常用狀態(tài)碼如下。200：請(qǐng)求已成功處理。202：請(qǐng)求已接受，但未成功處理。400：錯(cuò)誤的請(qǐng)求。404：文件未找到。408：請(qǐng)求超時(shí)。500：服務(wù)器內(nèi)部錯(cuò)誤。status屬性值在獲得了服務(wù)器返回的響應(yīng)后才有意義。4．responseText和responseXMLresponseText和responseXML屬性都用于獲得服務(wù)器的響應(yīng)內(nèi)容。如果將服務(wù)器響應(yīng)內(nèi)容作為普通文本字符串處理，則應(yīng)使用responseText屬性。如果將服務(wù)器的響應(yīng)內(nèi)容作為XML對(duì)象來(lái)解析，則應(yīng)使用responseXML屬性。12.1.5XMLHttpRequest對(duì)象常用方法1．open()方法open()方法用于設(shè)置AJAX發(fā)起HTTP請(qǐng)求時(shí)采用的方式、請(qǐng)求目標(biāo)和其他參數(shù)，其基本語(yǔ)法格式如下。xhr.open("method"

,

"url"

,

asyn

,

"username"

,

"password"

)其中，xhr為XMLHttpRequest對(duì)象。method為請(qǐng)求方式，例如GET或POST。url為請(qǐng)求的服務(wù)器文件URL。asyn為true（同步）或false（異步，默認(rèn)值）。username為用戶名，password為密碼。除了method和url外，其他參數(shù)均可省略。通常，只請(qǐng)求服務(wù)器數(shù)據(jù)時(shí)使用GET方式，向服務(wù)器提交數(shù)據(jù)時(shí)使用POST方式。請(qǐng)求的服務(wù)器文件的類(lèi)型不限，.xml、.txt、.asp、.aspx、.jsp或其他文件類(lèi)型均可。典型的AJAX是異步操作，即open()方法的第3個(gè)參數(shù)為false。如果請(qǐng)求的服務(wù)器文件需要驗(yàn)證用戶身份，則需要在open()方法中提供用戶名和密碼。open()方法中提供的用戶名和密碼以明文方式傳遞，存在被攔截的風(fēng)險(xiǎn)，慎用。例如，下面的語(yǔ)句采用GET方式異步請(qǐng)求服務(wù)器端的data.xml文件。xhr.open("GET"

,

"data.xml")2．send()方法send()方法用于將HTTP請(qǐng)求發(fā)送給服務(wù)器，其基本語(yǔ)法格式如下。xhr.send(str)參數(shù)str為傳遞給服務(wù)器的數(shù)據(jù)（數(shù)據(jù)封裝為URL查詢參數(shù)格式），可以省略。例如，服務(wù)器端處理查詢的ASP文件為doQuery.asp，可用下面的語(yǔ)句來(lái)發(fā)起HTTP請(qǐng)求。var

str

=

"type=程序設(shè)計(jì)&kword=Java"xhr.open("POST",

"doQuery.asp")xhr.send(str)也可將查詢參數(shù)放在open()方法的url中。var

str

=

"type=程序設(shè)計(jì)&kword=Java"xhr.open("POST",

"doQuery.asp?"

+

str)xhr.send()3．setRequestHeader()方法setRequestHeader()方法用于設(shè)置HTTP請(qǐng)求頭。xhr.setRequestHeader('Content-type',

'text/plain,charset=UTF-8')setRequestHeader()方法必須在open()方法之后、send()方法之前進(jìn)行調(diào)用，否則會(huì)出錯(cuò)4．getRequestHeader()方法getRequestHeader()方法返回服務(wù)器響應(yīng)的HTTP頭參數(shù)。var

ctype

=

xhr.getRequestHeader('Content-type')5．getAllRequestHeaders()方法getAllRequestHeaders()方法以字符串的形式返回服務(wù)器響應(yīng)的HTTP頭的全部參數(shù)。var

rheaders=

xhr.getAllRequestHeaders()6．a(chǎn)bort()方法abort()方法用于停止當(dāng)前異步請(qǐng)求。xhr.abort()【例12-2】獲取AJAX請(qǐng)求狀態(tài)和響應(yīng)結(jié)果。12.1.6處理普通文本響應(yīng)結(jié)果XMLHttpRequest對(duì)象的responseText屬性用于獲得普通文本響應(yīng)結(jié)果。在服務(wù)器端，響應(yīng)內(nèi)容通常使用腳本動(dòng)態(tài)生成?！纠?2-3】采用GET方式向服務(wù)器提交學(xué)生學(xué)號(hào)，返回其姓名、班級(jí)、年齡等信息?！?2.1.7處理XML響應(yīng)結(jié)果responseXML屬性返回包含響應(yīng)結(jié)果的XML對(duì)象，進(jìn)一步使用XMLDOM解析即可獲得具體數(shù)據(jù)。XMLDOM與HTMLDOM類(lèi)似，限于篇幅，本書(shū)不再詳細(xì)介紹XMLDOM?！纠?2-4】修改例12-3，以XML文檔格式返回響應(yīng)結(jié)果，將其轉(zhuǎn)換為字符串顯示在頁(yè)面中。12.1.8處理JSON響應(yīng)結(jié)果JSON字符串在JavaScript中可直接轉(zhuǎn)換為對(duì)象。下面是一個(gè)JSON字符串。{class:"高一、8班",name:"李雷雷",age:15}{}表示對(duì)象常量，eval()函數(shù)可將JSON字符串轉(zhuǎn)換為對(duì)象。var

a

=

eval('({class:"高一、8班",name:"李雷雷",age:15})')執(zhí)行該語(yǔ)句后，a.class、、a.age分別為對(duì)象的3個(gè)屬性。在服務(wù)器腳本中，可將響應(yīng)內(nèi)容構(gòu)造為JSON字符串返回。【例12-5】修改例12-3，以JSON字符串返回響應(yīng)結(jié)果。12.2使用<script>完成HTTP請(qǐng)求<script>標(biāo)記可向服務(wù)器提交HTTP請(qǐng)求，其原理為，將一個(gè)新的<script>標(biāo)記插入頁(yè)面中時(shí)，若其src屬性設(shè)置為URL，瀏覽器會(huì)向服務(wù)器發(fā)送該URL的請(qǐng)求。這種方式發(fā)起的HTTP請(qǐng)求是同步執(zhí)行的——等同于用XMLHttpRequest對(duì)象執(zhí)行同步請(qǐng)求，用戶必須等待響應(yīng)返回，所以適用于耗時(shí)較小的操作。服務(wù)器返回結(jié)果應(yīng)包含一個(gè)函數(shù)調(diào)用表達(dá)式，JavaScript執(zhí)行函數(shù)來(lái)處理返回結(jié)果。例如，下面的服務(wù)器腳本輸出返回結(jié)果。Response.Write('getInfo('+rs+')')getInfo()為客戶端腳本中定義的函數(shù)。rs為返回給客戶端的數(shù)據(jù)，它作為getInfo()函數(shù)的參數(shù)。響應(yīng)結(jié)果返回到客戶端時(shí)，等同于通過(guò)<script>標(biāo)記來(lái)調(diào)用getInfo()函數(shù)。要使用<script>完成HTTP請(qǐng)求，需要使用腳本向當(dāng)前頁(yè)面添加一個(gè)<script>標(biāo)記，并定義處理響應(yīng)結(jié)果的函數(shù)?！纠?2-6】修改例12-3，使用<script>完成HTTP請(qǐng)求。12.3.1加載簡(jiǎn)單數(shù)據(jù)load()方法最簡(jiǎn)單的用法是直接將服務(wù)器返回?cái)?shù)據(jù)加載到頁(yè)面元素中，其基本語(yǔ)法格式如下。$(選擇器).load(url)其中，$(選擇器)匹配的頁(yè)面元素用于顯示服務(wù)器返回的數(shù)據(jù)。url為請(qǐng)求的服務(wù)器資源的URL，返回的數(shù)據(jù)通常為HTML格式的文本?！纠?2-7】從服務(wù)器加載簡(jiǎn)單數(shù)據(jù)。12.3.2篩選加載的數(shù)據(jù)jQuery允許對(duì)load()方法返回的數(shù)據(jù)應(yīng)用選擇器，基本語(yǔ)法格式如下。$(選擇器).load("url

選擇器")【例12-8】篩選加載的數(shù)據(jù)。12.3.3向服務(wù)器提交數(shù)據(jù)可在load()方法的第2個(gè)參數(shù)中指定提交給服務(wù)器的數(shù)據(jù)，其基本語(yǔ)法格式如下。$(選擇器).load(url,data)其中，參數(shù)data為提交的數(shù)據(jù)，可以是對(duì)象或字符串。包含提交的數(shù)據(jù)時(shí)，load()方法采用POST方式發(fā)起AJAX請(qǐng)求。在本章前面的所有實(shí)例中，采用的均為GET方式。GET方式的HTTP請(qǐng)求，客戶端提交的數(shù)據(jù)包含在URL中，所以在服務(wù)器端需解析URL，以獲得其中的客戶端數(shù)據(jù)。POST方式的HTTP請(qǐng)求，客戶端提交的數(shù)據(jù)包含在請(qǐng)求體中。Node.js接收到客戶端采用POST方式提交的數(shù)據(jù)時(shí)，觸發(fā)request的data事件，可在事件處理函數(shù)中接收客戶端數(shù)據(jù)?？蛻舳藬?shù)據(jù)接收完成后，觸發(fā)request的end事件，可在事件處理處理函數(shù)中處理接收到的數(shù)據(jù)，向客戶端返回響應(yīng)【例12-9】向服務(wù)器提交數(shù)據(jù)。12.3.4指定回調(diào)函數(shù)可為load()方法指定一個(gè)回調(diào)函數(shù)，該函數(shù)在AJAX請(qǐng)求返回?cái)?shù)據(jù)且數(shù)據(jù)已經(jīng)顯示到當(dāng)前頁(yè)面后執(zhí)行?；菊Z(yǔ)法格式如下。$(選擇器).load(url[,data][,callback])其中，callback為回調(diào)函數(shù)名稱，也可是一個(gè)匿名函數(shù)。【例12-10】在load()方法中使用回調(diào)函數(shù)。12.3.5執(zhí)行腳本load()方法返回的數(shù)據(jù)可以包含腳本，腳本作為數(shù)據(jù)的一部分加載到當(dāng)前頁(yè)面元素中，然后被執(zhí)行?！纠?2-11】執(zhí)行來(lái)自服務(wù)器的腳本。12.4.1get()方法get()方法基本語(yǔ)法格式如下。jQuery.get(

url

[,

data

]

[,

success

]

[,

dataType

]

)jQuery.get(

{url:請(qǐng)求url

[,

data:提交的數(shù)據(jù)

]

[,

success:回調(diào)函數(shù)

]

[,

dataType:返回?cái)?shù)據(jù)的類(lèi)型

]})其中，參數(shù)url為請(qǐng)求的服務(wù)器資源的URL。參數(shù)data為對(duì)象或字符串，包含向服務(wù)器提交的數(shù)據(jù)。參數(shù)success為AJAX請(qǐng)求成功完成時(shí)調(diào)用的回調(diào)函數(shù)。參數(shù)dataType為服務(wù)器返回?cái)?shù)據(jù)的數(shù)據(jù)類(lèi)型，通常jQuery可自動(dòng)決定數(shù)據(jù)類(lèi)型。常用的數(shù)據(jù)類(lèi)型有xml、json、script、text或html等。get()方法的參數(shù)url是必需的，其他參數(shù)均可省略。load()方法類(lèi)似于get(url,data,success)。get()方法返回的數(shù)據(jù)通常在success參數(shù)指定的回調(diào)函數(shù)中進(jìn)行處理?；卣{(diào)函數(shù)的3個(gè)參數(shù)依次為封裝了返回?cái)?shù)據(jù)的對(duì)象、表示AJAX請(qǐng)求完成狀態(tài)的字符串（通常為success）和執(zhí)行當(dāng)前AJAX請(qǐng)求的XMLHttpRequest對(duì)象?！纠?2-12】使用get()方法執(zhí)行AJAX請(qǐng)求。12.4.2post()方法post()方法的基本語(yǔ)法格式如下。jQuery.post(

url

[,

data

]

[,

success

]

[,

dataType

]

)jQuery.post(

{url:請(qǐng)求url

[,

data:提交的數(shù)據(jù)

]

[,

success:回調(diào)函數(shù)

]

[,

dataType:返回?cái)?shù)據(jù)的類(lèi)型

]})各參數(shù)含義與get()方法參數(shù)相同。【例12-13】使用post()方法執(zhí)行AJAX請(qǐng)求。12.5獲取JSON數(shù)據(jù)getJSON()方法用于從服務(wù)器返回JSON格式的數(shù)據(jù)，其基本語(yǔ)法格式如下。jQuery.getJSON(

url

[,

data

]

[,

success

])其中，參數(shù)url為請(qǐng)求的服務(wù)器資源的URL。參數(shù)data為對(duì)象或字符串，包含向服務(wù)器提交的數(shù)據(jù)。參數(shù)success為AJAX請(qǐng)求成功完成時(shí)調(diào)用的回調(diào)函數(shù)?；卣{(diào)函數(shù)的3個(gè)參數(shù)依次為封裝了JSON數(shù)據(jù)的對(duì)象、表示AJAX請(qǐng)求完成狀態(tài)的字符串（通常為success）和執(zhí)行當(dāng)前AJAX請(qǐng)求的XMLHttpRequest對(duì)象?！纠?2-14】獲取服務(wù)器端的JSON數(shù)據(jù)。12.6獲取腳本getScript()方法用于請(qǐng)求服務(wù)器端的JavaScript腳本文件，其基本語(yǔ)法格式如下。jQuery.getScript(

url

[,

success

])其中，參數(shù)url為請(qǐng)求的服務(wù)器資源的URL。參數(shù)success為AJAX請(qǐng)求成功完成時(shí)調(diào)用的回調(diào)函數(shù)?；卣{(diào)函數(shù)的3個(gè)參數(shù)依次為包含腳本代碼的字符串、表示AJAX請(qǐng)求完成狀態(tài)的字符串（通常為success）和執(zhí)行當(dāng)前AJAX請(qǐng)求的XMLHttpRequest對(duì)象?！纠?2-15】獲取服務(wù)器端的腳本。12.7.1AJAX事件Query定義的AJAX事件可分為兩種類(lèi)型：本地事件和全局事件。本地AJAX事件指執(zhí)行AJAX請(qǐng)求的XMLHttpRequest對(duì)象所發(fā)生的事件。全局AJAX事件指在執(zhí)行AJAX請(qǐng)求時(shí)Document對(duì)象發(fā)生的事件，對(duì)當(dāng)前頁(yè)面中執(zhí)行的所有AJAX請(qǐng)求均有效。jQuery定義的AJAX事件ajaxStart：全局事件，在開(kāi)始一個(gè)AJAX請(qǐng)求時(shí)會(huì)發(fā)生該事件。beforeSend：本地事件，在開(kāi)始一個(gè)AJAX請(qǐng)求之前發(fā)生該事件，此時(shí)，允許修改XMLHttpRequest對(duì)象（如添加HTTP請(qǐng)求頭參數(shù)等）。ajaxSend：全局事件，在開(kāi)始一個(gè)AJAX請(qǐng)求之前發(fā)生該事件。succes：本地事件，在AJAX請(qǐng)求成功完成時(shí)發(fā)生該事件。ajaxSuccess：全局事件，在AJAX請(qǐng)求成功完成時(shí)發(fā)生該事件。error：本地事件，在AJAX請(qǐng)求執(zhí)行過(guò)程中出現(xiàn)錯(cuò)誤時(shí)發(fā)生該事件。ajaxError：全局事件，在AJAX請(qǐng)求執(zhí)行過(guò)程中出現(xiàn)錯(cuò)誤時(shí)發(fā)生該事件。complete：本地事件，在AJAX請(qǐng)求結(jié)束時(shí)發(fā)生該事件。ajaxComplete：全局事件，在AJAX請(qǐng)求結(jié)束時(shí)發(fā)生該事件。ajaxStop：全局事件，在當(dāng)前頁(yè)面中，所有的AJAX請(qǐng)求結(jié)束時(shí)發(fā)生該事件。12.7.2全局AJAX事件方法jQuery定義了幾個(gè)全局AJAX事件方法，用于注冊(cè)全局AJAX事件處理函數(shù)。jQuery中的全局AJAX事件方法如下。ajaxComplete(handler)：注冊(cè)ajaxComplete事件處理函數(shù)，處理函數(shù)原型為Functi