以下文章為根據慕課網：Ajax全接觸整理而得的文字筆記版，以便隨時翻閱學習。但是本文未引用視頻課程中的示例，使用示例將在今后的文章中單獨寫出。且最后一章《處理跨域方式》不做整理，如需要，請上慕課網官網進行學習。
一. 課程介紹
1. 什么是 Ajax？
- 異步的 JavaScript 和 XML ( Asynchronous JavaScript 和 XML )。
- Ajax 不是某種編程語言，而是一種在無需重新加載整個網頁的情況下能夠更新部分網頁的技術。通過在后臺跟服務器進行少量的數據交換，網頁就可以實現異部局部更新。
- Ajax 改變了 WEB 開發的格局。
2. 預備知識
基本的 HTML、CSS、JS知識儲備。
二. Ajax 概念介紹
1. 同步和異步
1）概念
2）異步的產生
異步的產生在技術層面是由于新對象的出現XMLHttpRequest。這個對象的出現可以在不加載整個頁面的情況下，使后臺和服務器進行數據的交換。
3）異步的使用
- 運用 HTML 和 CSS 來實現頁面，表達信息
- 運用 XMLHttpRequest 和 WEB 服務器進行數據的異步交換
- 運用 JavaScript 操作 DOM，實現動態局部更新
2. XMLHttpRequest ( XHR ) 對象創建
實例化一個 XHR 對象
var request = new XMLHttpRequest();
現在的瀏覽器基本都支持 XHR 對象，但是 ie6以下不支持，所以我們可以輸入如下代碼進行兼容
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6,IE5
}
當我們 new 了一個 XHR 對象，我們就可以進行數據請求的操作了。
3. HTTP 請求
1）HTTP 概念
http 是計算機通過網絡進行通信的規則，使得瀏覽器可以從服務器請求信息和服務。
http 是一種無狀態的協議，即不建立持久的連接。客戶端向服務器提出請求，服務器作出相應，然后鏈接就被關閉了，這個處理過程是沒有記憶的。
-
一個完整的 HTTP請求 過程，通常有下面7個步驟：
- 建立 TCP 連接
- WEB 瀏覽器想 WEB 服務器發送請求命令
- WEB 瀏覽器發送請求頭信息
- WEB 服務器應答
- WEB 服務器發送應答頭信息
- WEB 服務器向瀏覽器發送數據
- WEB 服務器關閉 TCP 鏈接
-
一個 HTTP 請求一般由四部分組成：
- HTTP 請求的方法或動作，比如是 GET 還是 POST 請求
- 正在請求的 URL，總得知道請求的地址是什么吧
- 請求頭，包含一些客戶端環境信息，身份驗證等信息
- 請求體，也就是請求正文，請求正文中可以包含客戶提交的查詢字符串信息，表單信息等等
2）GET 與 POST
- GET：一般用于信息獲取，使用URL 傳遞參數，對所發送信息的數量也有限制，一般在2000個字符
- POST：一般用于修改服務器上的資源，對所發送的信息的數量無限制，是不可見的
3）HTTP 響應
一個 HTTP 響應一般由三個部分組成：
- 一個數字和文字組成的狀態碼
- 響應頭，響應頭也和請求頭一樣包含許多有用的信息，例如服務器類型、日期時間、內容類型和長度等
-
響應體，也就是響應正文
HTTP 響應樣例
4）HTTP 響應的狀態碼
HTTP 的狀態碼由三位數字構成，其中首位數字定義了狀態碼的類型：
4. XMLHttpRequest 發送請求
之前我們知道了如何創建一個 XHR 對象，現在我們來看看如何用這個 XHR 對象發送請求。
XHR 發送請求有兩個常用的方法需要介紹：
- open(method,url,async)
- method：get 或者 post
- url：請求地址（相對或絕對）
- async：同步請求或者默認異步請求（true）
- send(string)：把請求發送到服務器
-
send 的時候參數實際上是拼接在 url 中的，所以可以不填寫
示例
-
5. XMLHttpRequest 取得響應
以下是獲取服務器響應的一些方式語句：
- responseText：獲得字符串形式的相應數據
- responseXML：獲得 XML 形式的相應數據
- status 和 statusText：以數字和文本的形式返回 HTTP 狀態碼
- getAllResponseHeader()：獲取所有的響應報頭
- getResponseHeader()：查詢響應中的某個字段的值
以上的方式只是獲取響應值，下面的屬性是在響應成功的時候得到通知：
- readyState 屬性，我們在響應過程中監聽 readyState 值得變化，獲取到響應所進行到的步驟
- 0：請求未初始化，open 還沒有調用
- 1：服務器連接已建立，open 已經調用了
- 2：請求已接收，也就是接收到信息頭了
- 3：請求處理中，也就是接收到響應主體了
- 4：請求已完成，且相應已就緒，也就是響應完成了（我們所注意的屬性值）
監聽方式：
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)
在這里由于配置環境等的不同，本文中并未直接采用視頻中的例子進行說明，而是使用了自己的例子進行參考：
四. JSON 格式
1. JSON 基本概念
1）JSON 基本概念
- JSON：JavaScript 對象表示法( JavaScript Object Notation )
- JSON 是儲存和交換文本信息的語法，類似 XML。它采用鍵值對的方式來組織，已與人們閱讀和編寫，同時也易于機器解析和生成
- JSON 是獨立于語言的，也就是說不管是什么語言，都可以解析 JSON，只要按照 JSON 的格式來就行
2）JSON 與 XML 比較
- JSON 的長度與 XML 比較起來很短小
- JSON 的讀寫速度更快
- JSON 可以使用 JavaScript 內建的方法直接進行解析，轉換成 JavaScript 對象，非常方便
3）JSON 語法規則
-
JSON 數據的書寫格式是：名稱 / 值對
名稱/值對組合中的名稱寫在前面（在雙引號中），值對寫在后面（同樣在雙引號中），中間用冒號隔開，比如：
"name":"郭靜"
-
JSON 的值可以是下面這些類型
- 數字（整數或者浮點數），比如123，1.23
- 字符串（在雙引號中）
- 邏輯值（true 或 false）
- 數組（在方括號中）
- 對象（在花括號中）
- null
{
"staff":[
{"name":"洪七", "age":70},
{"name":"郭靜", "age":35},
{"name":"黃蓉", "age":30}
]
}
2. JSON 解析、格式化和校驗工具
1）JSON 解析
- eval方法 和 JSON.parse方法
- 在代碼中使用 eval 是很危險的！特別是用它執行第三方的 JSON 數據（其中可能包含惡意代碼）時，盡可能使用 JSON.parse() 方法解析字符串本身，該方法還可以捕捉 JSON 中的語法錯誤。
注：在控制臺，eval 不會判斷字符串是否合法，而且各種方法會直接執行，這是非常危險，而且應該避免發生的。所以盡量不使用 eval 方法。在實際使用中，盡可能地使用 JSON.parse()。
2）在線 JSON 校驗工具
輸入 JSON 代碼即可返回代碼中的錯誤。
具體使用略，詳見視頻。
五. jQuery 中的 AJAX
用 jQuery 實現 Ajax
通常我們不會直接用 JS 實現 Ajax 效果，而是采用第三方庫，比如 jQuery。JQuery 已經封裝了 Ajax 的方法。
jQuery.ajax([settings])
- type：類型，“POST”或者“GET”，默認為“GET”
- url：發送請求的地址
- data：是一個對象，連同請求發送到服務器的數據
- dataType：預期服務器返回的類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，一般我們采用 JSON 格式，可以設置為“json”
- success：是一個方法，請求成功后的回調函數。傳入返回后的數據，以及包含成功代碼的字符串
- error：是一個方法，請求失敗時調用此函數。傳入 XMLHttpRequest 對象
