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

前面我們已經學習了js基礎知識和一些簡單的特效，基本上已經能夠寫出一個帶有特效的靜態頁面了，為什么還要稱之為靜態頁面呢？因為網頁里的數據都是寫死的，真正的工作中，我們是要通過Ajax技術，去后臺獲取數據的。所以在本篇文章，我會向大家介紹下什么是Ajax技術，并且它的實現原理是什么。

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

1、什么是服務器？

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

通過網絡為其他計算機提供應用服務的計算機就是服務器。

有別于普通的PC，服務器性能更好、安全性更高、穩定性更強。

服務器運行在有特定環境要求的地方

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

服務器外觀圖：

2、服務器提供什么服務

根據需求的不同，服務器的種類也有所不同。

網頁服務器(Web Server)

郵件服務器(Mail Server)

數據庫服務器(Database Server)

FTP服務器(FTP Server)

域名服務器(DNS Server)

3、服務器操作系統：

Windows Server

Linux （Debian，Ubuntu，CentOS，Fedora）

4、服務器的應用軟件：

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

IIS （Windows）

Apache

Nginx

數據庫服務器

SQL Server

Oracle

MySQL

客戶端： 通過網絡向服務器請求服務的計算機就是客戶端（手機、電腦）；

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

單機軟件： 在客戶端計算機上運行的不訪問網絡的軟件叫做單機軟件；

軟件開發架構分為兩種，分別是C/S架構和B/S架構。

1、C/S架構：

C/S，是Client：（客戶端）和Server（服務器）兩個單詞的簡寫，指的是客戶端應用程序與服務器端應用程序通訊的軟件開發架構。

對于C/S架構，最為常見的例子就是網絡游戲，比如LOL，如果不聯網就無法使用。

優點：

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

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

缺點：

重量級，必需要安裝app；

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

2、B/S架構

B/S，是Browser：（瀏覽器）和Server（服務器），兩個單詞的簡寫，指的是Web瀏覽器與服務器端應用程序通訊的軟件開發架構。

現在所有的網站都是B/S架構，比如知乎、網易云音樂、百度...，用戶只需使用瀏覽器就能訪問服務器；

優點：

輕量級，不需要安裝客戶端，用戶不需要主動去更新內容，只需要開發人員更改服務器的內容即可；

多設備同步，所有數據都在網上。

缺點：

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

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

1、IP地址

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

IP地址長什么樣子呢？

192.168.10.10

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

119.75.213.61

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

127.0.0.1

如何查看當前IP地址？

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

2、域名

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

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

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

3、DNS 服務器

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

輸入網址后的訪問流程（域名->DNS->IP地址）

查看域名與IP地址的對應關系（ping 命令）

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

4、網絡端口（Port）

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

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

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

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

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

5、數據庫

按照數據結構來組織、存儲和管理數據的倉庫，軟件開發行業一般指的是數據庫軟件，常見的有Oracle、MySQL等。

特點：

數據共享，多用戶同時訪問數據的穩定性；

故障恢復，數據庫軟件，提供了一套方法，可以用來發現錯誤，并且修復錯誤。

減少數據冗余，由于大家都可以使用同一套數據，沒有必要重復創建。

DBA數據庫管理員：

從事管理和維護數據庫管理系統(DBMS)的相關工作人員的統稱。保證數據庫的穩定性、安全性、完整性和高性能。

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

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

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

1、Apache：

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

2、MySQL：

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

3、PHP：

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

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

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

下載Wamp：Wamp官網

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

注意：安裝目錄的路徑不能出現中文。

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

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

當出現wamp頁面的時候說明軟件安裝成功。

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

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

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

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

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

建議4：安裝時建議關閉防火墻

建議5：如果已安裝其他的Web服務器軟件請先關閉

1、基本功能使用：

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

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

功能介紹：Apache

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

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

功能介紹：MySQL

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

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

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

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

找到C:WindowsSystem32driversetchosts文件并修改

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

2、自定義Web服務器的根目錄

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

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

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

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

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

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

將Require local 改成 Require all granted

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

4、注意事項

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

在httpd.conf文件設置DocumentRoot前，先檢查是否已經關閉了虛擬主機，否則可能導致設置無效。

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

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

將Require local 改成 Require all granted

檢查網絡是不是通的 ping 對方IP

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

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

“#”表示注釋

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

修改配置要格外小心，禁止無意修改其它內容

網絡協議約定了網絡計算機之間數據的傳輸的方式、數據的格式等。

常見的網絡應用底層協議：

HTTP、HTTPS超文本傳輸協議

