技術標籤：Ajax

什麼是Ajax

即 Asynchronous Javascript And XML，是一種通過在後臺與伺服器進行少量的資料交換，可以使頁面實現非同步更新，這就意味著可以在不重新載入整個網頁的情況下，對頁面的某一部分進行資料的更新。AJAX 不是一門的新的語言，而是對現有持術的綜合利用。基於web標籤的xhtml+css。
本質：是在HTTP協議的基礎上以非同步的方式通過XMLHttpRequest物件與伺服器進行通訊。
作用：可以在頁面不重新整理的情況下，請求伺服器，區域性更新頁面的資料；可以使用dom進行動態的顯示和互動；使用XML和XSLT(是一種用於將XML文件轉換任意文字的描述語言)進行資料的交換和操作；使用XMLHttpRequest進行非同步的資料查詢和檢索等操作

請求型別：

非同步：指某段程式執行時不會阻塞其他程式的執行，其表現形式為程式的執行順序不依賴程式本身的書寫順序，相反則為同步。其優勢在於不阻塞程式的執行，從而提升程式整體的執行效率。同時可以做多件事情，效率更高。
同步：同一時刻只能做一件事情，上一步完成之後才能開始下一步。

Ajax原生的請求步驟

//1、建立一個非同步物件
var xhr = new XMLHttpRequest();
//2、設定請求行 注意：如果請求方式為get，則資料需要拼接在請求地址的後邊
xhr.open("請求方式","請求地址"
 
);
//3設定請求頭  注意：如果請求方式為get時，不設定請求頭；如果時post時，必須設定請求頭
xhr.setRequestHeader("Content-Type","application/x-www-formurlencoded")；
// xhr.setRequestHeader("Content-Type","multiple/form-data");
//(上傳檔案如果是multiple，用第二個請求頭)
// 4、設定請求體 注意：請求方式如果時get 則請求體為空，如果時post時，此時資料要通過請求體攢送
xhr.
 
send();//post方式的傳送內容，get省略
//5、監聽響應狀態
xhr.onreadystatechange = function () {
  if(xhr.status == 200 && xhr.readyState == 4){
}

注意：
readystate屬性有五個狀態：

• xhr.readyState = 0時，（未初始化）還沒有呼叫send()方法
• xhr.readyState = 1時，（載入）已呼叫send()方法，正在傳送請求
• xhr.readyState = 2時，（載入完成）send()方法執行完成，已經接收到全部響應內容
• xhr.readyState = 3時，（互動）正在解析響應內容
• xhr.readyState = 4時，（完成）響應內容解析完成，可以在客戶端呼叫了響應碼和獲取
  響應資訊的方法：
• xhr.status表示響應碼，如200
• xhr.statusText表示響應資訊，如OK
• xhr.getAllResponseHeaders() 獲取全部響應頭資訊
• xhr.getResponseHeader(‘key’) 獲取指定頭資訊
• xhr.responseText、xhr.responseXML都表示響應主體

藉助上邊的例子順便總結了post和get請求方式的差異

• GET沒有請求主體，使用xhr.send(null)
• GET可以通過在請求URL上新增請求引數
  -POST可以通過xhr.send(‘name=itcast&age=10’)
• POST需要設定請求頭：xhr.setRequestHeader(“Content-Type”,“application/x-www-formurlencoded”)
• GET大小限制約4K，POST則沒有限制
• POST請求相對於

Ajax在jquery中的使用

• $.ajax({}) 可配置方式發起Ajax請求
• $.get() 以GET方式發起Ajax請求
• $.post() 以POST方式發起Ajax請求
• $(‘form’).serialize()序列化表單（即格式化key=val&key=val）