JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）課件 劉凡馨 第12章 AJAX；第13章 在線咨詢服務(wù)系統(tǒng)

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

xhr

=

getXMLHttpRequest()

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

=

function

()

{

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

……

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

"ajaxtext.txt")

//打開請求xhr.send()

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

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

xhr

=

new

XMLHttpRequest()12.1.4XMLHttpRequest對象常用屬性1．onreadystatechange該屬性用于設(shè)置readystatechange事件處理函數(shù)。2．readystate該屬性用于返回AJAX請求的處理狀態(tài)。readystate屬性有下列5種取值。0：請求未初始化。1：服務(wù)器連接已建立。2：請求已接收。3：請求處理中。4：請求已完成，且響應(yīng)已就緒。readystate屬性發(fā)生改變時會產(chǎn)生readystatechange事件，JavaScript調(diào)用事件處理函數(shù)處理響應(yīng)。3．status屬性status屬性返回服務(wù)器處理HTTP請求的狀態(tài)碼。常用狀態(tài)碼如下。200：請求已成功處理。202：請求已接受，但未成功處理。400：錯誤的請求。404：文件未找到。408：請求超時。500：服務(wù)器內(nèi)部錯誤。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對象來解析，則應(yīng)使用responseXML屬性。12.1.5XMLHttpRequest對象常用方法1．open()方法open()方法用于設(shè)置AJAX發(fā)起HTTP請求時采用的方式、請求目標和其他參數(shù)，其基本語法格式如下。xhr.open("method"

,

"url"

,

asyn

,

"username"

,

"password"

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

,

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

str

=

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

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

str

=

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

"doQuery.asp?"

+

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

'text/plain,charset=UTF-8')setRequestHeader()方法必須在open()方法之后、send()方法之前進行調(diào)用，否則會出錯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)前異步請求。xhr.abort()【例12-2】獲取AJAX請求狀態(tài)和響應(yīng)結(jié)果。12.1.6處理普通文本響應(yīng)結(jié)果XMLHttpRequest對象的responseText屬性用于獲得普通文本響應(yīng)結(jié)果。在服務(wù)器端，響應(yīng)內(nèi)容通常使用腳本動態(tài)生成?！纠?2-3】采用GET方式向服務(wù)器提交學(xué)生學(xué)號，返回其姓名、班級、年齡等信息?！?2.1.7處理XML響應(yīng)結(jié)果responseXML屬性返回包含響應(yīng)結(jié)果的XML對象，進一步使用XMLDOM解析即可獲得具體數(shù)據(jù)。XMLDOM與HTMLDOM類似，限于篇幅，本書不再詳細介紹XMLDOM?！纠?2-4】修改例12-3，以XML文檔格式返回響應(yīng)結(jié)果，將其轉(zhuǎn)換為字符串顯示在頁面中。12.1.8處理JSON響應(yīng)結(jié)果JSON字符串在JavaScript中可直接轉(zhuǎn)換為對象。下面是一個JSON字符串。{class:"高一、8班",name:"李雷雷",age:15}{}表示對象常量，eval()函數(shù)可將JSON字符串轉(zhuǎn)換為對象。var

a

=

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

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

url

[,

data

]

[,

success

]

