第10章 Web服務(wù)器與Ajax

第10章Web服務(wù)器與Ajax《JavaScript前端開發(fā)案例教程（第2版）》學(xué)習(xí)目標(biāo)/Target

熟悉Web基礎(chǔ)知識(shí)，能夠說(shuō)出Web服務(wù)器、URL和HTTP的概念熟悉什么是Node.js，能夠說(shuō)出Node.js的作用掌握Node.js的下載和安裝，能夠獨(dú)立完成Node.js的下載和安裝熟悉什么是Express，能夠說(shuō)出Express的作用掌握Express的安裝，能夠使用node命令完成Express的安裝學(xué)習(xí)目標(biāo)/Target掌握如何使用Express搭建服務(wù)器，能夠獨(dú)立完成服務(wù)器的搭建熟悉什么是Ajax，能夠說(shuō)出Ajax的概念和優(yōu)勢(shì)掌握創(chuàng)建Ajax對(duì)象的方法，能夠創(chuàng)建Ajax對(duì)象并能夠說(shuō)出其常用的屬性和方法

掌握如何實(shí)現(xiàn)GET方式的Ajax請(qǐng)求，能夠向服務(wù)器發(fā)送GET方式的Ajax請(qǐng)求

掌握如何實(shí)現(xiàn)POST方式的Ajax請(qǐng)求，能夠向服務(wù)器發(fā)送POST方式的Ajax請(qǐng)求學(xué)習(xí)目標(biāo)/Target

掌握如何獲取服務(wù)端的響應(yīng)，能夠獲取服務(wù)端響應(yīng)的數(shù)據(jù)掌握數(shù)據(jù)交換格式，能夠?qū)崿F(xiàn)XML、JSON數(shù)據(jù)格式的處理熟悉什么是同源策略，能夠區(qū)分同源和不同源URL地址

掌握跨域請(qǐng)求，能夠利用CROS實(shí)現(xiàn)跨域請(qǐng)求章節(jié)概述/Summary在前面的章節(jié)中，我們編寫的網(wǎng)頁(yè)都是直接在本地用瀏覽器打開的，不需要服務(wù)器的參與。當(dāng)我們希望自己編寫的網(wǎng)頁(yè)能被互聯(lián)網(wǎng)中其他用戶訪問時(shí)，就需要用到服務(wù)器了。說(shuō)到服務(wù)器，不得不提到Ajax（AsynchronousJavaScriptandXML，異步JavaScript和XML技術(shù)），Ajax是一個(gè)與服務(wù)器密切相關(guān)的技術(shù)，可以使網(wǎng)頁(yè)中的JavaScript程序與服務(wù)器進(jìn)行數(shù)據(jù)交互，提升用戶體驗(yàn)。本章將結(jié)合Web服務(wù)器的相關(guān)知識(shí)講解Ajax的使用。目錄/Contents010203Web基礎(chǔ)知識(shí)Web服務(wù)器搭建Ajax入門目錄/Contents040506數(shù)據(jù)交換格式同源策略動(dòng)手實(shí)踐：Ajax表單驗(yàn)證Web基礎(chǔ)知識(shí)10.1

先定一個(gè)小目標(biāo)！熟悉Web服務(wù)器，能夠說(shuō)出什么是Web服務(wù)器以及客戶端與服務(wù)器的工作方式10.1.1Web服務(wù)器10.1.1Web服務(wù)器Web服務(wù)器又稱為網(wǎng)站服務(wù)器，是一種能夠提供網(wǎng)站服務(wù)的機(jī)器，主要負(fù)責(zé)存儲(chǔ)數(shù)據(jù)和處理應(yīng)用邏輯，它能夠接收客戶端的請(qǐng)求，并對(duì)客戶端的請(qǐng)求做出響應(yīng)。10.1.1Web服務(wù)器客戶端是指用戶能夠看到并與之交互的軟件，瀏覽器是常用的客戶端，日常生活中經(jīng)常使用的QQ、微信等也是客戶端?？蛻舳伺c服務(wù)器的工作方式如下。10.1.1Web服務(wù)器10.1.1Web服務(wù)器什么是資源當(dāng)客戶端向服務(wù)器發(fā)送請(qǐng)求時(shí)，實(shí)際上是向服務(wù)器請(qǐng)求資源，資源指的是服務(wù)器中存儲(chǔ)的各種數(shù)據(jù)，例如網(wǎng)頁(yè)、圖片等。資源分為以下兩種。靜態(tài)資源：由服務(wù)器讀取文件后直接返回，且每次訪問內(nèi)容不變。動(dòng)態(tài)資源：由服務(wù)器收到請(qǐng)求后，經(jīng)過計(jì)算處理后返回，內(nèi)容可以根據(jù)實(shí)際需要?jiǎng)討B(tài)變化。

先定一個(gè)小目標(biāo)！熟悉URL，能夠說(shuō)出URL的概念以及URL的組成部分10.1.2URL10.1.2URL客戶端向服務(wù)器端發(fā)送請(qǐng)求時(shí)，實(shí)際上是發(fā)送了一個(gè)URL，服務(wù)器會(huì)根據(jù)URL向客戶端返回對(duì)應(yīng)的資源。URL（UniformResourceLocator，統(tǒng)一資源定位符）是專為標(biāo)識(shí)Internet（互聯(lián)網(wǎng)）上的資源位置而使用一種編址方式。URL由協(xié)議、主機(jī)地址、端口號(hào)和請(qǐng)求資源路徑4部分組成，其一般語(yǔ)法格式如下。10.1.2URL下面列舉一些示例URL地址。示例1http://www.example.test/index.html示例250:20/index.html?a=110.1.2URL什么是協(xié)議協(xié)議是網(wǎng)絡(luò)協(xié)議的簡(jiǎn)稱，用于指定請(qǐng)求地址的傳輸協(xié)議。以下是一些常用的網(wǎng)絡(luò)協(xié)議。HTTP超文本傳輸協(xié)議HTTPS超文本傳輸安全協(xié)議FTP

