一、原生JS
說到Ajax，不得不先提一下HTTP（HTTP，HyperText Transfer Protocol)協(xié)議，中文名：超文本傳輸協(xié)議，是互聯(lián)網(wǎng)上應用最為廣泛的一種網(wǎng)絡協(xié)議。所有的WWW文件都必須遵守這個標準。設計HTTP最初的目的是為了提供一種發(fā)布和接收HTML頁面的方法。一次HTTP請求，包含了兩個重要的部分：上行request（請求）和下行response（響應）。
HTTP協(xié)議定義了很多與服務器交互的方法，最基本的有4種，分別是GET,POST,PUT,DELETE. 一個URL地址用于描述一個網(wǎng)絡上的資源，而HTTP中的GET, POST, PUT,DELETE就對應著對這個資源的查，改，增，刪4個操作。 我們最常見的（也是我們關心的）就是GET和POST了。GET一般用于獲取/查詢資源信息，而POST一般用于更新資源信息。
我們看看GET和POST的區(qū)別：
- GET提交的數(shù)據(jù)會放在URL之后，以?分割URL和傳輸數(shù)據(jù)，參數(shù)之間以&相連，如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的數(shù)據(jù)放在HTTP包的Body中.
- GET提交的數(shù)據(jù)大小有限制（因為瀏覽器對URL的長度有限制，本身并沒有限制），而POST方法提交的數(shù)據(jù)沒有限制。
-
GET方式提交數(shù)據(jù)，會帶來安全問題，比如一個登錄頁面，通過GET方式提交數(shù)據(jù)時，用戶名和密碼將出現(xiàn)在URL上，如果頁面可以被緩存或者其他人可以訪問這臺機器，就可以從歷史記錄獲得該用戶的賬號和密碼。
如果你使用chrome瀏覽器的話，可以再下面的頁面中看到這兩種請求攜帶的信息:
通常，瀏覽器產生HTTP請求，是由于用戶輸入了新的網(wǎng)址、或者點擊了超級鏈接，使頁面跳轉，這將導致頁面的全局刷新。而Ajax（Asynchronous Javascript And XML：異步JavaScript和XML）技術，可以使網(wǎng)頁悄悄地、偷偷地發(fā)起HTTP請求，請求回來的數(shù)據(jù)在頁面局部刷新呈遞。ajax的使用其實很簡單：
第一步，new出一個XMLHttpRequest對象：
這里變量名xhr可以隨便起，只是一般工程師都喜歡使用這個名字，就像var arr一樣，姑且當做一種約定俗成的東西就好，方便大家交流。第二步，處理服務器上面返回的響應：
其中，if語句小括號中的的語句：readyState表示返回XMLHTTP請求的當前狀態(tài)，具體數(shù)值示意如下：
0、未初始化
對象已建立，但是尚未初始化（尚未調用open方法）
1、初始化
已調用send()方法，正在發(fā)送請求
2 、發(fā)送數(shù)據(jù)
send方法調用完成，但是當前的狀態(tài)及http頭未知
3 、數(shù)據(jù)傳送中
已接收部分數(shù)據(jù)，因為響應及http頭不全，這時通過responseBody和responseText獲取部分數(shù)據(jù)會出現(xiàn)錯誤，
4、完成
數(shù)據(jù)接收完畢，此時可以通過通過responseBody和responseText獲取完整的回應數(shù)據(jù)
第三步，創(chuàng)建一個請求，第一個參數(shù)是請求的類型get或者post，第二個參數(shù)就是請求的路徑，第三個參數(shù)叫做是否使用異步機制：
如果是post請求，在發(fā)送請求前需要做以下處理：
第四步，發(fā)送請求：
總結一下：
1 //Ajax的一個固定的模板：
2 //第1步創(chuàng)建一個xhr對象，使用new關鍵來調用一個內置構造函數(shù)
3 var xhr = new XMLHttpRequest();
4 //第2步指定接收回來的內容，怎么處理。監(jiān)聽xhr對象的onreadystatechange事件，這個事件在xhr對象的“就緒狀態(tài)”改變的時候觸發(fā)。我們只關心就緒狀態(tài)為4的時候的事情。
5 xhr.onreadystatechange = function(){
6 if(xhr.readyState == 4){
7 //接收完文件要做的事情，讓h1的內容變?yōu)樽x取的東西
8 biaoti.innerHTML = xhr.responseText;
9 }
10 }
11
12 //第3步創(chuàng)建一個請求，第一個參數(shù)是請求的類型get或者post，第二個參數(shù)就是請求的路徑，第三個參數(shù)叫做是否使用異步機制
13 xhr.open("get","a.txt",true);
14 //第4步發(fā)送請求，圓括號里面是請求頭內容，get請求沒有報文頭寫null
15 xhr.send(null);
如果是post，對應如下修改：
1. xhr.open("post","do2.php",true);
2. //如果用post發(fā)送請求，那么必須寫一句話，模擬成form表單提交：
3. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4. xhr.send("xingming="+encodeURIComponent("楓")+"&age=18");
二、jQuery
1.1 $.get()方法
1 $.get("a.json" , {"id":1,"name":"考拉"} , function(text){
2 alert(typeof text);
3 });
jQuery默默的幫我們：
1） encodingURIComponent中文了；
2） 如果請求是404等錯誤狀態(tài)，不會執(zhí)行回調函數(shù)；
3） jQuery識別傳回來的東西像JSON，已經(jīng)幫我們轉JSON了，
jQuery中get方法還可以這樣使用兩個參數(shù)：
1 $.get("a.json?id=1&name=楓", function(text){
2 alert(typeof text);
3 });
1.2 $.post()方法
1 $.post("a.json",{"id":1,"name":"楓"},function(data){
2 alert(typeof data);
3 alert(data.content[2].id);
4 });
1.3 $.ajax()方法
配置信息非常多，寫在json里面進行配置：
1 $.ajax("b.json",{
2 //請求類型
3 "type" : "get",
4 //傳到服務器上的數(shù)據(jù)
5 "data" : {
6 "name":"xiaoming",
7 "age" :10
8 },
9 //成功做的事情
10 "success" : function(data){
11 alert(typeof data);
12 },
13 //錯誤做的事情
14 "error": function(XMLHttpRequest, textStatus, errorThrown){
15 alert(errorThrown);
16 }
17 });
