摘要：注意事項(xiàng)以下版本要設(shè)置默認(rèn)編碼，，否則程序可能無法正確顯示中文。組成部分協(xié)議是對(duì)請(qǐng)求和響應(yīng)的報(bào)文內(nèi)容進(jìn)行了約束和規(guī)范。請(qǐng)求報(bào)文請(qǐng)求是由客戶端發(fā)起，其規(guī)范格式為請(qǐng)求行請(qǐng)求頭請(qǐng)求主體。

前面我們已經(jīng)學(xué)習(xí)了js基礎(chǔ)知識(shí)和一些簡(jiǎn)單的特效，基本上已經(jīng)能夠?qū)懗鲆粋€(gè)帶有特效的靜態(tài)頁(yè)面了，為什么還要稱之為靜態(tài)頁(yè)面呢？因?yàn)榫W(wǎng)頁(yè)里的數(shù)據(jù)都是寫死的，真正的工作中，我們是要通過Ajax技術(shù)，去后臺(tái)獲取數(shù)據(jù)的。所以在本篇文章，我會(huì)向大家介紹下什么是Ajax技術(shù)，并且它的實(shí)現(xiàn)原理是什么。

在學(xué)習(xí)Ajax之前，我們首先需要知道什么是服務(wù)器。

1、什么是服務(wù)器？

服務(wù)器的本質(zhì)其實(shí)就是一臺(tái)電腦，不過它不像一般的電腦一樣擁有鼠標(biāo)鍵、鍵盤、顯示器等輸入設(shè)備，它直接就是一個(gè)主機(jī)，里面只有主板、硬盤、cpu、內(nèi)存并且性能比一般計(jì)算機(jī)的性能更高，穩(wěn)定性更強(qiáng)。

通過網(wǎng)絡(luò)為其他計(jì)算機(jī)提供應(yīng)用服務(wù)的計(jì)算機(jī)就是服務(wù)器。

有別于普通的PC，服務(wù)器性能更好、安全性更高、穩(wěn)定性更強(qiáng)。

服務(wù)器運(yùn)行在有特定環(huán)境要求的地方

IDC（對(duì)氣候、能源、消防、建筑、安保等要求。

服務(wù)器外觀圖：

2、服務(wù)器提供什么服務(wù)

根據(jù)需求的不同，服務(wù)器的種類也有所不同。

網(wǎng)頁(yè)服務(wù)器(Web Server)

郵件服務(wù)器(Mail Server)

數(shù)據(jù)庫(kù)服務(wù)器(Database Server)

FTP服務(wù)器(FTP Server)

域名服務(wù)器(DNS Server)

3、服務(wù)器操作系統(tǒng)：

Windows Server

Linux （Debian，Ubuntu，CentOS，Fedora）

4、服務(wù)器的應(yīng)用軟件：

Web服務(wù)器(又稱：http服務(wù)器，主要提供文檔的瀏覽功能，文本、圖片、視頻、音頻)。

IIS （Windows）

Apache

Nginx

數(shù)據(jù)庫(kù)服務(wù)器

SQL Server

Oracle

MySQL

客戶端： 通過網(wǎng)絡(luò)向服務(wù)器請(qǐng)求服務(wù)的計(jì)算機(jī)就是客戶端（手機(jī)、電腦）；

客戶端軟件： 在客戶端計(jì)算機(jī)上運(yùn)行的與服務(wù)器通訊的軟件就叫客戶端軟件；

單機(jī)軟件： 在客戶端計(jì)算機(jī)上運(yùn)行的不訪問網(wǎng)絡(luò)的軟件叫做單機(jī)軟件；

軟件開發(fā)架構(gòu)分為兩種，分別是C/S架構(gòu)和B/S架構(gòu)。

1、C/S架構(gòu)：

C/S，是Client：（客戶端）和Server（服務(wù)器）兩個(gè)單詞的簡(jiǎn)寫，指的是客戶端應(yīng)用程序與服務(wù)器端應(yīng)用程序通訊的軟件開發(fā)架構(gòu)。

對(duì)于C/S架構(gòu)，最為常見的例子就是網(wǎng)絡(luò)游戲，比如LOL，如果不聯(lián)網(wǎng)就無法使用。

優(yōu)點(diǎn)：

由于是原生的應(yīng)用，所以顯示的效果會(huì)更加酷炫;

性能較高，可以將一部分計(jì)算的工作放在客戶端上，這樣服務(wù)器只需要處理數(shù)據(jù)即可。

缺點(diǎn)：

重量級(jí)，必需要安裝app；

軟件需要用戶去更新，并且要考慮不同的設(shè)備訪問。

2、B/S架構(gòu)

B/S，是Browser：（瀏覽器）和Server（服務(wù)器），兩個(gè)單詞的簡(jiǎn)寫，指的是Web瀏覽器與服務(wù)器端應(yīng)用程序通訊的軟件開發(fā)架構(gòu)。

現(xiàn)在所有的網(wǎng)站都是B/S架構(gòu)，比如知乎、網(wǎng)易云音樂、百度...，用戶只需使用瀏覽器就能訪問服務(wù)器；

優(yōu)點(diǎn)：

輕量級(jí)，不需要安裝客戶端，用戶不需要主動(dòng)去更新內(nèi)容，只需要開發(fā)人員更改服務(wù)器的內(nèi)容即可；

多設(shè)備同步，所有數(shù)據(jù)都在網(wǎng)上。

缺點(diǎn)：

性能較低，如果是很酷炫的頁(yè)面，那么現(xiàn)階段還實(shí)現(xiàn)不了；

移動(dòng)設(shè)備兼容性較好，但是瀏覽器兼容性較差。

1、IP地址

IP地址是網(wǎng)絡(luò)上每一臺(tái)設(shè)備通訊時(shí)的身份標(biāo)識(shí)(就像身份證、手機(jī)號(hào))。

IP地址長(zhǎng)什么樣子呢？

192.168.10.10

比如，百度的IP地址就是：

119.75.213.61

特殊的IP地址-代表本機(jī)：