FTP文件傳輸協議

SMTP簡單郵件傳輸協議

HTTP協議：

HTTP即超文本傳輸協議，網站是基于HTTP協議的，比如我們在開發網站中經常使用css、js、圖片等等都是基于該協議傳輸的。

組成部分：

HTTP協議是對請求(Request)和響應(Response)的報文內容進行了約束和規范。

請求： 客戶機向服務器發送數據

響應： 服務器向客戶機發送數據

發送并請求請求報文，接收響應報文，這種獲取數據的方式我們稱之為HTTP協議。

請求是由客戶端發起，其規范格式為：請求行、請求頭、請求主體。

1、請求行：

由請求方法、請求URL和HTTP協議及版本構成

GET /code/login.php?username=123&password=123 HTTP/1.1

POST /code/login.php HTTP/1.1

2、請求頭：

這里設置的主要是一些信息，包含客戶端，服務器。

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

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

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

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

Accept-Language：瀏覽器的語言環境,如：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默認是持久連接，它可以利用持久連接的優點，當頁面包含多個元素時（例如Applet，圖片），顯著地減少下載所需要的時間。要實現這一點，Servlet需要在應答中發送一個Content-Length頭，最簡單的實現方法是：先把內容寫入ByteArrayOutputStream，然后在正式寫出內容之前計算它的大小。如：Connection: Keep-Alive

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

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

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

Content-Language：WEB服務器告訴瀏覽器自己響應的對象的語言。

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

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

3、請求體：

這里是提交給服務器的數據

需要注意的是,如果是往服務器提交數據,需要在請求頭中設置Content-Type:application/x-www-form-urlencoded(在ajax中需要手動設置)；

響應報文是服務器發回給客戶端的。組成部分有狀態行，響應頭，響應主體。

1、狀態行：

由協議版本號、狀態碼和狀態信息構成

HTTP/1.1 200 OK

常見的狀態碼：

1XX：信息狀態碼

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

2XX：成功狀態碼

200 OK 正常返回信息

201 Created 請求成功并且服務器創建了新的資源

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

3XX：重定向

301 Moved Permanently 請求的網頁已永久移動到新位置。

302 Found 臨時性重定向。

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

304 Not Modified 自從上次請求后，請求的網頁未修改過。

4XX：客戶端錯誤

400 Bad Request 服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。

401 Unauthorized 請求未授權。

403 Forbidden 禁止訪問。

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

5XX: 服務器錯誤

500 Internal Server Error 最常見的服務器端錯誤。

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

2、響應頭:

Date：響應時間

Server：服務器信息

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

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

Content-Length：響應主體長度

Content-Type：響應資源的類型

3、響應主體:

即服務端返回給客戶端的內容；

Asynchronous Javascript And XML（異步的Javascript和XML）。

思考：

我們訪問一個普通網站時，當瀏覽器加載完HTML、CSS、JS以后，網站就固定了，如果網站內容發生改變，必須刷新網頁后，才能看到更新內容。

Ajax概念：

在瀏覽器中，我們能夠不刷新頁面，通過Ajax的方式去獲取一些新的內容。

Ajax 不是一門的新的語言，而是對現有技術的綜合利用。

本質是在HTTP協議的基礎上以異步的方式與服務器進行通信。

核心是通過瀏覽器端的js幫我們預定義的一個異步對象XMLHttpRequest來完成的

AJAX是一種用于創建快速動態網頁的技術。通過在后臺與服務器進行少量數據交換，AJAX可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

優點：

頁面無刷新，用戶體驗好；

異步通信，更加快的響應能力；

減少冗余請求，減輕了服務器負擔；

基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序

缺點：

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

Ajax干掉了back按鈕，即對瀏覽器后退機制的破壞；

對搜索引擎的支持比較弱；

存在一定的安全問題；

無法用URL直接訪問；

開發調試工具的缺乏。

Ajax應用場景：

場景1 數據驗證

場景2 按需取數據

場景3 自動更新頁面

Ajax 包含以下五個部分：

Ajax并非一種新的技術，而是幾種原有技術的結合體。它由下列技術組合而成。

使用CSS和XHTML來表示。

使用DOM模型來交互和動態顯示。

數據互換和操作技術，使用XML與XSLT

使用XMLHttpRequest來和服務器進行異步通信。

使用javascript來綁定和調用。

傳統Web應用程序與Ajax Web應用程序對比：

主要的差別，其實不是JavaScript，不是HTML/XHTML和CSS，而是采用了XMLHttpRequest來向服務器異步的請求XML數據。

同步：