文件傳送協(xié)議10.1.2URL什么是主機(jī)地址主機(jī)地址用來(lái)確定請(qǐng)求的資源在哪臺(tái)服務(wù)器中，它有以下兩種形式。IP地址：InternetProtocolAddress的縮寫，是指互聯(lián)網(wǎng)協(xié)議地址，用來(lái)唯一標(biāo)識(shí)互聯(lián)網(wǎng)中的設(shè)備。目前常用的IPv4地址是由3個(gè)點(diǎn)分隔的一串?dāng)?shù)字組成。域名：IP地址不直觀，且難以記憶，實(shí)際生活中一般不使用IP地址訪問網(wǎng)站，而是使用域名。IP地址與域名是對(duì)應(yīng)的關(guān)系，在瀏覽器地址欄中輸入域名，域名服務(wù)器（DomainNameServer，DNS）會(huì)將域名解析為對(duì)應(yīng)的IP地址，從而找到對(duì)應(yīng)的網(wǎng)站服務(wù)器。10.1.2URL什么是端口號(hào)通過主機(jī)地址找到對(duì)應(yīng)的服務(wù)器后，還需要指定端口號(hào)來(lái)進(jìn)一步確定當(dāng)前訪問的是服務(wù)器中的什么服務(wù)。一臺(tái)服務(wù)器不僅能夠向外界提供網(wǎng)站服務(wù)，還可以提供其他的服務(wù)，例如郵件服務(wù)、文件上傳服務(wù)和文件下載服務(wù)等。需要注意的是，如果某一個(gè)端口號(hào)已被另一個(gè)軟件占用，在程序中再去使用這個(gè)端口號(hào)，程序就會(huì)報(bào)錯(cuò)，無(wú)法運(yùn)行。端口號(hào)是具有一定范圍的數(shù)字，范圍是0~65535，當(dāng)URL中省略端口號(hào)時(shí)，HTTP默認(rèn)端口號(hào)為80，HTTPS默認(rèn)端口號(hào)為443。10.1.2URL什么是請(qǐng)求資源路徑請(qǐng)求資源路徑用于指定請(qǐng)求的資源在服務(wù)器中的位置，它有兩種類型，一種類型是不帶參數(shù)的路徑，也就是路徑中不含“?”，這種路徑稱為靜態(tài)資源路徑，例如http:/www.example.test/index.html中的“l(fā)index.html”。另一種類型是帶參數(shù)的路徑，路徑中含有“?”，這種路徑稱為動(dòng)態(tài)資源路徑，例如50:20/index.html?a=1中的“rindex.html?a=1”，其中，“a=1”稱為URL參數(shù)。

先定一個(gè)小目標(biāo)！熟悉HTTP，能夠說(shuō)出HTTP的基本概念10.1.3HTTPHTTP是客戶端與服務(wù)器端請(qǐng)求和響應(yīng)的標(biāo)準(zhǔn)。當(dāng)客戶端與服務(wù)器端建立連接后，客戶端向服務(wù)器端發(fā)送一個(gè)請(qǐng)求，服務(wù)器接收到請(qǐng)求后做出響應(yīng)。在請(qǐng)求和響應(yīng)的過程中會(huì)傳遞一些數(shù)據(jù)，這些數(shù)據(jù)稱為消息。10.1.3HTTP10.1.3HTTPHTTP消息的分類請(qǐng)求消息響應(yīng)消息10.1.3HTTP請(qǐng)求消息是指客戶端向服務(wù)器端發(fā)送請(qǐng)求時(shí)所攜帶的數(shù)據(jù)。（4）請(qǐng)求體（1）請(qǐng)求行（3）空行（2）請(qǐng)求頭請(qǐng)求消息10.1.3HTTP請(qǐng)求行：分為請(qǐng)求方式、請(qǐng)求資源路徑和HTTP版本3部分，中間用空格隔開。GET是瀏覽器打開網(wǎng)頁(yè)默認(rèn)使用的請(qǐng)求方式。請(qǐng)求頭：位于請(qǐng)求行之后，主要用于向服務(wù)器傳遞附加消息。每個(gè)請(qǐng)求頭都是由字段名和對(duì)應(yīng)的值構(gòu)成，中間用冒號(hào)“:”和空格分隔。空行：位于請(qǐng)求頭后面，表示請(qǐng)求頭結(jié)束。即使請(qǐng)求數(shù)據(jù)為空，也必須要有空行。10.1.3HTTP請(qǐng)求體：當(dāng)使用POST方式提交表單時(shí)，用戶填寫的表單數(shù)據(jù)將會(huì)被瀏覽器編碼后放在請(qǐng)求體中，并通過請(qǐng)求頭中的Content-Type和Content-Length字段來(lái)描述實(shí)體內(nèi)容的編碼格式和長(zhǎng)度。當(dāng)在網(wǎng)頁(yè)中使用表單發(fā)送POST方式的請(qǐng)求時(shí)，表單的編碼格式按照<form>標(biāo)簽的enctype屬性來(lái)設(shè)定，默認(rèn)值為application/x-www-form-urlencoded，表示URL編碼格式。由于URL編碼格式不支持文件上傳，當(dāng)進(jìn)行文件上傳時(shí)，需要將其改為multipart/form-data格式。10.1.3HTTP請(qǐng)求消息的示例如下。POST/form.htmlHTTP/1.1Host:localhostContent-Type:application/x-www-form-urlencodedContent-Length:20user=Jim&pass=123456請(qǐng)求行請(qǐng)求頭空行請(qǐng)求體10.1.3HTTP響應(yīng)消息指服務(wù)器端向客戶端進(jìn)行響應(yīng)時(shí)所攜帶的數(shù)據(jù)。（4）響應(yīng)體（1）狀態(tài)行（3）空行（2）響應(yīng)頭響應(yīng)消息10.1.3HTTP狀態(tài)行：用于告知客戶端本次響應(yīng)的狀態(tài)，由HTTP版本、狀態(tài)碼（如200）和描述信息（如OK）組成。狀態(tài)碼由3位數(shù)組成，表示請(qǐng)求是否被接收或處理，狀態(tài)碼的第1位數(shù)字定義了響應(yīng)的類別，第2、3位數(shù)字沒有具體的分類。10.1.3HTTP狀態(tài)碼的第1位數(shù)字有以下5種取值。1**：請(qǐng)求已接收，需要繼續(xù)處理。2**：請(qǐng)求已成功被服務(wù)器接收或處理。3**：重定向，需要進(jìn)一步的操作以完成請(qǐng)求。4**：客戶端請(qǐng)求有錯(cuò)誤。5**：服務(wù)器端錯(cuò)誤。10.1.3HTTPHTTP中的狀態(tài)碼較多，我們只需要記住一些常見的狀態(tài)碼即可。狀態(tài)碼說(shuō)明200表示服務(wù)器成功處理了客戶端的請(qǐng)求301表示請(qǐng)求的資源已被永久移動(dòng)到新URL，服務(wù)器返回信息會(huì)包括新的URL，瀏覽器會(huì)自動(dòng)定向到新URL，今后任何新的請(qǐng)求都應(yīng)使用新的URL代替302與301類似，但資源只是臨時(shí)被移動(dòng)，將來(lái)可能會(huì)恢復(fù)400表示客戶端請(qǐng)求有語(yǔ)法錯(cuò)誤404表示服務(wù)器找不到請(qǐng)求的資源，例如訪問不存在的網(wǎng)頁(yè)時(shí)，經(jīng)常返回此狀態(tài)碼500表示服務(wù)器發(fā)生錯(cuò)誤，無(wú)法處理客戶端的請(qǐng)求10.1.3HTTP響應(yīng)頭：用于告知客戶端本次響應(yīng)的基本信息，包括服務(wù)器程序名、內(nèi)容的編碼格式、緩存控制等。空行：位于響應(yīng)頭后，用于表示響應(yīng)頭結(jié)束。即使沒有響應(yīng)消息，空行也必須存在。響應(yīng)體：也可以稱為響應(yīng)內(nèi)容，有多種編碼格式。當(dāng)用戶請(qǐng)求的是一個(gè)網(wǎng)頁(yè)時(shí)，響應(yīng)內(nèi)容的格式是HTML；如果請(qǐng)求的是圖片，則響應(yīng)內(nèi)容的格式是JPEG。服務(wù)器為了告知客戶端響應(yīng)內(nèi)容的類型，會(huì)通過響應(yīng)頭中的Content-Type字段來(lái)描述內(nèi)容類型。10.1.3HTTP常見的內(nèi)容類型如下。text/plain：返回純文本格式。