127.0.0.1

如何查看當(dāng)前IP地址？

打開命令行工具，直接輸入“ipconfig”
ipconfig 命令

2、域名

域名簡(jiǎn)單的說，就是給IP地址起一個(gè)容易記憶的名字(就好比人的名字一樣)例如百度的域名：www.baidu.com。

因?yàn)?b>IP地址記憶起來非常不方便，所以日常生活中用戶通過域名來訪問服務(wù)器更加方便。

特殊的域名：localhost(代表本機(jī))。

3、DNS 服務(wù)器

什么是DNS？DNS(Domain Name Server)，其實(shí)就是域名服務(wù)器。

輸入網(wǎng)址后的訪問流程（域名->DNS->IP地址）

查看域名與IP地址的對(duì)應(yīng)關(guān)系（ping 命令）

可以用Hosts文件讓自己的電腦變成一個(gè)屬于自己的DNS服務(wù)器。

4、網(wǎng)絡(luò)端口（Port）

端口是指計(jì)算機(jī)與外界進(jìn)行通訊的數(shù)據(jù)出口（入口），每個(gè)端口為不同的應(yīng)用傳輸不同數(shù)據(jù)。

端口號(hào)： 每一個(gè)端口都有一個(gè)端口號(hào)。范圍是從0 到65535。

端口號(hào)通常跟在IP地址后面，用冒號(hào)分隔。例如：192.168.1.1:80、www.jd.com:80

常用端口號(hào)： 80（HTTP）、3306（MySQL）、21（FTP）。

查看本機(jī)被占用的端口情況（命令行輸入：netstat）

5、數(shù)據(jù)庫(kù)

按照數(shù)據(jù)結(jié)構(gòu)來組織、存儲(chǔ)和管理數(shù)據(jù)的倉(cāng)庫(kù)，軟件開發(fā)行業(yè)一般指的是數(shù)據(jù)庫(kù)軟件，常見的有Oracle、MySQL等。

特點(diǎn)：

數(shù)據(jù)共享，多用戶同時(shí)訪問數(shù)據(jù)的穩(wěn)定性；

故障恢復(fù)，數(shù)據(jù)庫(kù)軟件，提供了一套方法，可以用來發(fā)現(xiàn)錯(cuò)誤，并且修復(fù)錯(cuò)誤。

減少數(shù)據(jù)冗余，由于大家都可以使用同一套數(shù)據(jù)，沒有必要重復(fù)創(chuàng)建。

DBA數(shù)據(jù)庫(kù)管理員：

從事管理和維護(hù)數(shù)據(jù)庫(kù)管理系統(tǒng)(DBMS)的相關(guān)工作人員的統(tǒng)稱。保證數(shù)據(jù)庫(kù)的穩(wěn)定性、安全性、完整性和高性能。

可以通過瀏覽器訪問或查看Web服務(wù)器上的文件資源。

文件資源可以是HTML網(wǎng)頁(yè)、文本、圖片、視頻、音頻、Web服務(wù)器程序等。

AMP，A：Apache，M：MySQL，P：PHP

1、Apache：

世界排名第一的服務(wù)器軟件，特點(diǎn)是：簡(jiǎn)單速度快，性能穩(wěn)定。

2、MySQL：

體積小、速度快、使用成本低，而且還是開源。

3、PHP：

超文本預(yù)處理器，直接將代碼嵌入到HTML文檔中執(zhí)行，簡(jiǎn)單易學(xué)，容易上手。

在自己的Windows電腦上Web服務(wù)器軟件 - Wamp。

WampServer: Wamp就是Windows、Apache、Mysql、PHP集成安裝環(huán)境，即在window下的apache、
php和mysql的服務(wù)器軟件。PHP擴(kuò)展、Apache模塊，開啟/關(guān)閉鼠標(biāo)點(diǎn)點(diǎn)就搞定，再也不用親自去修改
配置文件了，WAMP它會(huì)去做。再也不用到處詢問php的安裝問題了，WAMP一切都搞定了，這個(gè)軟件
在windows平臺(tái)上使用的較多。

下載Wamp：Wamp官網(wǎng)

安裝Wamp：安裝的時(shí)候要區(qū)分版本(64位，32位)，點(diǎn)擊下一步下一步。

注意：安裝目錄的路徑不能出現(xiàn)中文。

程序安裝成功之后，任務(wù)欄里面的小圖標(biāo)是綠色的話，說明安裝成功。

剛剛上面提到過，域名：localhost 和 IP地址：127.0.0.1都可以打開本地服務(wù)器：

當(dāng)出現(xiàn)wamp頁(yè)面的時(shí)候說明軟件安裝成功。

問題1：無法安裝軟件（請(qǐng)檢查安裝軟件的版本與操作系統(tǒng)匹配）

問題2：安裝完成后，web服務(wù)器沒有正常運(yùn)行（測(cè)試web服務(wù)器的端口號(hào)是否被占用）

建議1：64位版本、32位版本要分清

建議2：安裝目錄的路徑不要有中文

建議3：提示默認(rèn)瀏覽器和默認(rèn)編輯器的設(shè)置可忽略

建議4：安裝時(shí)建議關(guān)閉防火墻

建議5：如果已安裝其他的Web服務(wù)器軟件請(qǐng)先關(guān)閉

1、基本功能使用：

修改語(yǔ)言 右擊任務(wù)欄中的軟件小圖標(biāo)==> language ==> chinese

Web服務(wù)器的啟動(dòng)、停止、運(yùn)行： 左擊小圖標(biāo) （修改配置文件之后，一定要重啟服務(wù)器）；

功能介紹：Apache

其中兩個(gè)配置文件后面可能需要修改，所以這里需要知道在哪找到它們。

看下它的配置文件-httpd.conf，其中 #表示的是注釋的意思。

功能介紹：MySQL

看下它的配置文件-my.ini，其中 ;表示的是注釋的意思：

功能介紹：PHP Apache是一個(gè)web服務(wù)器，它本身是不能解析PHP語(yǔ)言的，所以這里也集成了一個(gè)PHP解析器

