以下文章為根據(jù)慕課網(wǎng)：Ajax全接觸整理而得的文字筆記版吁断，以便隨時翻閱學(xué)習(xí)擦俐。但是本文未引用視頻課程中的示例佣蓉，使用示例將在今后的文章中單獨(dú)寫出宅此。且最后一章《處理跨域方式》不做整理，如需要褐捻，請上慕課網(wǎng)官網(wǎng)進(jìn)行學(xué)習(xí)掸茅。

一. 課程介紹

1. 什么是 Ajax椅邓？

• 異步的 JavaScript 和 XML ( Asynchronous JavaScript 和 XML )柠逞。
• Ajax 不是某種編程語言，而是一種在無需重新加載整個網(wǎng)頁的情況下能夠更新部分網(wǎng)頁的技術(shù)景馁。通過在后臺跟服務(wù)器進(jìn)行少量的數(shù)據(jù)交換板壮，網(wǎng)頁就可以實(shí)現(xiàn)異部局部更新。
• Ajax 改變了 WEB 開發(fā)的格局合住。

2. 預(yù)備知識

基本的 HTML绰精、CSS、JS知識儲備透葛。

二. Ajax 概念介紹

1. 同步和異步

1）概念

在 Ajax 出現(xiàn)之前笨使，網(wǎng)頁的數(shù)據(jù)請求是同步進(jìn)行的，以表單為例僚害，輸入完所有的信息硫椰，才會向服務(wù)器請求數(shù)據(jù)，然后服務(wù)器對信息進(jìn)行處理并刷新整個頁面，進(jìn)行信息反饋

Ajax 實(shí)現(xiàn)了異步數(shù)據(jù)傳輸靶草，當(dāng)我表單內(nèi)的一個信息填寫完成后蹄胰，客戶端就會向服務(wù)器提交信息，進(jìn)行信息處理并返回處理結(jié)果奕翔，在此時我們可以繼續(xù)進(jìn)行其他信息的填寫

2）異步的產(chǎn)生

異步的產(chǎn)生在技術(shù)層面是由于新對象的出現(xiàn)XMLHttpRequest裕寨。這個對象的出現(xiàn)可以在不加載整個頁面的情況下，使后臺和服務(wù)器進(jìn)行數(shù)據(jù)的交換派继。

3）異步的使用

• 運(yùn)用 HTML 和 CSS 來實(shí)現(xiàn)頁面宾袜，表達(dá)信息
• 運(yùn)用 XMLHttpRequest 和 WEB 服務(wù)器進(jìn)行數(shù)據(jù)的異步交換
• 運(yùn)用 JavaScript 操作 DOM，實(shí)現(xiàn)動態(tài)局部更新

2. XMLHttpRequest ( XHR ) 對象創(chuàng)建

實(shí)例化一個 XHR 對象

  var request = new XMLHttpRequest();

現(xiàn)在的瀏覽器基本都支持 XHR 對象互艾，但是 ie6以下不支持试和，所以我們可以輸入如下代碼進(jìn)行兼容

  var request;
  if(window.XMLHttpRequest){
    request = new XMLHttpRequest();
  } else {
    request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6,IE5
  }

當(dāng)我們 new 了一個 XHR 對象，我們就可以進(jìn)行數(shù)據(jù)請求的操作了纫普。

3. HTTP 請求

1）HTTP 概念

http 是計算機(jī)通過網(wǎng)絡(luò)進(jìn)行通信的規(guī)則阅悍，使得瀏覽器可以從服務(wù)器請求信息和服務(wù)。
http 是一種無狀態(tài)的協(xié)議昨稼，即不建立持久的連接节视。客戶端向服務(wù)器提出請求假栓，服務(wù)器作出相應(yīng)寻行，然后鏈接就被關(guān)閉了，這個處理過程是沒有記憶的匾荆。

• 一個完整的 HTTP請求 過程拌蜘，通常有下面7個步驟：

  1. 建立 TCP 連接
  2. WEB 瀏覽器想 WEB 服務(wù)器發(fā)送請求命令
  3. WEB 瀏覽器發(fā)送請求頭信息
  4. WEB 服務(wù)器應(yīng)答
  5. WEB 服務(wù)器發(fā)送應(yīng)答頭信息
  6. WEB 服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)
  7. WEB 服務(wù)器關(guān)閉 TCP 鏈接