text/html：返回HTML格式。

text/xml：返回XML格式。

text/css：返回CSS格式。

application/javascript：返回JavaScript格式。image/jpeg：返回JPEG圖片格式。application/json：返回JSON代碼格式。10.1.3HTTP響應(yīng)消息的示例如下。HTTP/1.1200OKDate:Thu,02Nov201706:22:27GMTServer:Apache/2.4.23(Win64)OpenSSL/1.0.2hPHP/5.6.28Accept-Ranges:bytesContent-Type:text/html

<!DOCTYPEhtml><html><body></body></html>狀態(tài)行響應(yīng)頭空行響應(yīng)體10.1.3HTTP腳下留心：HTTP和HTTPS的區(qū)別由于HTML安全性差，目前互聯(lián)網(wǎng)中的主流網(wǎng)站都使用HTTPS。HTTPS在HTTP基礎(chǔ)上通過加密和身份認(rèn)證保證數(shù)據(jù)傳輸過程中的安全性，二者的具體區(qū)別如下。安全性：HTTP數(shù)據(jù)都是未加密的，明文傳輸，安全性較差，HTTPS數(shù)據(jù)傳輸過程是加密的，安全性較好。頁(yè)面響應(yīng)速度：HTTP頁(yè)面響應(yīng)速度比HTTPS快。HTTPS包含傳輸加密和身份認(rèn)證，比HTTP更耗費(fèi)資源。10.1.3HTTP多學(xué)一招：查看請(qǐng)求頭和響應(yīng)頭（1）打開Chrome瀏覽器，在地址欄中輸入一個(gè)網(wǎng)址，訪問頁(yè)面成功后，打開開發(fā)者工具，選擇Network面板。10.1.3HTTP多學(xué)一招：查看請(qǐng)求頭和響應(yīng)頭（2）進(jìn)入Network面板后刷新瀏覽器，然后單擊列表中當(dāng)前網(wǎng)頁(yè)的第1個(gè)請(qǐng)求，可以看到當(dāng)前請(qǐng)求頁(yè)面格式化后的請(qǐng)求頭和響應(yīng)頭。Web服務(wù)器搭建10.210.2Web服務(wù)器搭建通過前面的學(xué)習(xí)，我們已經(jīng)熟悉了Web基礎(chǔ)知識(shí)，了解了客戶端和服務(wù)器端的工作方式。那么如何搭建一個(gè)服務(wù)器，并將自己的網(wǎng)頁(yè)部署到該服務(wù)器上呢？接下來(lái)我們將利用Node.js開發(fā)環(huán)境，使用Express框架搭建Web服務(wù)器，并將自己編寫的網(wǎng)頁(yè)部署到服務(wù)器上。