看下它的配置文件-php.ini，其中 ;表示的是注釋的意思：

1、為Web服務(wù)配置一個(gè)域名（僅限本機(jī)使用的域名）

找到C:WindowsSystem32driversetchosts文件并修改

將本地的IP設(shè)置一個(gè)新的域名lxh.com，重啟Wamp服務(wù)器，在地址欄里輸入lxh.com就會(huì)跳轉(zhuǎn)到服務(wù)器頁(yè)面：

2、自定義Web服務(wù)器的根目錄

我們可以看到，當(dāng)我們輸入本地域名或者IP的時(shí)候，都會(huì)彈出來服務(wù)器的界面，假如我想要打開一個(gè)文件的時(shí)候怎么辦呢？這時(shí)候我們就需要配置服務(wù)器的根目錄，只要是在根目錄里面的文件，都可以通過服務(wù)器打開。

查找并打開安裝目錄D:wamp64inapacheapache2.4.23confextrahttpd-vhosts.conf文件：

打開修改配置文件，其中ServerName指的是域名，我們可以將第一步配好的本地域名地址寫上去；DocumentRoot D:/lxhAjax和是自定義Web服務(wù)器的根目錄為D:/lxhAjax文件夾

3、為Web服務(wù)器配置虛擬主機(jī)（一臺(tái)Web服務(wù)器當(dāng)多臺(tái)用）

在同一局域網(wǎng)下別人可以通過你的IP訪問你的Web服務(wù)器文件夾。

在httpd-vhosts.conf 文件中查找 Require local

將Require local 改成 Require all granted

不過建議大家不要這樣做，安全性不高，電腦里面的東西會(huì)被別人看到。

4、注意事項(xiàng)

php5.6 以下版本要設(shè)置php默認(rèn)編碼，default_charset = UTF-8，否則PHP程序可能無法正確顯示中文。

在httpd.conf文件設(shè)置DocumentRoot前，先檢查是否已經(jīng)關(guān)閉了虛擬主機(jī)，否則可能導(dǎo)致設(shè)置無效。

默認(rèn)情況下Wamp服務(wù)器只能被本機(jī)訪問，如果向被局域網(wǎng)的其他電腦訪問需要修改配置

在httpd-vhosts.conf 文件中查找 Require local

將Require local 改成 Require all granted

檢查網(wǎng)絡(luò)是不是通的 ping 對(duì)方IP

檢查防火墻是否開啟，如果開啟將不能正常被訪問

確保端口沒有被其它程序占用

“#”表示注釋

配置文件每一行不要增加多于的空格。否則服務(wù)器容易報(bào)錯(cuò)。

修改配置要格外小心，禁止無意修改其它內(nèi)容

網(wǎng)絡(luò)協(xié)議約定了網(wǎng)絡(luò)計(jì)算機(jī)之間數(shù)據(jù)的傳輸?shù)姆绞健?shù)據(jù)的格式等。

常見的網(wǎng)絡(luò)應(yīng)用底層協(xié)議：

HTTP、HTTPS超文本傳輸協(xié)議

FTP文件傳輸協(xié)議

SMTP簡(jiǎn)單郵件傳輸協(xié)議

HTTP協(xié)議：

HTTP即超文本傳輸協(xié)議，網(wǎng)站是基于HTTP協(xié)議的，比如我們?cè)陂_發(fā)網(wǎng)站中經(jīng)常使用css、js、圖片等等都是基于該協(xié)議傳輸?shù)摹?/pre>
組成部分：
HTTP協(xié)議是對(duì)請(qǐng)求(Request)和響應(yīng)(Response)的報(bào)文內(nèi)容進(jìn)行了約束和規(guī)范。
請(qǐng)求： 客戶機(jī)向服務(wù)器發(fā)送數(shù)據(jù)
響應(yīng)： 服務(wù)器向客戶機(jī)發(fā)送數(shù)據(jù)

發(fā)送并請(qǐng)求請(qǐng)求報(bào)文，接收響應(yīng)報(bào)文，這種獲取數(shù)據(jù)的方式我們稱之為HTTP協(xié)議。
3.1 請(qǐng)求報(bào)文
請(qǐng)求是由客戶端發(fā)起，其規(guī)范格式為：請(qǐng)求行、請(qǐng)求頭、請(qǐng)求主體。

1、請(qǐng)求行：
由請(qǐng)求方法、請(qǐng)求URL和HTTP協(xié)議及版本構(gòu)成
GET /code/login.php?username=123&password=123 HTTP/1.1
POST /code/login.php HTTP/1.1
2、請(qǐng)求頭：
這里設(shè)置的主要是一些信息，包含客戶端，服務(wù)器。


User-Agent：瀏覽器的具體類型,如：User-Agent：Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0


Accept：瀏覽器支持哪些數(shù)據(jù)類型,如：Accept: text/html,application/xhtml+xml,application/xml;q=0.9;


Accept-Charset：瀏覽器采用的是哪種編碼,如：Accept-Charset: ISO-8859-1


Accept-Encoding：瀏覽器支持解碼的數(shù)據(jù)壓縮格式,如：Accept-Encoding: gzip, deflate


Accept-Language：瀏覽器的語(yǔ)言環(huán)境,如：Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3


Host：請(qǐng)求的主機(jī)名，允許多個(gè)域名同處一個(gè)IP地址，即虛擬主機(jī)。Host:www.baidu.com


Connection：表示是否需要持久連接。Keep-Alive/close，HTTP1.1默認(rèn)是持久連接，它可以利用持久連接的優(yōu)點(diǎn)，當(dāng)頁(yè)面包含多個(gè)元素時(shí)（例如Applet，圖片），顯著地減少下載所需要的時(shí)間。要實(shí)現(xiàn)這一點(diǎn)，Servlet需要在應(yīng)答中發(fā)送一個(gè)Content-Length頭，最簡(jiǎn)單的實(shí)現(xiàn)方法是：先把內(nèi)容寫入ByteArrayOutputStream，然后在正式寫出內(nèi)容之前計(jì)算它的大小。如：Connection: Keep-Alive