必須要等前面的任務完成，才能繼續后面的任務，一定要按順序執行。

異步：

指某段程序執行時不會阻塞其它程序執行，其表現形式為程序的執行順序不依賴程序本身的書寫順序。

其優勢在于不阻塞程序的執行，從而提升整體執行效率。

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

Ajax的原理簡單來說，就是通過XMLHttpRequest對象來向服務器發送異步請求，從服務器獲得數據，然后用javascript來操作DOM而更新頁面。其中最關鍵的一步就是從服務器獲得請求數據。

1、創建XMLHttpRequest對象：

Ajax的核心是XMLHttpRequest對象，它是Ajax實現的關鍵，發送異步請求、接受響應以及執行回調都是通過它來完成。

現代瀏覽器：

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。

var xhr = new XMLHttpRequest();

老版本IE：

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

為了應對所有的現代瀏覽器，包括IE5和IE6，請檢查瀏覽器是否支持XMLHttpRequest對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建ActiveXObject：

兼容性處理：

var xhr = null;
if(window.XMLHttpRequest){
     //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xhr = new XMLHttpRequest();
}else{
    // IE6, IE5 瀏覽器執行代碼
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest對象的屬性和方法：

2、準備請求，設置請求的url等參數：

首先通過open()方法初始化XMLHttpRequest對象，接受三個參數：

// 規定請求的類型、URL 以及是否異步處理請求。
xhr.open(method,url,async);

method： 表示的是請求類型的字符串，可以是“GET”或者“POST”。

GET請求：

xhr.open("GET","demo.php",true);

POST請求：

xhr.open("POST","demo.php",true);

url： 第二個參數是要作為請求發送目標的URL。

async： 第三個參數是true或false，表示請求是以異步還是同步的模式發出。（默認為true，一般不建議為false）

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

true：異步模式發出的請求，請求對象收發數據的同時，瀏覽器可以繼續加載頁面，執行其他javascript代碼

3、發送請求：

通過XMLHttpRequest對象的send()方法，向服務器發送請求。

xhr.send();

GET請求：

一般情況下，使用Ajax提交的參數多數是些簡單的字符串，可以直接使用GET方法將要提交的參數寫到open方法的url參數中，此時send方法的參數為null或為空。

// get請求是將數據拼接在url后面的
xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

POST請求：

如果需要像HTML表單那樣POST數據，請使用setRequestHeader()來添加HTTP頭。然后在send()方法中規定你希望發送的數據：

// post請求需要加一個請求頭，并且使用send方法將數據進行發送
xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send(...);

4、處理響應：

當服務器收到瀏覽器發送的數據后，會響應一個內容，因為不知道什么時候數據響應回來，所以提供了一個事件方法onreadystatechange。每當readyState改變的時候就會觸發onreadystatechange事件，readyState屬性：存有XMLHttpRequest的狀態信息。

xhr.onreadystatechange = function(){
    // 為了保證數據完整回來，我們一般會判斷兩個值
     if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}

onreadystatechange：當處理過程發生變化的時候執行里面的函數

readyState：ajax處理過程

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

1：請求已經建立，但是還沒有發送（還沒有調用 send()）。

2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）。

3：請求在處理中；通常響應中已有部分數據可用了，但是服務器還沒有完成響應的生成。

4：響應已完成；您可以獲取并使用服務器的響應了。

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

200:”OK”

404: 未找到頁面

responseText：獲得字符串形式的響應數據；

基本html結構：

簡單的Ajax實例聊天室

    
    

    
    

        

        

            
            
        
    

js部分：

// 1-發送按鈕注冊點擊事件
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-獲取輸入的內容 動態創建一個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-創建Ajax請求
    var xhr;
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
        xhr = new XMLHttpRequest();
    } else {
        // IE6, IE5 瀏覽器執行代碼
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhr.open("post", "chat.php", true);
    // post請求的時候，需要使用setRequestHeader()添加響應頭
    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 = "網友：" + reply;
            p.className = "other";
            messages.appendChild(p);
        }
    }

}

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

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

PHP部分：

PHP部分我們可以不用深究，只需要知道請求的數據message，在php里其實就是一個隨機字符串。

效果圖：

在HTTP協議中，所有數據最終的傳輸格式全部都是字符串。如果想要在HTTP協議中傳輸一些復雜類型的數據，如數組、對象等，無法直接實現。

后臺只有一個，但是開發語言卻有很多種，一種后臺格式的數據，如何適應全部開發語言的需求呢？所以需要一個統一的數據格式來在各個語言之間傳遞數據。

