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

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

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

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

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

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

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

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

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

服務(wù)器外觀圖：

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

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

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

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

數(shù)據(jù)庫服務(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ù)庫服務(wù)器

SQL Server

Oracle

MySQL

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

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

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

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

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

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

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

優(yōu)點：

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

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

缺點：

重量級，必需要安裝app；

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

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

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

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

優(yōu)點：

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

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

缺點：

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

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

1、IP地址

IP地址是網(wǎng)絡(luò)上每一臺設(shè)備通訊時的身份標識(就像身份證、手機號)。

IP地址長什么樣子呢？

192.168.10.10

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

119.75.213.61

特殊的IP地址-代表本機：

127.0.0.1

如何查看當前IP地址？

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

2、域名

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

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

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

3、DNS 服務(wù)器

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

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

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

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

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

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

端口號： 每一個端口都有一個端口號。范圍是從0 到65535。

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

常用端口號： 80（HTTP）、3306（MySQL）、21（FTP）。

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

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

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

特點：

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

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

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

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

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

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

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

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

1、Apache：

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

2、MySQL：

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

3、PHP：

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

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

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

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

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

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

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

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

當出現(xiàn)wamp頁面的時候說明軟件安裝成功。

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

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

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

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

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

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

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

1、基本功能使用：

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

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

功能介紹：Apache

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

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

功能介紹：MySQL

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

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

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

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

找到C:WindowsSystem32driversetchosts文件并修改

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

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

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

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

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

3、為Web服務(wù)器配置虛擬主機（一臺Web服務(wù)器當多臺用）

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

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

將Require local 改成 Require all granted

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

4、注意事項

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

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

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

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

將Require local 改成 Require all granted

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

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

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

“#”表示注釋

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

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

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

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

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

FTP文件傳輸協(xié)議

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

HTTP協(xié)議：

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

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

1、請求行：
由請求方法、請求URL和HTTP協(xié)議及版本構(gòu)成
GET /code/login.php?username=123&password=123 HTTP/1.1
POST /code/login.php HTTP/1.1
2、請求頭：
這里設(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：瀏覽器的語言環(huán)境,如：Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3


Host：請求的主機名，允許多個域名同處一個IP地址，即虛擬主機。Host:www.baidu.com


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


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

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


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


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

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

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


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

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


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

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


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


200 OK 正常返回信息

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

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



3XX：重定向


301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置。

302 Found 臨時性重定向。

303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。

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



4XX：客戶端錯誤


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

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

403 Forbidden 禁止訪問。

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



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


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

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



2、響應(yīng)頭:


Date：響應(yīng)時間

Server：服務(wù)器信息

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

ETag：資源修改后生成的唯一標識，由服務(wù)器自動生成

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

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

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


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

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

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

缺點：

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

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

Ajax應(yīng)用場景：

場景1 數(shù)據(jù)驗證
場景2 按需取數(shù)據(jù)
場景3 自動更新頁面

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

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

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

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


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

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

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

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

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


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

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

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


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

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

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

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

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

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


200:”OK”

404: 未找到頁面

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

    
    

    
    

        

        

            
            
        
    


js部分：
// 1-發(fā)送按鈕注冊點擊事件
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)容 動態(tài)創(chuàng)建一個p標簽 添加到 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請求
    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請求的時候，需要使用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部分我們可以不用深究，只需要知道請求的數(shù)據(jù)message，在php里其實就是一個隨機字符串。
效果圖：

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





    
    Levi
    18

注意：

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

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



    Levi
    18

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

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

    // 判斷當前的請求方式，如果是get，將數(shù)據(jù)拼接在地址后面
    xhr.open(options.type, options.type == "get" ? options.url + "?" + dataStr : options.url, options.async);
    // 當是post請求的時候，需要設(shè)置請求頭
    if (options.type == "post") {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    // 發(fā)送數(shù)據(jù)，當是post方式的時候，發(fā)送數(shù)據(jù)
    xhr.send(options.type == "get" ? null : dataStr);
    if (options.async) {
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 判斷請求的數(shù)據(jù)是什么類型的
                var type = xhr.getResponseHeader("Content-Type");
                var result;
                if (type.indexOf("json") != -1) {
                    // 如果是json格式的數(shù)據(jù)，就將其轉(zhuǎn)換成js對象
                    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ù)進行傳遞
                options.success(result);
            }
        }
    } else {
        // 如果是同步的話就不需要在監(jiān)測狀態(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請求
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
請求的地址


type
請求的方式


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



data
數(shù)據(jù)


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


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


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


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


timeout
設(shè)置請求超時時間



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

    
    
    
    

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




3、jQuery中的serializeArray方法：
上面的方法我們可以看到，獲取整個數(shù)據(jù)的時候，是很簡單，但是想要進行校驗的話就很難，因為上面的方法獲取的是一個字符串，不能進行校驗，所以此時我們需要另外一個方法，jQuery中的serializeArray方法。

    
    
    
    

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




示例代碼：ajax模擬表單校驗及注冊




    
    
    



    

        

            

                

                    用戶名
                    
                    
                
                

                    請設(shè)置密碼
                    
                
                

                    請確認密碼
                    
                
                

                    驗證手機
                    
                
                

                    短信驗證碼
                    
                    
                
                

                    
                    
                
            
        
    
    

        
用戶名不能為空
    

    
    



效果圖：

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

2、創(chuàng)建script標簽，注意類型是type="text/template"，并且要有一個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：
模板一級特殊變量可以使用$data，指的就是獲取的數(shù)據(jù)；

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

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



效果圖：

注意：這里介紹一個語法as v i，可以手動指定$index和$value的量

4、變量：

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



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



<