Content-Length：表示請(qǐng)求消息正文的長(zhǎng)度。對(duì)于POST請(qǐng)求來說Content-Length必須出現(xiàn)。

Content-Type：WEB服務(wù)器告訴瀏覽器自己響應(yīng)的對(duì)象的類型和字符集。例如：Content-Type: text/html; charset="gb2312"


Content-Encoding：WEB服務(wù)器表明自己使用了什么壓縮方法（gzip，deflate）壓縮響應(yīng)中的對(duì)象。例如：Content-Encoding：gzip


Content-Language：WEB服務(wù)器告訴瀏覽器自己響應(yīng)的對(duì)象的語(yǔ)言。

Cookie：最常用的請(qǐng)求頭，瀏覽器每次都會(huì)將cookie發(fā)送到服務(wù)器上，允許服務(wù)器在客戶端存儲(chǔ)少量數(shù)據(jù)。

Referer：包含一個(gè)URL，用戶從該URL代表的頁(yè)面出發(fā)訪問當(dāng)前請(qǐng)求的頁(yè)面。服務(wù)器能知道你是從哪個(gè)頁(yè)面過來的。Referer: http://www.baidu.com/


3、請(qǐng)求體：
這里是提交給服務(wù)器的數(shù)據(jù)
需要注意的是,如果是往服務(wù)器提交數(shù)據(jù),需要在請(qǐng)求頭中設(shè)置Content-Type:application/x-www-form-urlencoded(在ajax中需要手動(dòng)設(shè)置)；
3.2 響應(yīng)報(bào)文
響應(yīng)報(bào)文是服務(wù)器發(fā)回給客戶端的。組成部分有狀態(tài)行，響應(yīng)頭，響應(yīng)主體。

1、狀態(tài)行：
由協(xié)議版本號(hào)、狀態(tài)碼和狀態(tài)信息構(gòu)成
HTTP/1.1 200 OK
常見的狀態(tài)碼：


1XX：信息狀態(tài)碼

100 Continue 繼續(xù)，一般在發(fā)送post請(qǐng)求時(shí)，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息


2XX：成功狀態(tài)碼


200 OK 正常返回信息

201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源

202 Accepted 服務(wù)器已接受請(qǐng)求，但尚未處理



3XX：重定向


301 Moved Permanently 請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。

302 Found 臨時(shí)性重定向。

303 See Other 臨時(shí)性重定向，且總是使用 GET 請(qǐng)求新的 URI。

304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過。



4XX：客戶端錯(cuò)誤


400 Bad Request 服務(wù)器無法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。

401 Unauthorized 請(qǐng)求未授權(quán)。

403 Forbidden 禁止訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。



5XX: 服務(wù)器錯(cuò)誤


500 Internal Server Error 最常見的服務(wù)器端錯(cuò)誤。

503 Service Unavailable 服務(wù)器端暫時(shí)無法處理請(qǐng)求（可能是過載或維護(hù)）。



2、響應(yīng)頭:


Date：響應(yīng)時(shí)間

Server：服務(wù)器信息

Last-Modified：資源最后修改時(shí)間 由服務(wù)器自動(dòng)生成

ETag：資源修改后生成的唯一標(biāo)識(shí)，由服務(wù)器自動(dòng)生成

Content-Length：響應(yīng)主體長(zhǎng)度

Content-Type：響應(yīng)資源的類型

3、響應(yīng)主體:
即服務(wù)端返回給客戶端的內(nèi)容；
4. Ajax 編程
Asynchronous Javascript And XML（異步的Javascript和XML）。
4.1 Ajax的基本概念
思考：
我們?cè)L問一個(gè)普通網(wǎng)站時(shí)，當(dāng)瀏覽器加載完HTML、CSS、JS以后，網(wǎng)站就固定了，如果網(wǎng)站內(nèi)容發(fā)生改變，必須刷新網(wǎng)頁(yè)后，才能看到更新內(nèi)容。
Ajax概念：
在瀏覽器中，我們能夠不刷新頁(yè)面，通過Ajax的方式去獲取一些新的內(nèi)容。


Ajax 不是一門的新的語(yǔ)言，而是對(duì)現(xiàn)有技術(shù)的綜合利用。
本質(zhì)是在HTTP協(xié)議的基礎(chǔ)上以異步的方式與服務(wù)器進(jìn)行通信。
核心是通過瀏覽器端的js幫我們預(yù)定義的一個(gè)異步對(duì)象XMLHttpRequest來完成的

AJAX是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
優(yōu)點(diǎn)：

頁(yè)面無刷新，用戶體驗(yàn)好；
異步通信，更加快的響應(yīng)能力；
減少冗余請(qǐng)求，減輕了服務(wù)器負(fù)擔(dān)；
基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序

缺點(diǎn)：

瀏覽器對(duì)XMLHttpRequest對(duì)象的支持度不足，存在兼容性；

Ajax干掉了back按鈕，即對(duì)瀏覽器后退機(jī)制的破壞；
對(duì)搜索引擎的支持比較弱；
存在一定的安全問題；
無法用URL直接訪問；
開發(fā)調(diào)試工具的缺乏。

Ajax應(yīng)用場(chǎng)景：

場(chǎng)景1 數(shù)據(jù)驗(yàn)證
場(chǎng)景2 按需取數(shù)據(jù)
場(chǎng)景3 自動(dòng)更新頁(yè)面

Ajax 包含以下五個(gè)部分：
Ajax并非一種新的技術(shù)，而是幾種原有技術(shù)的結(jié)合體。它由下列技術(shù)組合而成。

使用CSS和XHTML來表示。
使用DOM模型來交互和動(dòng)態(tài)顯示。
數(shù)據(jù)互換和操作技術(shù)，使用XML與XSLT

使用XMLHttpRequest來和服務(wù)器進(jìn)行異步通信。
使用javascript來綁定和調(diào)用。