XML(Extensible Markup Language)，可擴展標記語言。它也是一個標記語言，所以它里面也是標簽，并且也有文檔聲明。

XML文件的基本格式：

    
    Levi
    18

注意：

必須有一個根元素

不可以有空格、標簽不可以以數字、下劃線、或其他特殊符號開頭，大小寫敏感；

不可交叉嵌套；

特殊符號要使用實體；

注釋和HTML一樣

雖然可以描述和傳輸復雜數據，但是其解析過于復雜并且體積較大，所以實際開發已經使用很少了。

Ajax請求XML數據：

首先，新建一個XML數據格式的文件-data.xml：

    Levi
    18

新建一個PHP文件-xml.php：

在html里面通過Ajax獲得數據：

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形式的響應數據
        // DOM里面的api在xml里面同樣適用
        console.log(xhr.responseXML.getElementByTagName("name")[0].innerHTML);  // 打印 Levi
    }
}

responseXML：獲得XML形式的響應數據。

在Ajax中獲取到XML數據之后，需要通過xhr.responseXML這個屬性來獲取數據，獲取數據的時候可以直接使用DOM提供的API。responseText也可以獲取到數據，但是獲取到的是字符串，無法通過dom`api`來操作。

JSON(JavaScript Object Notation)，是一種輕量級的數據交換格式，獨立語言。

json有別于一般的對象，雖然json也是鍵值對的存在，但是json的鍵必須要加雙引號，而一般的js對象可以不用加。

json數據的基本格式：

data:[
    { "name":"zs", "age":18, "skill":"吹牛" },
                       ...
    { "name":"ww", "age":28, "skill":"睡覺" }
]

Ajax請求json數據：

前面我們知道了，前端在拿后臺數據的時候，對后臺數據處理提供了兩個方法，一個是對字符串處理的responseText方法，還有一個是對XML格式處理的responseXML方法，但是唯獨沒有處理json數據的方法，所以我們需要借助于json內置對象的JSON.parse方法，將后臺的返回的json字符串，轉換成json對象。

JSON.parse(xhr.responseText);

新建一個PHP文件-json.php：

"Levi" ,"age"=>18,"skill"=>"帥" );
    
    // json_encode 將對象數據轉換成json格式的數據返回前端
    echo json_encode($person);
?>

在html里面通過Ajax獲得數據：

 var xhr = new XMLHttpRequest();
    xhr.open("get", "01-json.php");
    xhr.send();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 前端拿后臺數據的時候，只有兩種方式 responseText和responseXML
            // 沒有多帶帶為json數據提供一個方法，所以需要將json字符串通過JSON.parse()方法，轉換成對象jianrong
            var jsonStr = xhr.responseText;
            var jsonObj = JSON.parse(jsonStr);
            console.log(jsonObj);  // 打印的是一個對象
        }
    }

總結方法：

將json字符串，轉換成一個對象：JSON.parse(jsonStr);

// 注意，json字符串里面的屬性必須是雙引號包裹，單引號包裹會報錯
var jsonStr = "{"name":"Levi","age":18,"skill":"帥"}";
var obj = JSON.parse(jsonStr);
console.log(obj); // 打印對象 {name: "Levi", age: 18, skill: "帥"}

將對象轉換成json格式的字符串：JSON.stringify;

var obj = {
    name: "Levi",
    age: "18",
    skill: "帥"
};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr); //打印{"name":"Levi","age":"18","skill":"帥"}

一個頁面中，肯定不只是一處需要ajax請求，所以我們可以將它封裝成一個函數。

Ajax對象獲取響應頭屬性：

xhr.getAllResponseHeaders();   // 獲取全部響應頭信息 
xhr.getResponseHeader("key");  // 獲取指定頭信息 

代碼封裝：

// 封裝前需要考慮的因素
// 1- 請求的方式
    // get: 需要將數據拼接在url之后
    // post: 需要加一個請求頭，并且使用send方法將數據進行發送
// 2- 請求的url地址
// 3- 需要發送的數據
// 4- 添加回調函數success，將請求到的數據返回給調用的函數
    // 判斷服務器返回的是什么格式的數據（通過響應頭）
        // a- xhr.getAllResponseHeaders();  獲取全部響應頭信息 
        // b- xhr.getResponseHeader("key"); 獲取指定頭信息 