先定一個(gè)小目標(biāo)！熟悉Node.js的概念，能夠說(shuō)出Node.js的作用10.2.1Node.js概述10.2.1Node.js概述Node.js是一個(gè)基于ChromeV8引擎的JavaScript代碼運(yùn)行環(huán)境，也可以說(shuō)是一個(gè)運(yùn)行時(shí)（Runtime）平臺(tái)，提供了一些功能性的API，如文件操作API、網(wǎng)絡(luò)通信API等。目前流行的Web服務(wù)器軟件有很多，如Nginx、Apache、Node.js等，對(duì)于前端開發(fā)工程師來(lái)說(shuō)，更適合使用Node.js，因?yàn)镹ode.js使用JavaScript語(yǔ)言進(jìn)行服務(wù)器開發(fā)，可以讓前端開發(fā)工程師快速上手。10.2.1Node.js概述JavaScript與Node.js的區(qū)別JavaScript和Node.js的核心語(yǔ)法都是ECMAScript。JavaScript是一種腳本語(yǔ)言，由ECMAScript、DOM和BOM組成，一般運(yùn)行在客戶端，主要用于處理頁(yè)面的交互。Node.js是運(yùn)行在服務(wù)器端的JavaScript，由ECMAScript和Node.js環(huán)境提供的一些附加API組成，包括文件、網(wǎng)絡(luò)和路徑等，Node.js主要用于數(shù)據(jù)的交互。服務(wù)器開發(fā)常用的技術(shù)有Java、Python、PHP、ASP.NET等，那么我們?yōu)槭裁催x擇使用Node.js呢？10.2.1Node.js概述選擇Node.js技術(shù)的理由如下。學(xué)習(xí)Node.js是前端開發(fā)人員轉(zhuǎn)向后端開發(fā)人員的極佳途徑。一些公司要求前端開發(fā)人員掌握Node.js開發(fā)。Node.js生態(tài)系統(tǒng)活躍，有大量的開源庫(kù)可以使用。前端開發(fā)工具大多基于Node.js開發(fā)。10.2.1Node.js概述

先定一個(gè)小目標(biāo)！掌握Node.js的下載和安裝，能夠獨(dú)立完成Node.js的下載和安裝10.2.2Node.js的下載和安裝10.2.2Node.js的下載和安裝步驟1步驟2步驟3步驟4打開Node.js官網(wǎng)，找到Node.js下載地址。長(zhǎng)期支持的版本當(dāng)前發(fā)布的最新版本進(jìn)入官網(wǎng)10.2.2Node.js的下載和安裝步驟2步驟1步驟3步驟4單擊“14.17.6LTS”綠色區(qū)域進(jìn)行下載。下載安裝包10.2.2Node.js的下載和安裝步驟3步驟1步驟2步驟4到保存路徑下找到node-v14.17.6-x64.msi文件，此文件就是下載的Node.js安裝包。找到安裝包10.2.2Node.js的下載和安裝步驟4步驟1步驟2步驟3雙擊node-v14.17.6-x64.msi安裝包進(jìn)行安裝，彈出安裝提示窗口，安裝過程全部使用默認(rèn)值即可。進(jìn)行安裝安裝完成后，如何測(cè)試Node.js是否安裝成功呢？10.2.2Node.js的下載和安裝10.2.2Node.js的下載和安裝步驟1：打開“運(yùn)行對(duì)話框”按“Windows+R”組合鍵，打開“運(yùn)行”對(duì)話框，輸入“cmd”。10.2.2Node.js的下載和安裝步驟2：打開cmd命令提示符窗口單擊“確定”按鈕，或者直接按“Enter”鍵，會(huì)打開cmd命令提示符窗口。10.2.2Node.js的下載和安裝步驟3：輸入命令輸入命令“node-v”（其中v是version的簡(jiǎn)寫，表示版本），按“Enter”鍵，會(huì)顯示當(dāng)前安裝的Node.js版本。步驟4：退出輸入“exit”并按“Enter”鍵，或單擊命令提示符窗口右上角的“×”（關(guān)閉）按鈕。10.2.2Node.js的下載和安裝多學(xué)一招：使用VisualStudioCode快速啟動(dòng)Node.js（1）打開VisualStudioCode編輯器，在菜單欄中單擊“終端（T）”選項(xiàng)，然后在彈出的快捷菜單中單擊“新建終端”；或者在菜單欄中單擊“查看（V）”選項(xiàng)，然后在彈出的快捷菜單中單擊“終端”。10.2.2Node.js的下載和安裝多學(xué)一招：使用VisualStudioCode快速啟動(dòng)Node.js（2）在終端中輸入“node-v”命令，測(cè)試Node.js是否啟動(dòng)成功。當(dāng)我們想要在某個(gè)目錄下執(zhí)行命令時(shí)，可以選中這個(gè)目錄，然后右擊，在彈出的快捷菜單中選擇“在集成終端中打開”，這時(shí)終端就在這個(gè)目錄中打開了。

先定一個(gè)小目標(biāo)！熟悉Express的概念，能夠說(shuō)出Express的作用10.2.3初識(shí)Express10.2.3初識(shí)Express在服務(wù)器端開發(fā)中，網(wǎng)站服務(wù)器是必不可少的，Node.js中不需要安裝額外的軟件充當(dāng)網(wǎng)站服務(wù)器，使用Node.js提供的HTTP模塊即可搭建Web服務(wù)器。但使用Node.js的HTTP模塊進(jìn)行服務(wù)器開發(fā)效率比較低，為了提高開發(fā)效率，我們可以為Node.js安裝Express框架，利用Express框架搭建Web服務(wù)器。10.2.3初識(shí)Express什么是ExpressExpress是目前流行的基于Node.js運(yùn)行環(huán)境的Web應(yīng)用程序開發(fā)框架，簡(jiǎn)潔、靈活，它為Web應(yīng)用程序提供了強(qiáng)大的功能。Express提供了一個(gè)輕量級(jí)模塊，它把Node.js中的HTTP模塊的功能封裝在一個(gè)簡(jiǎn)單易用的接口中，用于擴(kuò)展HTTP模塊的功能，它能夠輕松處理服務(wù)器的路由、請(qǐng)求和響應(yīng)。