傳統(tǒng)Web應(yīng)用程序與Ajax Web應(yīng)用程序?qū)Ρ龋?/strong>


主要的差別，其實(shí)不是JavaScript，不是HTML/XHTML和CSS，而是采用了XMLHttpRequest來向服務(wù)器異步的請(qǐng)求XML數(shù)據(jù)。
同步：
必須要等前面的任務(wù)完成，才能繼續(xù)后面的任務(wù)，一定要按順序執(zhí)行。
異步：

指某段程序執(zhí)行時(shí)不會(huì)阻塞其它程序執(zhí)行，其表現(xiàn)形式為程序的執(zhí)行順序不依賴程序本身的書寫順序。
其優(yōu)勢(shì)在于不阻塞程序的執(zhí)行，從而提升整體執(zhí)行效率。

XMLHttpRequest可以以異步方式的處理程序。

4.2 創(chuàng)建Ajax
Ajax的原理簡(jiǎn)單來說，就是通過XMLHttpRequest對(duì)象來向服務(wù)器發(fā)送異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來操作DOM而更新頁(yè)面。其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)。
1、創(chuàng)建XMLHttpRequest對(duì)象：
Ajax的核心是XMLHttpRequest對(duì)象，它是Ajax實(shí)現(xiàn)的關(guān)鍵，發(fā)送異步請(qǐng)求、接受響應(yīng)以及執(zhí)行回調(diào)都是通過它來完成。
現(xiàn)代瀏覽器：
所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對(duì)象。
var xhr = new XMLHttpRequest();
老版本IE：
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對(duì)象：
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
為了應(yīng)對(duì)所有的現(xiàn)代瀏覽器，包括IE5和IE6，請(qǐng)檢查瀏覽器是否支持XMLHttpRequest對(duì)象。如果支持，則創(chuàng)建 XMLHttpRequest 對(duì)象。如果不支持，則創(chuàng)建ActiveXObject：
兼容性處理：
var xhr = null;
if(window.XMLHttpRequest){
     //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
    xhr = new XMLHttpRequest();
}else{
    // IE6, IE5 瀏覽器執(zhí)行代碼
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest對(duì)象的屬性和方法：

2、準(zhǔn)備請(qǐng)求，設(shè)置請(qǐng)求的url等參數(shù)：
首先通過open()方法初始化XMLHttpRequest對(duì)象，接受三個(gè)參數(shù)：
// 規(guī)定請(qǐng)求的類型、URL 以及是否異步處理請(qǐng)求。
xhr.open(method,url,async);
method：  表示的是請(qǐng)求類型的字符串，可以是“GET”或者“POST”。
GET請(qǐng)求：
xhr.open("GET","demo.php",true);
POST請(qǐng)求：
xhr.open("POST","demo.php",true);
url： 第二個(gè)參數(shù)是要作為請(qǐng)求發(fā)送目標(biāo)的URL。
async： 第三個(gè)參數(shù)是true或false，表示請(qǐng)求是以異步還是同步的模式發(fā)出。（默認(rèn)為true，一般不建議為false）


false：同步模式發(fā)出的請(qǐng)求會(huì)暫停所有javascript代碼的執(zhí)行，直到服務(wù)器獲得響應(yīng)為止，如果瀏覽器在連接網(wǎng)絡(luò)時(shí)或者在下載文件時(shí)出了故障，頁(yè)面就會(huì)一直掛起。

true：異步模式發(fā)出的請(qǐng)求，請(qǐng)求對(duì)象收發(fā)數(shù)據(jù)的同時(shí)，瀏覽器可以繼續(xù)加載頁(yè)面，執(zhí)行其他javascript代碼

3、發(fā)送請(qǐng)求：
通過XMLHttpRequest對(duì)象的send()方法，向服務(wù)器發(fā)送請(qǐng)求。
xhr.send();
GET請(qǐng)求：
一般情況下，使用Ajax提交的參數(shù)多數(shù)是些簡(jiǎn)單的字符串，可以直接使用GET方法將要提交的參數(shù)寫到open方法的url參數(shù)中，此時(shí)send方法的參數(shù)為null或?yàn)榭铡?/pre>
// get請(qǐng)求是將數(shù)據(jù)拼接在url后面的
xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);
POST請(qǐng)求：
如果需要像HTML表單那樣POST數(shù)據(jù)，請(qǐng)使用setRequestHeader()來添加HTTP頭。然后在send()方法中規(guī)定你希望發(fā)送的數(shù)據(jù)：
// post請(qǐng)求需要加一個(gè)請(qǐng)求頭，并且使用send方法將數(shù)據(jù)進(jìn)行發(fā)送
xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send(...);
4、處理響應(yīng)：
當(dāng)服務(wù)器收到瀏覽器發(fā)送的數(shù)據(jù)后，會(huì)響應(yīng)一個(gè)內(nèi)容，因?yàn)椴恢朗裁磿r(shí)候數(shù)據(jù)響應(yīng)回來，所以提供了一個(gè)事件方法onreadystatechange。每當(dāng)readyState改變的時(shí)候就會(huì)觸發(fā)onreadystatechange事件，readyState屬性：存有XMLHttpRequest的狀態(tài)信息。
xhr.onreadystatechange = function(){
    // 為了保證數(shù)據(jù)完整回來，我們一般會(huì)判斷兩個(gè)值
     if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}
onreadystatechange：當(dāng)處理過程發(fā)生變化的時(shí)候執(zhí)行里面的函數(shù)
readyState：ajax處理過程


0：請(qǐng)求未初始化（還沒有調(diào)用 open()）。

1：請(qǐng)求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用 send()）。

2：請(qǐng)求已發(fā)送，正在處理中（通常現(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。

3：請(qǐng)求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒有完成響應(yīng)的生成。

4：響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了。

status狀態(tài)碼屬性(詳見上面狀態(tài)碼類型)：


200:”OK”

404: 未找到頁(yè)面

responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)；
4.3 Ajax實(shí)現(xiàn)一個(gè)簡(jiǎn)單的聊天室
基本html結(jié)構(gòu)：
簡(jiǎn)單的Ajax實(shí)例聊天室

    
    

    
    

        

        

            
            
        
    


