什么是Ajax（Asynchronous JavaScript and Xml）：
Ajax通過原生的XMLHttpRequest對象發出HTTP請求，得到服務器返回的數據后，再進行處理
什么是HTTP請求？
瀏覽器與服務器之間，采用HTTP協議通信。
- 用戶在瀏覽器地址欄鍵入一個網址，或者通過網頁表單向服務器提交內容，這時瀏覽器就會向服務器發出HTTP請求。
- 服務器端接收到請求，會進行計算，向瀏覽器返回一個包含事務結果的HTTP響應報文。
為什么要使用Ajax？
- 能夠向服務器請求額外的數據而無需加載整個頁面，會帶來好的用戶體驗
- Ajax是一種技術方案，可以和后端交換數據，不用刷新頁面。
優點：
- 更新數據而不需要刷新頁面：它能在不刷新整個頁面的前提下與服務器通信維護數據，按照需求請求數據，避免了發送大量的數據。
- 異步通信：與服務器使用異步的方式通信，不會打斷用戶的操作。
前后端負載平衡：可以將后端服務器的一些工作轉移給客戶端，利用客戶端限制的能力來處理，減輕了服務器的負擔。 - 數據與呈現分離：利于分工，降低前后耦合。
缺點：
- 瀏覽器歷史記錄的遺失：在使用Ajax對頁面進行改變后，由于沒有刷新頁面，沒有改變頁面的訪問歷史，當用戶想要回到上一個狀態時，無法使用瀏覽器提供的后退。
- Ajax的安全問題：Ajax的出現就像建立起了一直通信服務器的另一條通道，容易遭受一些攻擊。
如何和后端進行交互呢？
- form表單提交
通過submit按鈕被點擊，瀏覽器會默認將inpiut中的內容提交到form的action的地址上
<form action="/form.html" method="get">
//會提交到當前域名下的form.html
//缺點：頁面會跳轉，單項提交，沒有后臺反饋，影響用戶體驗。
- ajax
- websocket
Ajax包括以下幾個步驟：
- 創建Ajax對象
- 發出HTTP請求
- 接收服務器返回的數據
- 更新網頁數據
接下來通過代碼來看一下如何實現一個Ajax
- 實現一個最簡單功能的Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest() //創建一個對象
xhr.open('GET', '/hello.json', true)//設置參數，請求的類型，地址，是否使用異步
//hello.json 可以把他當作一個資源，而不是一個文件
//true為異步，false為同步獲取的方式
xhr.send()//發送請求
//內部數據到達會默認觸發load
xhr.addEventListener('load', function(){
var data = xhr.responseText;
console.log(data);
})//監聽
</script>
- 當請求不存在的文件時防止服務器掛掉，看看下面的方法
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', '/hello2.json', true)//請求不存在的文件，404 not found
xhr.send()//發送請求
//監聽通信狀態的變化
xhr.onreadystatechange = function(){
if(xhr.readyState ===4 && xhr.status ===200){
console.log(xhr.responseText);
}
}
xhr.addEvenListener('onreadystatechange' = function(){
console.log('readyState:', xhr.readyState);
//準備狀態，握手的過程，每次握手會發生改變，可以監聽到內部狀態的改變
})
xhr.addEventListener('load', function(){
//內部數據到達會默認觸發load
console.log(xhr.status);
if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
//304 請求緩存
//成功了
var data = xhr.responseText;
console.log(data);
}else{
console.log('error');
}
xhr.onerror = function(){ //內部出現錯誤
console.log('error');//例如斷網，數據還未到達服務器
}
xhr.ontimeout = function(){ //超時
}
}) //監聽
//status: 服務器的一個狀態，數據是否OK
//readystate: 交互流程是否完畢，0-4 五個狀態
//load: 狀態為4時會自動觸發load，交互完畢一定是4，所以可以不寫readystate
</script>
- POST方法
<script>
var xhr = new XMLHttpRequest();
xhr.open('POST', '/login', true);
//把需要發送的數據拼好放在send中
xhr.send('username=zuodong&password=123');
//也可以將這個函數寫進send中，拼接URL
/*makeUrl({
username: 'zuodong',
age: 23
})*/
//需要發送的數據，函數的方式
/*makeUrl({
username: 'zuodong',
age: 23
})*/
xhr.addEventListener('load', function(){
console.log(xhr.status);
if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){ //304 請求緩存
var data = xhr.responseText;
console.log(data);
}else{
console.log('error');
}
})
xhr.onerror = function(){ //內部出現錯誤
console.log('error');//例如斷網，數據還未到達服務器
}
makeUrl({
username: 'zuodong',
age: 23
})
function makeUrl(obj){
var arr = []
for(var key in obj){
arr.push( key + '=' + obj[key])
}
return arr.join('&')
}
//最終拼接成：username=zuodong&password=123
</script>
</body>
</html>
- 封裝一個Ajax
<script>
function ajax(opts){
var url = opts.url;
//假設用戶沒有設置type，則默認為GET
var type = opts.type || 'GET';
//數據類型默認為json
var dataType = opts.dataType || 'json';
//如果用戶沒有設置，則傳遞一個空函數
var onsuccess = opts.onsuccess || function(){};
var onerror = opts.onerror || function(){};
//如果沒有數據，默認傳遞一個空數據
var data = opts.data || {};
//將用戶傳遞的參數，如用戶名密碼，將這個對象進行一個處理，序列化
var dataStr = [];
for(var key in data){
dataStr.push(key + '=' + data[key]);
}
dataStr = dataStr.join('&');
if(type === 'GET'){
url +='?' + dataStr;
}
var xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.onload = function(){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//成功了
//如果用戶設置的需要返回的數據類型需要的是json格式
if(dataType === 'json'){
//把對象返回的數據解析成json格式
onsuccess(JSON.parse(xhr.responseText));
}else{
onsuccess(shr.responseText);
}
}else{
//如果是其他狀態，調用用戶的onerror
onerror();
}
}
xhr.onerror = onerror;
if(type === 'POST'){
xhr.send(dataStr);
}else{
xhr.send();
}
}
//約定好的需要傳遞的參數
ajax({
url: 'http://api.jirengu.com/weather.php',
data: {
city: '北京'
},
onsuccess: function(ret){
console.log(ret)
},
onerror: function(){
console.log('服務器異常');
}
})
</script>
XMLHttpRequest實例的屬性
readyState
只讀屬性，用一個正數對應的常量，表示XMLHttpRequest請求當前所處的狀態。
0：對用常量UNSET，表示XMLHttpRequest實例已經生成，但是open()方法還沒有調用。
1：對應常量OPENED，表示send()方法還沒有被調用，任然可以使用setRequestHeader()，設定HTTP請求頭信息。
2：對應常量HEADERS_RECEIVED，表示send()方法已經執行，并且頭信息和狀態碼已收到。
3：對應常量LOADING，表示正在接受服務器傳來的body部分的數據，如果responseType屬性是text或者空字符串，responseText就會包含已經收到的部分信息。
4：對應常量DONE，表示服務器數據已經完全接收，或者本次接收已經失敗了。
在通信過程中，每當發生狀態變化的時候，readyState屬性的值就會發生改變。這個值每一次變化，都會觸發readyStatyChange事件。
responseType
responseType屬性用來指定服務器返回數據類型。
""：字符串（默認值）
arraybuffer：ArrayBuffer對象
blob：Blob對象
document：Document對象
json：JSON對象
text：字符串
status
status屬性為只讀屬性，表示本次請求所得到的HTTP狀態碼，它是一個整數。一般來說，如果通信成功的話，這個狀態碼是200。
200：OK，訪問正常
301：Moved Permanently，永久移動
302：Move temporarily，暫時移動
304：Not Modified，未修改
307：Temporary Redirect，暫時重定向
401：Unauthorized，未授權
403：Forbidden，禁止訪問
404：Not Found，未發現指定網址
500：Internal Server Error，服務器發生錯誤
基本只有2xx和304的狀態碼，表示服務器返回是正常狀態。
