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)頁(yè)技術(shù)。在傳統(tǒng)Web開發(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開發(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）打開請(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")

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

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

Web服務(wù)器，下面介紹如何在Windows10中部署Node.js，具體操作步驟如下?！?2.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ù)器文件的類型不限，.xml、.txt、.asp、.aspx、.jsp或其他文件類型均可。典型的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)生成。【例12-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類似，限于篇幅，本書不再詳細(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字符串返回?！纠?2-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í)行。基本語(yǔ)法格式如下。$(選擇器).load(url[,data][,callback])其中，callback為回調(diào)函數(shù)名稱，也可是一個(gè)匿名函數(shù)?！纠?2-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ù)的類型

]})其中，參數(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ù)類型，通常jQuery可自動(dòng)決定數(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ù)中進(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ù)的類型

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

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