function ajax(options) {
    // 默認值處理
    // 設置默認的請求方式為type
    options.type = options.type || "get";
    // 設置默認的請求地址為當前地址欄地址
    options.url = options.url || location.href;
    // 設置默認的請求同步或者異步
    options.async = options.async || "true";
    // 設置請求參數data的默認值
    options.data = options.data || {};
    // 處理用戶傳進來的請求參數（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，將數據拼接在地址后面
    xhr.open(options.type, options.type == "get" ? options.url + "?" + dataStr : options.url, options.async);
    // 當是post請求的時候，需要設置請求頭
    if (options.type == "post") {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    // 發送數據，當是post方式的時候，發送數據
    xhr.send(options.type == "get" ? null : dataStr);
    if (options.async) {
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 判斷請求的數據是什么類型的
                var type = xhr.getResponseHeader("Content-Type");
                var result;
                if (type.indexOf("json") != -1) {
                    // 如果是json格式的數據，就將其轉換成js對象
                    result = JSON.parse(xhr.responseText);
                } else if (type.indexOf("xml") != -1) {
                    // 如果是xml格式的數據，直接返回responseXML
                    result = xhr.responseXML;
                } else {
                    // 如果兩種格式都不是，直接返回responseText
                    result = xhr.responseText;
                }
                // 將處理好的數據進行傳遞
                options.success(result);
            }
        }
    } else {
        // 如果是同步的話就不需要在監測狀態改變的情況了
        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);
    }
}

// 調用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);
    }
});

前面的《jQuery入門詳解》中已經講到了如何通過jQuery操作Ajax，這里再為大家總結一遍。

1、$.ajax()方式常用參數解析：

示例代碼：

$.ajax({
    // 請求的地址
    url: "04-data.php",
    // 請求的方式
    type: "get",
    // 告訴jQuery，需要按照什么格式對服務器返回的數據進行解析，默認json
    dataType: "json",
    // 數據
    data: {
        msg: "我是來請求數據的"
    },
    // 請求成功的回調函數
    success: function(data) {
        console.log(data);
    },
    // 請求失敗的回調函數
    error: function() {
        console.log("失敗了");
    },
    // 請求發送之前調用的函數
    beforeSend: function() {
        console.log("請求發送之前調用的函數");
        // 如果返回一個false，那么就會阻止整個請求的發送
        // return false;
        // 用法：可以用作表單驗證，當表單內容符合規范的時候發送ajax請求，當不符合的時候就不發送ajax請求
    },
    // 不論請求是成功還是失敗的，只要請求完成就會調用
    complete: function() {
        console.log("請求完成了");
    },
    // 設置請求超時時間(單位:ms)，超過這個時間后，就不會請求了
    timeout:2000
});

2、jQuery中的serialize方法：

serialize方法會將表單中所有的內容拼接成key=value&key=value這樣的字符串。

通過這種方式就不要再去手動獲取表單中的內容的

    
    
    
    

    獲取數據

3、jQuery中的serializeArray方法：

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

    
    
    
    

    獲取數據

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

    
    
    



    

        

            

                

                    用戶名
                    
                    
                
                

                    請設置密碼
                    
                
                

                    請確認密碼
                    
                
                

                    驗證手機
                    
                
                

                    短信驗證碼
                    
                    
                
                

                    
                    
                
            
        
    
    

        
用戶名不能為空
    

    
    

效果圖：

模板引擎，就是將一段已經寫好模板，使用數據進行填充之后生成html。

1、引入模板引擎插件：

2、創建script標簽，注意類型是type="text/template"，并且要有一個id，模板內部是需要渲染的內容：

3、調用template方法，將數據渲染到模板內：

var obj = {
    name:"Levi",
    age:18
}

// template("模板的id",要將什么數據渲染到模板中)
var html = template("tpl",obj);

4、回到上面的模板部分,在里面添加占位符：

5、打印調用的字符串：

var html = template("tpl",obj);
console.log(html);  // 打印的就是div字符串 

1、$data：

模板一級特殊變量可以使用$data，指的就是獲取的數據；

{{$data["name"]}}

2、條件語句：

{{if value}}...{{/if}}
{{if value1}}...{{else if value2}}...{{/if}}

示例：

{{if age >= 18}}
    
我成年了
{{else}}
    
我沒有成年了
{{/if}}  

3、循環語句：

$index指的是獲取當前遍歷的索引值；$value指的是獲取當前遍歷的元素。

{{each target}}
    {{$index}} {{$value}}
{{/each}}

示例：

效果圖：

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

4、變量：

{{set temp = data.content}}

示例：

5、標簽“@”的用法：

當一個標簽在頁面以字符串形式顯示的時候，加上“@”后就會當成標簽去解析。

首先根據后臺數據，動態創建一個信息表格：

前端渲染：

 獲取數據生成表格



<