1 Ajax是什麼
Ajax全名是Asynchronous JavaScript and XML （異步JavaScript和XML）。
其實就是在用戶感受不到的情況下偷偷地、悄悄地先服務器發起HTTP請求(get\post\put\delete等等)，然後將請求回來的數據在頁面局部刷新呈遞。
ps: 實際上現在沒有一個公司使用XML當做後臺、前臺的中介文件，都是使用JSON。所以Ajax現在應該改名爲Ajaj（Asynchronous JavaScript and JSON），但是大家還是約定俗成起名爲Ajax。
2 Ajax原生js實現
Ajax完全依賴XMLHttpRequest對象，字面意思就是“XML文件的HTTP請求”對象。
先上代碼。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
// 接收到服務器回覆的數據 string類型 todo
alert(xhr.responseText);
}
}
}
xhr.open("post","./image/image.png",true);
xhr.send("id=" + id + "&name=" + encodingURIComponent(name));
2.1 XMLHttpRequest
Ajax的底層技術就是XMLHttpRequest，所以第一步就是先new一個XMLHttpRequest對象出來。
2.2 open()方法
open()方法打開一個請求，open只是打開並沒有真正的發送請求，真正發送要用send()方法。
xhr.open(要發送的請求類型, url路徑, 是否使用異步);
// 第一個參數，要麼是"get" 、"post"等等
// 第二個參數，就是處理這個請求的url路徑
// 第三個參數，表示是否是異步處理，必須寫true
2.3 send()方法
send方法就是發送請求，裏面的參數表示http requset報頭裏面攜帶內容。
get請求報頭裏面沒有內容，post請求有內容。
2.3.1 get()請求
get請求：
xhr.send(null);
2.3.2 post()請求
post請求，寫的也是類似於get請求的參數字符串：
xhr.send("name=kaola&age=18");
如果參數帶有中文字符，需要編碼一下，編碼的方法是：
encodeURIComponent("要編碼的字符串")
而且post必須setRequestHeader一下。
所以完整的post請求如下：
//如果用post發送請求，那麼必須寫一句話，模擬成form表單提交：
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name="+encodeURIComponent("湯姆貓兒")+"&age=35");
2.4 readystatechange事件
2.4.1 readyState屬性
xhr對象有readyState屬性，readyState屬性一旦發生改變，就能夠觸發onreadystatechange事件。
xhr對象的readyState屬性的值有0、1、2、3、4，一共五個值：
| Value | State | 描述 |
|---|---|---|
| 0 | UNSENT | open()還沒有被調用 |
| 1 | OPENED | 調用send() |
| 2 | HEARERS_RECEIVED | 頭部已經被服務器接收 |
| 3 | LOADING | 開始接收服務器的返回的東西，還沒有接收完全 |
| 4 | DONE | 完成 |
我們只關心DONE這個狀態。
xhr.responseText就表示接收回來的文本。是一個string類型。
2.4.2 狀態碼
每一次http請求，會根據請求是否成功，有不同的狀態碼。
| 狀態碼 | 描述 |
|---|---|
| 200 | 表示請求成功，ok |
| 304 | not modified ，文件沒有改變。瀏覽器會比對你請求的文件，和已經在緩存文件夾中的文件，如果相同，不再請求。這就是爲啥第二次訪問網站，速度更快的原因。 |
| 404 | not found ，沒有找到文件。有時輸入網址彈出404頁面，就是收到404狀態碼後跳轉到404頁面 |
| 403 | 用戶沒有權限，禁止訪問 |
3 jQuery實現
jQuery中封裝了Ajax。vue中的axios也封裝了Ajax。兩者的使用幾乎一模一樣。這裏看看如何使用jQuery發送Ajax請求。具體查看jQuery手冊ajax部分。
3.1 get()方法
$.get("a.json" , {"id":1,"name":"湯姆貓兒"} , function(text){
alert(typeof text);
});
或
$.get("a.json?id=1&name=傑瑞鼠" , function(text){
alert(typeof text);
});
3.2 post()方法
$.post("a.json",{"id":1,"name":"窮查理寶典"},function(data){
alert(typeof data);
alert(data.content[2].id);
});
3.3 $.ajax()方法
$.ajax("b.json",{
//請求類型
"type" : "get",
//傳到服務器上的數據
"data" : {
"name":"xiaoming",
"age" :10
},
//成功做的事情
"success" : function(data){
alert(typeof data);
},
//錯誤做的事情
"error" : function(XMLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
}
});
3.4 serialize()方法
用來表單序列化：
var str = $("#login").serialize();
注意能夠調用srialize的元素，一般來說一定是form標籤。