js部分：
// 1-發(fā)送按鈕注冊(cè)點(diǎn)擊事件
var send = document.querySelector(".send");
var clear = document.querySelector(".clear");
var messages = document.querySelector(".messages");
var textarea = document.querySelector(".input").children[0];
send.onclick = function() {
    // 1-獲取輸入的內(nèi)容 動(dòng)態(tài)創(chuàng)建一個(gè)p標(biāo)簽 添加到 messages中
    var p = document.createElement("p");
    var content = textarea.value;
    if (content != "" && content.trim()) {
        p.innerText = content + "：Levi";
        messages.appendChild(p);
        p.className = "self";
        textarea.value = "";
    }

    // 2-創(chuàng)建Ajax請(qǐng)求
    var xhr;
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
        xhr = new XMLHttpRequest();
    } else {
        // IE6, IE5 瀏覽器執(zhí)行代碼
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhr.open("post", "chat.php", true);
    // post請(qǐng)求的時(shí)候，需要使用setRequestHeader()添加響應(yīng)頭
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
    xhr.send("message=" + content);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var reply = xhr.responseText;
            var p = document.createElement("p");
            p.innerText = "網(wǎng)友：" + reply;
            p.className = "other";
            messages.appendChild(p);
        }
    }

}

// 3-清屏按鈕
clear.onclick = function() {
    messages.innerHTML = "";
}

// 4-回車鍵觸發(fā)發(fā)送按鈕
textarea.onkeydown = function(e) {
    e = window.event || e;
    if (e.keyCode == 13) {
        send.onclick();
        e.preventDefault();
    }
}
PHP部分：

PHP部分我們可以不用深究，只需要知道請(qǐng)求的數(shù)據(jù)message，在php里其實(shí)就是一個(gè)隨機(jī)字符串。
效果圖：

4.4 復(fù)雜的數(shù)據(jù)格式介紹
在HTTP協(xié)議中，所有數(shù)據(jù)最終的傳輸格式全部都是字符串。如果想要在HTTP協(xié)議中傳輸一些復(fù)雜類型的數(shù)據(jù)，如數(shù)組、對(duì)象等，無法直接實(shí)現(xiàn)。
后臺(tái)只有一個(gè)，但是開發(fā)語(yǔ)言卻有很多種，一種后臺(tái)格式的數(shù)據(jù)，如何適應(yīng)全部開發(fā)語(yǔ)言的需求呢？所以需要一個(gè)統(tǒng)一的數(shù)據(jù)格式來在各個(gè)語(yǔ)言之間傳遞數(shù)據(jù)。
4.4.1 XML數(shù)據(jù)格式
XML(Extensible Markup Language)，可擴(kuò)展標(biāo)記語(yǔ)言。它也是一個(gè)標(biāo)記語(yǔ)言，所以它里面也是標(biāo)簽，并且也有文檔聲明。
XML文件的基本格式：





    
    Levi
    18

注意：

必須有一個(gè)根元素
不可以有空格、標(biāo)簽不可以以數(shù)字、下劃線、或其他特殊符號(hào)開頭，大小寫敏感；
不可交叉嵌套；
特殊符號(hào)要使用實(shí)體；
注釋和HTML一樣

雖然可以描述和傳輸復(fù)雜數(shù)據(jù)，但是其解析過于復(fù)雜并且體積較大，所以實(shí)際開發(fā)已經(jīng)使用很少了。
Ajax請(qǐng)求XML數(shù)據(jù)：
首先，新建一個(gè)XML數(shù)據(jù)格式的文件-data.xml：



    Levi
    18

新建一個(gè)PHP文件-xml.php：

在html里面通過Ajax獲得數(shù)據(jù)：
var xhr = new XMLHttpRequest();
xhr.open("get","xml.php");
xhr.send();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status ==200){
        console.log(xhr.responseXML); // 返回XML形式的響應(yīng)數(shù)據(jù)
        // DOM里面的api在xml里面同樣適用
        console.log(xhr.responseXML.getElementByTagName("name")[0].innerHTML);  // 打印 Levi
    }
}
responseXML：獲得XML形式的響應(yīng)數(shù)據(jù)。
在Ajax中獲取到XML數(shù)據(jù)之后，需要通過xhr.responseXML這個(gè)屬性來獲取數(shù)據(jù)，獲取數(shù)據(jù)的時(shí)候可以直接使用DOM提供的API。responseText也可以獲取到數(shù)據(jù)，但是獲取到的是字符串，無法通過dom`api`來操作。
4.4.2 JSON數(shù)據(jù)格式
JSON(JavaScript Object Notation)，是一種輕量級(jí)的數(shù)據(jù)交換格式，獨(dú)立語(yǔ)言。
json有別于一般的對(duì)象，雖然json也是鍵值對(duì)的存在，但是json的鍵必須要加雙引號(hào)，而一般的js對(duì)象可以不用加。
json數(shù)據(jù)的基本格式：
data:[
    { "name":"zs", "age":18, "skill":"吹牛" },
                       ...
    { "name":"ww", "age":28, "skill":"睡覺" }
]
Ajax請(qǐng)求json數(shù)據(jù)：
前面我們知道了，前端在拿后臺(tái)數(shù)據(jù)的時(shí)候，對(duì)后臺(tái)數(shù)據(jù)處理提供了兩個(gè)方法，一個(gè)是對(duì)字符串處理的responseText方法，還有一個(gè)是對(duì)XML格式處理的responseXML方法，但是唯獨(dú)沒有處理json數(shù)據(jù)的方法，所以我們需要借助于json內(nèi)置對(duì)象的JSON.parse方法，將后臺(tái)的返回的json字符串，轉(zhuǎn)換成json對(duì)象。
JSON.parse(xhr.responseText);
新建一個(gè)PHP文件-json.php：
"Levi" ,"age"=>18,"skill"=>"帥" );
    
    // json_encode 將對(duì)象數(shù)據(jù)轉(zhuǎn)換成json格式的數(shù)據(jù)返回前端
    echo json_encode($person);