• 一個 HTTP 請求一般由四部分組成：

  1. HTTP 請求的方法或動作，比如是 GET 還是 POST 請求
  2. 正在請求的 URL牙丽，總得知道請求的地址是什么吧
  3. 請求頭简卧，包含一些客戶端環(huán)境信息，身份驗(yàn)證等信息
  4. 請求體烤芦，也就是請求正文举娩，請求正文中可以包含客戶提交的查詢字符串信息，表單信息等等

這是一個完整的 HTTP 請求樣例 GET 是請求方法 login.php 是請求地址 中間部分是請求頭 最后一行是請求體

2）GET 與 POST

• GET：一般用于信息獲取构罗，使用URL 傳遞參數(shù)铜涉，對所發(fā)送信息的數(shù)量也有限制，一般在2000個字符
• POST：一般用于修改服務(wù)器上的資源遂唧，對所發(fā)送的信息的數(shù)量無限制芙代，是不可見的

3）HTTP 響應(yīng)

一個 HTTP 響應(yīng)一般由三個部分組成：

1. 一個數(shù)字和文字組成的狀態(tài)碼
2. 響應(yīng)頭，響應(yīng)頭也和請求頭一樣包含許多有用的信息盖彭，例如服務(wù)器類型纹烹、日期時間事甜、內(nèi)容類型和長度等

3. 響應(yīng)體，也就是響應(yīng)正文

   
   
   HTTP 響應(yīng)樣例

4）HTTP 響應(yīng)的狀態(tài)碼

HTTP 的狀態(tài)碼由三位數(shù)字構(gòu)成滔韵，其中首位數(shù)字定義了狀態(tài)碼的類型：

HTTP 響應(yīng)狀態(tài)碼

4. XMLHttpRequest 發(fā)送請求

之前我們知道了如何創(chuàng)建一個 XHR 對象逻谦，現(xiàn)在我們來看看如何用這個 XHR 對象發(fā)送請求。
XHR 發(fā)送請求有兩個常用的方法需要介紹：

• open(method,url,async)
  • method：get 或者 post
  • url：請求地址（相對或絕對）
  • async：同步請求或者默認(rèn)異步請求（true）
• send(string)：把請求發(fā)送到服務(wù)器

  • send 的時候參數(shù)實(shí)際上是拼接在 url 中的陪蜻，所以可以不填寫

    
    
    示例

5. XMLHttpRequest 取得響應(yīng)

以下是獲取服務(wù)器響應(yīng)的一些方式語句：

• responseText：獲得字符串形式的相應(yīng)數(shù)據(jù)
• responseXML：獲得 XML 形式的相應(yīng)數(shù)據(jù)
• status 和 statusText：以數(shù)字和文本的形式返回 HTTP 狀態(tài)碼
• getAllResponseHeader()：獲取所有的響應(yīng)報頭
• getResponseHeader()：查詢響應(yīng)中的某個字段的值

以上的方式只是獲取響應(yīng)值邦马，下面的屬性是在響應(yīng)成功的時候得到通知：

• readyState 屬性，我們在響應(yīng)過程中監(jiān)聽 readyState 值得變化宴卖，獲取到響應(yīng)所進(jìn)行到的步驟
  • 0：請求未初始化滋将，open 還沒有調(diào)用
  • 1：服務(wù)器連接已建立，open 已經(jīng)調(diào)用了
  • 2：請求已接收症昏，也就是接收到信息頭了
  • 3：請求處理中随闽，也就是接收到響應(yīng)主體了
  • 4：請求已完成，且相應(yīng)已就緒肝谭，也就是響應(yīng)完成了（我們所注意的屬性值）

監(jiān)聽方式：

  var request = new XMLHttpRequest();
  request.open("GET", "get.php", true);
  request.send();
  request.onreadystatechange = function (){
      if(request.readyState === 4 && request.status   === 200){
          // 做一些事情
      }
  }

以上也是一個典型的 XHR 建立 Ajax 對象的基本步驟掘宪。

三. Ajax 的簡單例子(Ajax + PHP)