先定一個(gè)小目標(biāo)！掌握Express的安裝，能夠使用相關(guān)命令完成Express的安裝10.2.4安裝Express10.2.4安裝Express利用Express搭建服務(wù)器之前，需要安裝Express，可以使用Node.js的第三方模塊管理工具npm（nodepackagemanager）提供的命令進(jìn)行安裝。npm在Node.js安裝時(shí)就已經(jīng)被集成。10.2.4安裝Express通過npm安裝Express的步驟（1）新建“server”目錄作為項(xiàng)目目錄。（2）在終端中執(zhí)行“cdserver”命令進(jìn)入server目錄，然后執(zhí)行如下命令，對(duì)項(xiàng)目進(jìn)行初始化。npminit-yinit表示初始化包管理配置文件package.json。-y表示在初始化的時(shí)候省去詢問的步驟，生成默認(rèn)的package.json。10.2.4安裝Express通過npm安裝Express的步驟（3）執(zhí)行如下命令，在當(dāng)前項(xiàng)目下安裝Express框架。npminstallexpress@4.17.1–-saveexpress@4.17.1表示安裝4.17.1版本的Express框架。--save表示安裝為運(yùn)行時(shí)依賴。執(zhí)行完上述命令后，Express框架會(huì)被安裝到當(dāng)前目錄的node_modules目錄中。10.2.4安裝Express通過npm安裝Express的步驟（4）安裝完成后，執(zhí)行如下命令，查看Express版本。npmlistexpress

先定一個(gè)小目標(biāo)！掌握如何使用Express搭建服務(wù)器，能夠獨(dú)立完成服務(wù)器的搭建10.2.5使用Express搭建服務(wù)器10.2.5使用Express搭建服務(wù)器使用Express搭建Web服務(wù)器的關(guān)鍵代碼如下。（1）使用require()方法引入express模塊。varexpress=require('express');（2）調(diào)用express()方法創(chuàng)建Web服務(wù)器對(duì)象。varapp=express();10.2.5使用Express搭建服務(wù)器（3）利用express.static()方法托管靜態(tài)資源。app.use(express.static('public'));app.use()會(huì)攔截所有的請(qǐng)求，然后交給express.static()來(lái)處理。靜態(tài)資源訪問目錄10.2.5使用Express搭建服務(wù)器（4）調(diào)用app.listen()方法監(jiān)聽端口。app.listen(3000,()=>{console.log('服務(wù)器啟動(dòng)成功...');});第1個(gè)參數(shù)3000表示端口號(hào)，這個(gè)端口號(hào)也可以換成其他沒有被占用的端口號(hào)。第2個(gè)參數(shù)表示監(jiān)聽成功后執(zhí)行的回調(diào)函數(shù)。10.2.5使用Express搭建服務(wù)器下面我們搭建一個(gè)符合實(shí)際開發(fā)需要的Web服務(wù)器，搭建步驟如下。（1）在server目錄下，新建app.js文件，編寫代碼實(shí)現(xiàn)使用Express搭建Web服務(wù)器。//引入express模塊varexpress=require('express');//創(chuàng)建Web服務(wù)器對(duì)象varapp=express();//靜態(tài)資源處理app.use(express.static('public'));//監(jiān)聽3000端口app.listen(3000,()=>{console.log('服務(wù)器啟動(dòng)成功...');});10.2.5使用Express搭建服務(wù)器（2）在server目錄下，創(chuàng)建public文件夾，在public文件夾中創(chuàng)建index.html文件，編寫代碼如下。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Document</title></head><body><h1>HelloExpress</h1></body></html>10.2.5使用Express搭建服務(wù)器（3）在VisualStudioCode編輯器的終端中，先進(jìn)入server目錄，然后執(zhí)行如下命令，啟動(dòng)服務(wù)器。nodeapp.js10.2.5使用Express搭建服務(wù)器（4）在瀏覽器中訪問http://localhost:3000/index.html。如果想終止服務(wù)器，可以在命令行中按“Ctrl+C”組合鍵。Tip10.2.5使用Express搭建服務(wù)器在Node.js中，每次修改文件都需要在命令行中重新執(zhí)行該文件，非常麻煩，有時(shí)忘記重新執(zhí)行，還會(huì)導(dǎo)致程序出錯(cuò)，如何解決這個(gè)問題呢？10.2.5使用Express搭建服務(wù)器nodemon是一個(gè)用于輔助項(xiàng)目開發(fā)的命令行工具，每次保存文件時(shí)代碼都會(huì)自動(dòng)重新運(yùn)行。使用nodemon工具前，需要通過npm下載并安裝nodemon工具，命令如下。npmnodemon-gglobal，表示全局安裝安裝完成后，在終端中輸入“nodemon文件名”即可使用nodemon工具執(zhí)行該文件。Ajax入門10.3

先定一個(gè)小目標(biāo)！熟悉什么是Ajax，能夠說(shuō)出Ajax的概念和優(yōu)勢(shì)10.3.1什么是Ajax10.3.1什么是AjaxAjax的含義是AsynchronousJavaScriptAndXML，即異步JavaScript和XML技術(shù)，它是由JavaScript、XML、DOM等多種已有技術(shù)組合而成的一種瀏覽器端技術(shù)，用于實(shí)現(xiàn)瀏覽器與服務(wù)器進(jìn)行異步交互的功能，從而提高用戶瀏覽網(wǎng)頁(yè)的體驗(yàn)。10.3.1什么是Ajax傳統(tǒng)網(wǎng)站中存在的一些問題：頁(yè)面加載時(shí)間長(zhǎng)：在傳統(tǒng)的網(wǎng)站中，用戶只能通過瀏覽器刷新頁(yè)面，從服務(wù)器中獲取數(shù)據(jù)。如果網(wǎng)速慢，獲取數(shù)據(jù)的時(shí)間就會(huì)很長(zhǎng)。當(dāng)頁(yè)面加載數(shù)據(jù)時(shí)，用戶也不能在該頁(yè)面進(jìn)行其他操作，只能等待網(wǎng)頁(yè)加載完成。頁(yè)面無(wú)法局部更新：在傳統(tǒng)的網(wǎng)站中，每訪問一個(gè)頁(yè)面，都需要服務(wù)器返回一個(gè)頁(yè)面，服務(wù)器壓力非常大。而且傳統(tǒng)的網(wǎng)站無(wú)法實(shí)現(xiàn)局部更新，即使頁(yè)面中只有少量數(shù)據(jù)發(fā)生變化，網(wǎng)頁(yè)中所有的表格、圖片等都沒有改變，依然要從服務(wù)器重新加載網(wǎng)頁(yè)。Ajax的優(yōu)勢(shì)如下。按需加載數(shù)據(jù)，減輕了服務(wù)器的壓力。實(shí)現(xiàn)了局部更新頁(yè)面數(shù)據(jù)。