?>
在html里面通過Ajax獲得數(shù)據(jù)：
 var xhr = new XMLHttpRequest();
    xhr.open("get", "01-json.php");
    xhr.send();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 前端拿后臺(tái)數(shù)據(jù)的時(shí)候，只有兩種方式 responseText和responseXML
            // 沒有多帶帶為json數(shù)據(jù)提供一個(gè)方法，所以需要將json字符串通過JSON.parse()方法，轉(zhuǎn)換成對(duì)象jianrong
            var jsonStr = xhr.responseText;
            var jsonObj = JSON.parse(jsonStr);
            console.log(jsonObj);  // 打印的是一個(gè)對(duì)象
        }
    }
總結(jié)方法：
將json字符串，轉(zhuǎn)換成一個(gè)對(duì)象：JSON.parse(jsonStr);
// 注意，json字符串里面的屬性必須是雙引號(hào)包裹，單引號(hào)包裹會(huì)報(bào)錯(cuò)
var jsonStr = "{"name":"Levi","age":18,"skill":"帥"}";
var obj = JSON.parse(jsonStr);
console.log(obj); // 打印對(duì)象 {name: "Levi", age: 18, skill: "帥"}
將對(duì)象轉(zhuǎn)換成json格式的字符串：JSON.stringify;
var obj = {
    name: "Levi",
    age: "18",
    skill: "帥"
};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr); //打印{"name":"Levi","age":"18","skill":"帥"}
4.5 Ajax代碼的封裝
一個(gè)頁(yè)面中，肯定不只是一處需要ajax請(qǐng)求，所以我們可以將它封裝成一個(gè)函數(shù)。
Ajax對(duì)象獲取響應(yīng)頭屬性：
xhr.getAllResponseHeaders();   // 獲取全部響應(yīng)頭信息 
xhr.getResponseHeader("key");  // 獲取指定頭信息 
代碼封裝：
// 封裝前需要考慮的因素
// 1- 請(qǐng)求的方式
    // get: 需要將數(shù)據(jù)拼接在url之后
    // post: 需要加一個(gè)請(qǐng)求頭，并且使用send方法將數(shù)據(jù)進(jìn)行發(fā)送
// 2- 請(qǐng)求的url地址
// 3- 需要發(fā)送的數(shù)據(jù)
// 4- 添加回調(diào)函數(shù)success，將請(qǐng)求到的數(shù)據(jù)返回給調(diào)用的函數(shù)
    // 判斷服務(wù)器返回的是什么格式的數(shù)據(jù)（通過響應(yīng)頭）
        // a- xhr.getAllResponseHeaders();  獲取全部響應(yīng)頭信息 
        // b- xhr.getResponseHeader("key"); 獲取指定頭信息 
function ajax(options) {
    // 默認(rèn)值處理
    // 設(shè)置默認(rèn)的請(qǐng)求方式為type
    options.type = options.type || "get";
    // 設(shè)置默認(rèn)的請(qǐng)求地址為當(dāng)前地址欄地址
    options.url = options.url || location.href;
    // 設(shè)置默認(rèn)的請(qǐng)求同步或者異步
    options.async = options.async || "true";
    // 設(shè)置請(qǐng)求參數(shù)data的默認(rèn)值
    options.data = options.data || {};
    // 處理用戶傳進(jìn)來的請(qǐng)求參數(shù)（data）對(duì)象
    var dataArr = [];
    for (var k in options.data) {
        dataArr.push(k + "=" + options.data[k]);
    }
    var dataStr = dataArr.join("&");

    // 異步請(qǐng)求對(duì)象兼容性處理
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        // IE6及其以下版本   
        xhr = new ActiveXObjcet("Microsoft.XMLHTTP");
    };

    // 判斷當(dāng)前的請(qǐng)求方式，如果是get，將數(shù)據(jù)拼接在地址后面
    xhr.open(options.type, options.type == "get" ? options.url + "?" + dataStr : options.url, options.async);
    // 當(dāng)是post請(qǐng)求的時(shí)候，需要設(shè)置請(qǐng)求頭
    if (options.type == "post") {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    // 發(fā)送數(shù)據(jù)，當(dāng)是post方式的時(shí)候，發(fā)送數(shù)據(jù)
    xhr.send(options.type == "get" ? null : dataStr);
    if (options.async) {
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 判斷請(qǐng)求的數(shù)據(jù)是什么類型的
                var type = xhr.getResponseHeader("Content-Type");
                var result;
                if (type.indexOf("json") != -1) {
                    // 如果是json格式的數(shù)據(jù)，就將其轉(zhuǎn)換成js對(duì)象
                    result = JSON.parse(xhr.responseText);
                } else if (type.indexOf("xml") != -1) {
                    // 如果是xml格式的數(shù)據(jù)，直接返回responseXML
                    result = xhr.responseXML;
                } else {
                    // 如果兩種格式都不是，直接返回responseText
                    result = xhr.responseText;
                }
                // 將處理好的數(shù)據(jù)進(jìn)行傳遞
                options.success(result);
            }
        }
    } else {
        // 如果是同步的話就不需要在監(jiān)測(cè)狀態(tài)改變的情況了
        var type = xhr.getResponseHeader("Content-Type");
        var result;
        if (type.indexOf("json") != -1) {
            result = JSON.parse(xhr.responseText);
        } else if (type.indexOf("xml") != -1) {
            result = xhr.responseXML;
        } else {
            result = xhr.responseText;
        }
        options.success(result);
    }
}

// 調(diào)用ajax請(qǐng)求
ajax({
    url: "json.php",
    type: "get",
    data: {name: "levi",age: 18},
    success: function(data) {
        console.log(data);
    }
});
ajax({
    url: "xml.php",
    type: "get",
    data: {name: "levi",age: 18},
    success: function(data) {
        console.log(data);
    }
});
5. jQuery中的Ajax操作
前面的《jQuery入門詳解》中已經(jīng)講到了如何通過jQuery操作Ajax，這里再為大家總結(jié)一遍。
1、$.ajax()方式常用參數(shù)解析：