在這里由于配置環(huán)境等的不同，本文中并未直接采用視頻中的例子進(jìn)行說明攘烛，而是使用了自己的例子進(jìn)行參考：

使用 Ajax 實(shí)現(xiàn)簡單的登錄效果的原理

四. JSON 格式

1. JSON 基本概念

1）JSON 基本概念

• JSON：JavaScript 對象表示法( JavaScript Object Notation )
• JSON 是儲存和交換文本信息的語法魏滚，類似 XML。它采用鍵值對的方式來組織坟漱，已與人們閱讀和編寫鼠次，同時也易于機(jī)器解析和生成
• JSON 是獨(dú)立于語言的，也就是說不管是什么語言芋齿，都可以解析 JSON腥寇，只要按照 JSON 的格式來就行

2）JSON 與 XML 比較

• JSON 的長度與 XML 比較起來很短小
• JSON 的讀寫速度更快
• JSON 可以使用 JavaScript 內(nèi)建的方法直接進(jìn)行解析，轉(zhuǎn)換成 JavaScript 對象觅捆，非常方便

3）JSON 語法規(guī)則

• JSON 數(shù)據(jù)的書寫格式是：名稱 / 值對
  名稱/值對組合中的名稱寫在前面（在雙引號中）赦役，值對寫在后面（同樣在雙引號中），中間用冒號隔開惠拭，比如：

      "name":"郭靜"

• JSON 的值可以是下面這些類型
  • 數(shù)字（整數(shù)或者浮點(diǎn)數(shù)）扩劝，比如123庸论，1.23
  • 字符串（在雙引號中）
  • 邏輯值（true 或 false）
  • 數(shù)組（在方括號中）
  • 對象（在花括號中）
  • null

{
    "staff":[
        {"name":"洪七", "age":70},
        {"name":"郭靜", "age":35},
        {"name":"黃蓉", "age":30}
    ]
}

2. JSON 解析职辅、格式化和校驗(yàn)工具

1）JSON 解析

• eval方法 和 JSON.parse方法
• 在代碼中使用 eval 是很危險的！特別是用它執(zhí)行第三方的 JSON 數(shù)據(jù)（其中可能包含惡意代碼）時聂示，盡可能使用 JSON.parse() 方法解析字符串本身域携，該方法還可以捕捉 JSON 中的語法錯誤。

控制臺中兩種方式解析 JSON 的演示

注：在控制臺鱼喉，eval 不會判斷字符串是否合法秀鞭，而且各種方法會直接執(zhí)行趋观，這是非常危險，而且應(yīng)該避免發(fā)生的锋边。所以盡量不使用 eval 方法皱坛。在實(shí)際使用中，盡可能地使用 JSON.parse()豆巨。

2）在線 JSON 校驗(yàn)工具

JSONLint

輸入 JSON 代碼即可返回代碼中的錯誤剩辟。
具體使用略，詳見視頻往扔。

五. jQuery 中的 AJAX

用 jQuery 實(shí)現(xiàn) Ajax

通常我們不會直接用 JS 實(shí)現(xiàn) Ajax 效果贩猎，而是采用第三方庫，比如 jQuery萍膛。JQuery 已經(jīng)封裝了 Ajax 的方法吭服。

jQuery.ajax([settings])

• type：類型，“POST”或者“GET”蝗罗，默認(rèn)為“GET”
• url：發(fā)送請求的地址
• data：是一個對象艇棕，連同請求發(fā)送到服務(wù)器的數(shù)據(jù)
• dataType：預(yù)期服務(wù)器返回的類型。如果不指定串塑，jQuery 將自動根據(jù) HTTP 包 MIME 信息來智能判斷欠肾，一般我們采用 JSON 格式，可以設(shè)置為“json”
• success：是一個方法拟赊，請求成功后的回調(diào)函數(shù)刺桃。傳入返回后的數(shù)據(jù)，以及包含成功代碼的字符串
• error：是一個方法吸祟，請求失敗時調(diào)用此函數(shù)瑟慈。傳入 XMLHttpRequest 對象

這是一個 jQuery 創(chuàng)建的 Ajax 對象在留言板示例中的使用 由于本文整理時并未引用視頻中的示例 所以將會在之后的文章中單做講解