先定一個(gè)小目標(biāo)！掌握Ajax對(duì)象的創(chuàng)建，能夠創(chuàng)建Ajax對(duì)象并列舉Ajax對(duì)象常用的屬性和方法10.3.2創(chuàng)建Ajax對(duì)象10.3.2創(chuàng)建Ajax對(duì)象發(fā)送Ajax請(qǐng)求首先要通過XMLHttpRequest()構(gòu)造函數(shù)實(shí)例化XMLHttpRequest對(duì)象，即創(chuàng)建Ajax對(duì)象，用于與服務(wù)器交換數(shù)據(jù)。創(chuàng)建Ajax對(duì)象的示例代碼如下。varxhr=newXMLHttpRequest();自定義變量名10.3.2創(chuàng)建Ajax對(duì)象Ajax的交互過程瀏覽器和服務(wù)器實(shí)現(xiàn)Ajax交互時(shí)，其實(shí)是通過瀏覽器中創(chuàng)建的Ajax對(duì)象向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器接收到請(qǐng)求后，根據(jù)請(qǐng)求的URL響應(yīng)相對(duì)應(yīng)的數(shù)據(jù)給瀏覽器，然后瀏覽器再通過Ajax對(duì)象返回服務(wù)器端響應(yīng)的數(shù)據(jù)。10.3.2創(chuàng)建Ajax對(duì)象Ajax對(duì)象提供了一些常用的屬性和方法。名稱說(shuō)明open()用于初始化請(qǐng)求send()用于向服務(wù)器發(fā)送請(qǐng)求readyState用于獲取Ajax狀態(tài)值onreadystatechange當(dāng)readyState屬性發(fā)生變化時(shí)執(zhí)行的事件處理函數(shù)onload響應(yīng)完成時(shí)執(zhí)行的事件處理函數(shù)responseText用于獲取服務(wù)器返回的字符串?dāng)?shù)據(jù)reponseXML用于獲取服務(wù)器返回的XML數(shù)據(jù)