方法
作用



url
請(qǐng)求的地址


type
請(qǐng)求的方式


dataType
告訴jQuery，需要按照什么格式對(duì)服務(wù)器返回的數(shù)據(jù)進(jìn)行解析，默認(rèn)json



data
數(shù)據(jù)


success
請(qǐng)求成功的回調(diào)函數(shù)


error
請(qǐng)求失敗的回調(diào)函數(shù)


beforeSend
請(qǐng)求發(fā)送之前調(diào)用的函數(shù)


complete
不論請(qǐng)求是成功還是失敗的，只要請(qǐng)求完成就會(huì)調(diào)用


timeout
設(shè)置請(qǐng)求超時(shí)時(shí)間



示例代碼：
$.ajax({
    // 請(qǐng)求的地址
    url: "04-data.php",
    // 請(qǐng)求的方式
    type: "get",
    // 告訴jQuery，需要按照什么格式對(duì)服務(wù)器返回的數(shù)據(jù)進(jìn)行解析，默認(rèn)json
    dataType: "json",
    // 數(shù)據(jù)
    data: {
        msg: "我是來請(qǐng)求數(shù)據(jù)的"
    },
    // 請(qǐng)求成功的回調(diào)函數(shù)
    success: function(data) {
        console.log(data);
    },
    // 請(qǐng)求失敗的回調(diào)函數(shù)
    error: function() {
        console.log("失敗了");
    },
    // 請(qǐng)求發(fā)送之前調(diào)用的函數(shù)
    beforeSend: function() {
        console.log("請(qǐng)求發(fā)送之前調(diào)用的函數(shù)");
        // 如果返回一個(gè)false，那么就會(huì)阻止整個(gè)請(qǐng)求的發(fā)送
        // return false;
        // 用法：可以用作表單驗(yàn)證，當(dāng)表單內(nèi)容符合規(guī)范的時(shí)候發(fā)送ajax請(qǐng)求，當(dāng)不符合的時(shí)候就不發(fā)送ajax請(qǐng)求
    },
    // 不論請(qǐng)求是成功還是失敗的，只要請(qǐng)求完成就會(huì)調(diào)用
    complete: function() {
        console.log("請(qǐng)求完成了");
    },
    // 設(shè)置請(qǐng)求超時(shí)時(shí)間(單位:ms)，超過這個(gè)時(shí)間后，就不會(huì)請(qǐng)求了
    timeout:2000
});
2、jQuery中的serialize方法：
serialize方法會(huì)將表單中所有的內(nèi)容拼接成key=value&key=value這樣的字符串。
通過這種方式就不要再去手動(dòng)獲取表單中的內(nèi)容的

    
    
    
    

    獲取數(shù)據(jù)




3、jQuery中的serializeArray方法：
上面的方法我們可以看到，獲取整個(gè)數(shù)據(jù)的時(shí)候，是很簡(jiǎn)單，但是想要進(jìn)行校驗(yàn)的話就很難，因?yàn)樯厦娴姆椒ǐ@取的是一個(gè)字符串，不能進(jìn)行校驗(yàn)，所以此時(shí)我們需要另外一個(gè)方法，jQuery中的serializeArray方法。

    
    
    
    

    獲取數(shù)據(jù)




示例代碼：ajax模擬表單校驗(yàn)及注冊(cè)




    
    
    



    

        

            

                

                    用戶名
                    
                    
                
                

                    請(qǐng)?jiān)O(shè)置密碼
                    
                
                

                    請(qǐng)確認(rèn)密碼
                    
                
                

                    驗(yàn)證手機(jī)
                    
                
                

                    短信驗(yàn)證碼
                    
                    
                
                

                    
                    
                
            
        
    
    

        
用戶名不能為空
    

    
    



效果圖：

6. 模板引擎的使用
模板引擎，就是將一段已經(jīng)寫好模板，使用數(shù)據(jù)進(jìn)行填充之后生成html。
6.1 模板引擎的使用步驟
1、引入模板引擎插件：

2、創(chuàng)建script標(biāo)簽，注意類型是type="text/template"，并且要有一個(gè)id，模板內(nèi)部是需要渲染的內(nèi)容：

3、調(diào)用template方法，將數(shù)據(jù)渲染到模板內(nèi)：
var obj = {
    name:"Levi",
    age:18
}

// template("模板的id",要將什么數(shù)據(jù)渲染到模板中)
var html = template("tpl",obj);
4、回到上面的模板部分,在里面添加占位符：

5、打印調(diào)用的字符串：
var html = template("tpl",obj);
console.log(html);  // 打印的就是div字符串 
6.2 模板引擎的其他用法
1、$data：
模板一級(jí)特殊變量可以使用$data，指的就是獲取的數(shù)據(jù)；

{{$data["name"]}}
2、條件語(yǔ)句：
{{if value}}...{{/if}}
{{if value1}}...{{else if value2}}...{{/if}}
示例：

{{if age >= 18}}
    
我成年了
{{else}}
    
我沒有成年了
{{/if}}  
3、循環(huán)語(yǔ)句：
$index指的是獲取當(dāng)前遍歷的索引值；$value指的是獲取當(dāng)前遍歷的元素。
{{each target}}
    {{$index}} {{$value}}
{{/each}}
示例：



效果圖：

注意：這里介紹一個(gè)語(yǔ)法as v i，可以手動(dòng)指定$index和$value的量

4、變量：

{{set temp = data.content}}
示例：



5、標(biāo)簽“@”的用法：
當(dāng)一個(gè)標(biāo)簽在頁(yè)面以字符串形式顯示的時(shí)候，加上“@”后就會(huì)當(dāng)成標(biāo)簽去解析。
首先根據(jù)后臺(tái)數(shù)據(jù)，動(dòng)態(tài)創(chuàng)建一個(gè)信息表格：
前端渲染：
 獲取數(shù)據(jù)生成表格



<