[,

dataType

]

)jQuery.get(

{url:請求url

[,

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

]

[,

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

]

[,

dataType:返回數(shù)據(jù)的類型

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

url

[,

data

]

[,

success

]

[,

dataType

]

)jQuery.post(

{url:請求url

[,

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

]

[,

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

]

[,

dataType:返回數(shù)據(jù)的類型

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

url

[,

data

]

[,

success

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

url

[,

success

])其中，參數(shù)url為請求的服務(wù)器資源的URL。參數(shù)success為AJAX請求成功完成時調(diào)用的回調(diào)函數(shù)?；卣{(diào)函數(shù)的3個參數(shù)依次為包含腳本代碼的字符串、表示AJAX請求完成狀態(tài)的字符串（通常為success）和執(zhí)行當(dāng)前AJAX請求的XMLHttpRequest對象?！纠?2-15】獲取服務(wù)器端的腳本。12.7.1AJAX事件Query定義的AJAX事件可分為兩種類型：本地事件和全局事件。本地AJAX事件指執(zhí)行AJAX請求的XMLHttpRequest對象所發(fā)生的事件。全局AJAX事件指在執(zhí)行AJAX請求時Document對象發(fā)生的事件，對當(dāng)前頁面中執(zhí)行的所有AJAX請求均有效。jQuery定義的AJAX事件ajaxStart：全局事件，在開始一個AJAX請求時會發(fā)生該事件。beforeSend：本地事件，在開始一個AJAX請求之前發(fā)生該事件，此時，允許修改XMLHttpRequest對象（如添加HTTP請求頭參數(shù)等）。ajaxSend：全局事件，在開始一個AJAX請求之前發(fā)生該事件。succes：本地事件，在AJAX請求成功完成時發(fā)生該事件。ajaxSuccess：全局事件，在AJAX請求成功完成時發(fā)生該事件。error：本地事件，在AJAX請求執(zhí)行過程中出現(xiàn)錯誤時發(fā)生該事件。ajaxError：全局事件，在AJAX請求執(zhí)行過程中出現(xiàn)錯誤時發(fā)生該事件。complete：本地事件，在AJAX請求結(jié)束時發(fā)生該事件。ajaxComplete：全局事件，在AJAX請求結(jié)束時發(fā)生該事件。ajaxStop：全局事件，在當(dāng)前頁面中，所有的AJAX請求結(jié)束時發(fā)生該事件。12.7.2全局AJAX事件方法jQuery定義了幾個全局AJAX事件方法，用于注冊全局AJAX事件處理函數(shù)。jQuery中的全局AJAX事件方法如下。ajaxComplete(handler)：注冊ajaxComplete事件處理函數(shù)，處理函數(shù)原型為Function(Eventevent,jqXHRjqXHR,PlainObjectajaxOptions)。其中，event為事件對象，jqXHR為執(zhí)行當(dāng)前AJAX請求的XMLHttpRequest對象，ajaxOptions對象包含AJAX請求的相關(guān)參數(shù)。ajaxError(handler)：注冊ajaxError事件處理函數(shù)，處理函數(shù)原型為Function(Eventevent,jqXHRjqXHR,PlainObjectajaxOptions,StringthrownError)。其中，thrownError為包含錯誤描述信息的字符串，其他參數(shù)含義與ajaxComplete事件處理函數(shù)參數(shù)相同。ajaxSend(handler)：注冊ajaxSend事件處理函數(shù)，處理函數(shù)原型為Function(Eventevent,jqXHRjqXHR,PlainObjectajaxOptions)，參數(shù)含義與ajaxComplete事件處理函數(shù)參數(shù)相同。ajaxStart(handler)：注冊ajaxStart事件處理函數(shù)，處理函數(shù)無參數(shù)。ajaxStop(handler)：注冊ajaxStop事件處理函數(shù)，處理函數(shù)無參數(shù)。ajaxSuccess(handler)：注冊ajaxSuccess事件處理函數(shù)，處理函數(shù)原型為Function(Eventevent,jqXHRjqXHR,PlainObjectajaxOptions,PlainObjectdata)。其中，data對象包含服務(wù)器返回的數(shù)據(jù)，其他參數(shù)含義與ajaxComplete事件處理函數(shù)參數(shù)相同。其中，handler為函數(shù)名稱或者是一個匿名函數(shù)。12.8編程實踐：實現(xiàn)顏色動畫本節(jié)綜合應(yīng)用本章所學(xué)知識，實現(xiàn)顏色動畫，如圖12-32所示。JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第13章在線咨詢服務(wù)系統(tǒng)本章主要內(nèi)容：系統(tǒng)設(shè)計安裝和使用MySQL系統(tǒng)實現(xiàn)13.1.1系統(tǒng)功能分析本章實現(xiàn)的在線咨詢服務(wù)系統(tǒng)主要有以下幾個功能。用戶注冊：注冊平臺新用戶。用戶注冊功能主要是為了采集用戶信息，如聯(lián)系人姓名、聯(lián)系電話、收貨地址等。用戶注冊后，使用注冊的用戶名和密碼登錄平臺。用戶登錄：用戶登錄平臺后，可在線咨詢商品的相關(guān)問題。在線咨詢：用戶和店鋪進行在線交流。13.1.2開發(fā)工具選擇本章實現(xiàn)的在線咨詢服務(wù)系統(tǒng)是一個典型的Web應(yīng)用程序，開發(fā)時需要Web服務(wù)器、數(shù)據(jù)庫服務(wù)器和編輯器等工具。本書前面各章均在VSCode中完成開發(fā)，并使用Node.js作為Web服務(wù)器。本章實例主要涉及的數(shù)據(jù)包括用戶信息、店鋪信息、商品信息和瀏覽記錄等，這些數(shù)據(jù)需使用數(shù)據(jù)庫進行保存。本章選擇MySQL作為數(shù)據(jù)庫服務(wù)器。13.2.1安裝MySQL本章使用免費的MySQL社區(qū)版來搭建數(shù)據(jù)庫服務(wù)器。安裝程序有Web版和獨立安裝包兩種。Web版的安裝程序需要通過聯(lián)網(wǎng)下載需要的組件。獨立安裝包含所有組件，安裝過程中不需要連接網(wǎng)絡(luò)。在Windows10中，可使用MySQL安裝器完成安裝，具體操作步驟如下……13.2.2管理MySQL服務(wù)器13.3系統(tǒng)實現(xiàn)本章實現(xiàn)的在線咨詢服務(wù)系統(tǒng)主要包括用戶注冊、店鋪注冊、用戶登錄、商品展示、商品咨詢和咨詢服務(wù)等模塊。每個模塊由一個客戶端HTML文檔和關(guān)聯(lián)的服務(wù)端JavaScript腳本實現(xiàn)?？蛻舳薍TML文檔通過AJAX操作與Node.js服務(wù)器完成數(shù)據(jù)交換。系統(tǒng)各模塊之間的關(guān)系如圖13-17所示。13.3.1初始化項目13.3.2實現(xiàn)用戶登錄功能在頁面中輸入用戶名、密碼、驗證碼，選擇登錄類型后，單擊“確定”按鈕提交登錄信息。如果登錄信息有誤，在頁面下方顯示提示文字；登錄成功后，登錄類型是會員則跳轉(zhuǎn)到商品展示頁面，登錄類型是店鋪則跳轉(zhuǎn)到咨詢服務(wù)頁面。13.3.3實現(xiàn)商品展示功能商品展示頁面顯示了商品簡略信息，單擊商品圖片可打開商品詳情展示頁面。單擊“咨詢”鏈接，可進入商品咨詢頁面。商品展示頁面右上角顯示了當(dāng)前用戶名稱，單擊“重新登錄”鏈接可返回登錄頁面。如果用戶未登錄，則顯示“登錄”鏈接。13.3.4實現(xiàn)商品咨詢功能1．設(shè)計商品咨詢頁面框架在VSCode中，為項目添加一個HTML文檔，命名為consulting.html，實現(xiàn)商品咨詢頁面框架2．驗證是否登錄用戶打開商品咨詢頁面時，頁面向服務(wù)器請求“/checkisloged”，檢查用戶是否登錄，用戶未登錄時導(dǎo)航到登錄頁面。服務(wù)器端處理“/checkisloged”請求，通過檢查req.session.isLogin的值來判斷當(dāng)前用戶是否登錄3．實現(xiàn)當(dāng)前用戶信息載入商品咨詢頁面中請求當(dāng)前用戶信息的腳本代碼：$("#userinfo").load("/getuserinfo")

//載入當(dāng)前用戶星級等信息服務(wù)器端處理“/getuserinfo”請求，使用session對象中保存的會員或店鋪信息，從數(shù)據(jù)庫查詢詳細信息，將其返回客戶端4．實現(xiàn)最近聯(lián)系人列表載入商品咨詢頁面中請求最近聯(lián)系人列表的腳本代碼：……腳本在成功載入聯(lián)系人列表后，首先將第一個咨詢的店鋪名稱及其ID加載到對應(yīng)的頁面元素中，然后發(fā)起AJAX請求，從服務(wù)器獲取店鋪信息和與店鋪的咨詢記錄。服務(wù)器端處理“/getuserlists”請求，返回最近聯(lián)系人列表、當(dāng)前店鋪信息以及與店鋪的咨詢記錄服務(wù)器端處理“/getshop