先定一個(gè)小目標(biāo)！掌握如何實(shí)現(xiàn)GET方式的Ajax請(qǐng)求，能夠向服務(wù)器發(fā)送GET方式的Ajax請(qǐng)求10.3.3實(shí)現(xiàn)GET方式的Ajax請(qǐng)求10.3.3實(shí)現(xiàn)GET方式的Ajax請(qǐng)求任何一個(gè)請(qǐng)求都離不開瀏覽器和服務(wù)器的參與。我們將從以下兩方面學(xué)習(xí)如何發(fā)送GET方式的Ajax請(qǐng)求。服務(wù)器端瀏覽器端10.3.3實(shí)現(xiàn)GET方式的Ajax請(qǐng)求服務(wù)器端當(dāng)服務(wù)器收到瀏覽器發(fā)送的GET方式請(qǐng)求時(shí)，可以使用app.get()方法處理這個(gè)請(qǐng)求。使用app.get()方法處理請(qǐng)求的示例代碼如下。app.get('/',(req,res)=>{//處理請(qǐng)求});請(qǐng)求路徑請(qǐng)求對(duì)象響應(yīng)對(duì)象10.3.3實(shí)現(xiàn)GET方式的Ajax請(qǐng)求瀏覽器端瀏覽器端要發(fā)送Ajax請(qǐng)求，需要先創(chuàng)建Ajax對(duì)象，然后通過調(diào)用Ajax對(duì)象的open()方法和send()方法完成請(qǐng)求。open()方法用于初始化請(qǐng)求，其語(yǔ)法格式如下。xhr.open(method,url[,async][,user][,password]);method用于指定請(qǐng)求方式，如GET、POST，不區(qū)分大小寫。url表示請(qǐng)求地址。async表示是否異步執(zhí)行操作，默認(rèn)為true，若設(shè)為false表示同步執(zhí)行操作。user和password表示HTTP認(rèn)證的用戶名和密碼。10.3.3實(shí)現(xiàn)GET方式的Ajax請(qǐng)求send()方法用于向服務(wù)器發(fā)送請(qǐng)求，其語(yǔ)法格式如下。xhr.send([content]);content為可選參數(shù)，表示要發(fā)送的數(shù)據(jù)，一般與POST方式請(qǐng)求配合使用。

先定一個(gè)小目標(biāo)！掌握如何實(shí)現(xiàn)POST方式的Ajax請(qǐng)求，能夠向服務(wù)器發(fā)送POST方式的Ajax請(qǐng)求10.3.4實(shí)現(xiàn)POST方式的Ajax請(qǐng)求10.3.4實(shí)現(xiàn)POST方式的Ajax請(qǐng)求實(shí)現(xiàn)POST方式的Ajax請(qǐng)求與實(shí)現(xiàn)GET方式的Ajax請(qǐng)求類似，同樣也需要服務(wù)器和瀏覽器的參與。服務(wù)器端當(dāng)瀏覽器發(fā)送POST方式的Ajax請(qǐng)求后，需要在服務(wù)器端使用app.post()方法處理這個(gè)請(qǐng)求。使用app.post()方法處理請(qǐng)求的示例代碼如下。app.post('/',(req,res)=>{//處理請(qǐng)求});請(qǐng)求路徑請(qǐng)求對(duì)象響應(yīng)對(duì)象10.3.4實(shí)現(xiàn)POST方式的Ajax請(qǐng)求10.3.4實(shí)現(xiàn)POST方式的Ajax請(qǐng)求瀏覽器端瀏覽器端發(fā)送POST請(qǐng)求的基本步驟如下。（1）通過XMLHttpRequest()構(gòu)造函數(shù)創(chuàng)建Ajax對(duì)象。（2）調(diào)用Ajax對(duì)象的open()方法，初始化POST請(qǐng)求。（3）調(diào)用Ajax對(duì)象的send()方法，向服務(wù)器發(fā)送請(qǐng)求。

先定一個(gè)小目標(biāo)！掌握如何獲取服務(wù)端的響應(yīng)，能夠獲取服務(wù)端響應(yīng)的數(shù)據(jù)10.3.5獲取服務(wù)器端的響應(yīng)10.3.5獲取服務(wù)器端的響應(yīng)通過Ajax對(duì)象向服務(wù)器發(fā)送請(qǐng)求后，Ajax對(duì)象會(huì)等待服務(wù)器返回響應(yīng)結(jié)果，然后對(duì)響應(yīng)結(jié)果進(jìn)行處理。獲取服務(wù)器端響應(yīng)相關(guān)的操作有以下4個(gè)。獲取Ajax狀態(tài)值監(jiān)聽Ajax狀態(tài)值響應(yīng)完成時(shí)調(diào)用的事件處理函數(shù)獲取服務(wù)器端響應(yīng)的內(nèi)容10.3.5獲取服務(wù)器端的響應(yīng)什么是Ajax狀態(tài)值：瀏覽器和服務(wù)器的交互并不是一步完成的，而是會(huì)經(jīng)歷一個(gè)過程，這個(gè)過程中的每一步都會(huì)對(duì)應(yīng)一個(gè)數(shù)字，這個(gè)數(shù)字就是Ajax狀態(tài)值。名稱說(shuō)明0請(qǐng)求未初始化（還沒有調(diào)用open()方法）1請(qǐng)求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用send()方法）2請(qǐng)求已經(jīng)發(fā)送3請(qǐng)求正在處理中，通常響應(yīng)中已經(jīng)有部分?jǐn)?shù)據(jù)可以用了4響應(yīng)已經(jīng)完成，可以獲取并使用服務(wù)器的響應(yīng)了10.3.5獲取服務(wù)器端的響應(yīng)通過xhr.readyState屬性可以獲取當(dāng)前的Ajax狀態(tài)值。在判斷xhr.readyState屬性返回的狀態(tài)值是哪一種狀態(tài)時(shí)，可以與狀態(tài)值屬性進(jìn)行比較。xhr.UNSENT; //對(duì)應(yīng)狀態(tài)值0xhr.OPENED; //對(duì)應(yīng)狀態(tài)值1xhr.HEADERS_RECEIVED; //對(duì)應(yīng)狀態(tài)值2xhr.LOADING; //對(duì)應(yīng)狀態(tài)值3xhr.DONE; //對(duì)應(yīng)狀態(tài)值410.3.5獲取服務(wù)器端的響應(yīng)如何監(jiān)聽Ajax狀態(tài)值：通過onreadystatechange事件處理函數(shù)可以監(jiān)聽Ajax狀態(tài)值的變化，示例代碼如下。xhr.onreadystatechange=function(){};onreadystatechange事件處理函數(shù)會(huì)被調(diào)用多次。當(dāng)Ajax的狀態(tài)值為4時(shí)，就可以在onreadystatechange事件處理函數(shù)中獲取服務(wù)器端響應(yīng)的內(nèi)容。注意10.3.5獲取服務(wù)器端的響應(yīng)響應(yīng)完成時(shí)調(diào)用的事件處理函數(shù)：當(dāng)服務(wù)器完成響應(yīng)時(shí)，瀏覽器可以通過onload事件處理函數(shù)獲取服務(wù)器端的響應(yīng)，示例代碼如下。xhr.onload=function(){};onload事件處理函數(shù)只會(huì)被調(diào)用1次，且不兼容IE10之前版本的瀏覽器。注意10.3.5獲取服務(wù)器端的響應(yīng)獲取服務(wù)器響應(yīng)的內(nèi)容：當(dāng)服務(wù)器已經(jīng)完成響應(yīng)時(shí)，我們可以通過Ajax對(duì)象的responseText屬性或responseXML屬性獲取服務(wù)器響應(yīng)的內(nèi)容。responseText屬性：用于接收文本類型的響應(yīng)。responseXML屬性：用于接收XML類型的響應(yīng)。服務(wù)器在返回XML數(shù)據(jù)時(shí)，應(yīng)設(shè)置Content-Type字段的值為text/xml或application/xml，否則會(huì)解析失敗。Tip數(shù)據(jù)交換格式10.410.4數(shù)據(jù)交換格式客戶端和服務(wù)器端進(jìn)行交互時(shí)，為了確保通信雙方都能夠正確識(shí)別對(duì)方發(fā)送的信息，需要約定一種格式。目前比較通用的數(shù)據(jù)交換格式有以下兩種。XML：歷史悠久、應(yīng)用廣泛的數(shù)據(jù)格式。JSON：近幾年在Web開發(fā)中流行的數(shù)據(jù)格式。

先定一個(gè)小目標(biāo)！掌握XML數(shù)據(jù)格式，能夠?qū)崿F(xiàn)發(fā)送和接收XML格式的數(shù)據(jù)10.4.1XML數(shù)據(jù)格式10.4.1XML數(shù)據(jù)格式XML是由W3C

制定的一種通用標(biāo)記語(yǔ)言，主要用于描述和存儲(chǔ)數(shù)據(jù)。編寫XML文檔時(shí)，需要先聲明XML文檔的類型，聲明時(shí)version屬性不能省略，且必須放在第1位。XML文檔中的標(biāo)簽必須成對(duì)出現(xiàn)，且嚴(yán)格區(qū)分大小寫。10.4.1XML數(shù)據(jù)格式通過代碼演示一段簡(jiǎn)單的XML文檔。<?xmlversion="1.0"encoding="utf-8"?><book><name>三國(guó)演義</name><author>羅貫中</author></book>版本編碼格式10.4.1XML數(shù)據(jù)格式當(dāng)瀏覽器向服務(wù)器發(fā)送XML格式的數(shù)據(jù)時(shí)，需要在瀏覽器端設(shè)置請(qǐng)求頭中的Content-Type字段為text/xml，示例代碼如下。xhr.setRequestHeader('Content-Type','text/xml');當(dāng)服務(wù)器返回XML格式的數(shù)據(jù)時(shí)，需要在服務(wù)器端設(shè)置響應(yīng)頭中的Content-Type字段為text/xml，示例代碼如下。res.setHeader('Content-Type','text/xml');

先定一個(gè)小目標(biāo)！掌握J(rèn)SON數(shù)據(jù)格式，能夠?qū)崿F(xiàn)發(fā)送和接收J(rèn)SON格式的數(shù)據(jù)10.4.2JSON數(shù)據(jù)格式10.4.2JSON數(shù)據(jù)格式JSON是一種輕量級(jí)的數(shù)據(jù)交換格式，它采用完全獨(dú)立于編程語(yǔ)言的文本格式來(lái)存儲(chǔ)和表示數(shù)據(jù)，這使得它能夠輕松地在客戶端和服務(wù)器之間傳輸。在JavaScript中，我們可以輕松地在JSON字符串與對(duì)象之間轉(zhuǎn)換，相較于XML數(shù)據(jù)格式來(lái)說(shuō)，JSON數(shù)據(jù)格式使用起來(lái)更加方便。10.4.2JSON數(shù)據(jù)格式使用JSON可以保存對(duì)象、數(shù)字、字符串、數(shù)組等類型的數(shù)據(jù)。JSON本質(zhì)上是一個(gè)字符串，需要使用雙引號(hào)標(biāo)注對(duì)象的成員名和字符串型的值。通過代碼演示一段JSON代碼。{"name":"Tom","age":24,"work":true}通過JavaScript處理JSON數(shù)據(jù)時(shí)，需要使用以下兩個(gè)方法對(duì)數(shù)據(jù)進(jìn)行處理。JSON.stringify()方法。JSON.parse()方法。10.4.2JSON數(shù)據(jù)格式JSON.stringify()方法用于將數(shù)據(jù)轉(zhuǎn)換為JSON字符串，其語(yǔ)法格式如下。JSON.stringify(value[,replacer][,space])value表示將要轉(zhuǎn)成JSON字符串的值。replacer是可選參數(shù)，用于決定value中哪部分被轉(zhuǎn)化為JSON字符串。space是可選參數(shù)，用于指定縮進(jìn)用的空白字符串，從而美化輸出格式。10.4.2JSON數(shù)據(jù)格式JSON.parse()方法用于解析JSON字符串，返回原始值，其語(yǔ)法格式如下。JSON.parse(text[,reviver])text表示JSON字符串。reviver為可選項(xiàng)，用于傳入一個(gè)函數(shù)來(lái)修改解析生成的原始值。同源策略10.5

先定一個(gè)小目標(biāo)！熟悉什么是同源策略，能夠區(qū)分同源和不同源URL地址10.5.1什么是同源策略10.5.1什么是同源策略同源策略是瀏覽器的一種安全策略，它可以讓同源地址之間的訪問不受限制，但不同源地址之間不能隨意訪問。同源策略規(guī)定URL中的協(xié)議、域名和端口號(hào)都要相同，以保證多個(gè)頁(yè)面或者請(qǐng)求同源，如果有一個(gè)不相同，就是不同源。10.5.1什么是同源策略以下是同源URL地址。http://www.example.test:8080/index.htmlhttp://www.example.test:8080/test.html在判斷兩個(gè)URL地址是否同源時(shí)，請(qǐng)求資源路徑忽略不計(jì)。注意10.5.1什么是同源策略不同源URL—協(xié)議不同的情況。http://www.example.test:8080/https://www.example.test:8080/不同源URL—域名不同的情況。http://www.example.test:8080/http://api.example.test:8080/不同源URL—端口號(hào)不同的情況。http://www.example.test:8080/http://www.example.test:8081/

先定一個(gè)小目標(biāo)！掌握跨域請(qǐng)求的實(shí)現(xiàn)，能夠利用CROS實(shí)現(xiàn)跨域請(qǐng)求10.5.2實(shí)現(xiàn)跨域請(qǐng)求10.5.2實(shí)現(xiàn)跨域請(qǐng)求跨域請(qǐng)求是指當(dāng)前發(fā)起請(qǐng)求的域與該請(qǐng)求指向的資源所在的域不同時(shí)的請(qǐng)求。如果兩個(gè)請(qǐng)求的協(xié)議、域名、端口號(hào)均相同就是同域，否則就是跨域。10.5.2實(shí)現(xiàn)跨域請(qǐng)求瀏覽器為什么限制跨域請(qǐng)求：跨域請(qǐng)求會(huì)導(dǎo)致網(wǎng)頁(yè)失去安全性。限制跨域請(qǐng)求帶來(lái)的問題：互相信任的網(wǎng)站之間無(wú)法發(fā)送跨域請(qǐng)求。如何解決限制跨域請(qǐng)求帶來(lái)的問題：W3C提出了CORS（Cross-OriginResourceSharing，跨域資源共享）方案，通過在服務(wù)器端進(jìn)行簡(jiǎn)單的配置即可允許跨域請(qǐng)求。由于該方案比較新，一些早期的瀏覽器不支持，但目前主流的瀏覽器都已經(jīng)支持了。10.5