深入淺出JavaScript中Ajax
Ajax不是一種新的程式語言，而是使用現有標準的新方法。AJAX可以在不重新載入整個頁面的情況下，與伺服器交換資料。這種非同步互動的方式，使使用者單擊後，不必重新整理頁面也能獲取新資料。 
XMLHttpRequest物件
Ajax的核心是XMLHttpRequest物件(XHR)。XHR為向伺服器傳送請求和解析伺服器響應提供了介面。能夠以非同步方式從伺服器獲取新資料。 在瀏覽器中建立物件(只支援IE7及更高的版本)：
var xhr = new XMLHttpRequest();
XHR的用法 首先要介紹的是open()方法。它接收3個引數：
- 要傳送的請求的型別(POST、GET等)
- 請求的URL
- 表示是否非同步傳送請求的布林值
呼叫open()示例：
xhr.open("get", "index.jsp", false); 針對index.jsp的GET請求。URL相對於執行程式碼的當前頁面；呼叫open()方法並不會真正傳送請求，只是啟動一個請求以備傳送。
呼叫send()傳送請求：
xhr.send(null); send()接收一個引數，即要作為請求主體傳送的資料。如果不需要通過請求主體傳送資料，則必須傳入null。 相應資料會填充到XHR物件的相關屬性：
- responseText:作為響應主體被返回的文字
- responseXML:作為響應的內容型別是“text/xml”或“application/xml”
- status:響應的HTTP狀態
- statusText:HTTP狀態的說明
在接收響應後，首先檢查status屬性，確定響應已經返回，一般200作為成功的標誌。狀態碼304表示資源沒有修改，可以直接使用瀏覽器中快取的版本。 為了接收到合適的響應，應該以如下方式檢測兩種狀態碼：
xhr.open("get", "index.jsp", false); xhr.send(null); if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); }//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860
通過檢測readyState屬性，可以確定請求/響應過程的當前活動階段。
- 0：未初始化。未呼叫open()方法
- 1：啟動。已經呼叫open()方法，未呼叫send()方法
- 2：傳送。已經呼叫send()方法，未接收到響應
- 3：接收。已經接收到部分資料
- 4：完成。已經接收到全部資料，可以在客戶端使用 readyState屬性的值發生變化時，都會觸發一次readystatechange事件。在呼叫open()之前指定onreadystatechange事件處理程式才能確保瀏覽器相容性。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("請求成功：" + xhr.status);
}//歡迎加入前端全棧開發交流圈一起學習交流：864305860
}//面向1-3年前端人員
};//幫助突破技術瓶頸，提升思維能力
xhr.open("get", "index.jsp", true);
xhr.send(null);
在接收響應之前，可以取消非同步請求： xhr.abort(); HTTP頭部資訊 XHR物件提供了操作請求頭部和響應頭部資訊的方法。 預設情況下，在傳送XHR請求的同時，還會發送下列頭部資訊。
- Accept:瀏覽器能夠處理的內容型別
- Accept-Charset:瀏覽器能夠顯示的字符集
- Accept-Encoding:瀏覽器能夠處理的壓縮編碼
- Accept-Language:瀏覽器當前設定的語言
- Connection:瀏覽器與伺服器之間連線的型別
- Cookie:當前頁面設定的任何Cookie
- Host:發出請求的頁面所在的域
- Referer:發出請求的頁面的URL
- User-Aent:瀏覽器的使用者代理字串 使用setRequestHeader()可以設定自定義的請求頭部資訊。必須在呼叫open()方法之後，且在呼叫send()之前，呼叫 setRequestHeader()：
xhr.open("get", "index.jsp", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);
呼叫getResponseHeader()並傳入欄位名稱，可以取得相應的響應頭部資訊。getAllResponseHeader()取得包含所有頭部資訊的長字串。
var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeader();
GET請求
GET用於向伺服器查詢某些資訊。可以將查詢字串引數追加到URL的末尾，查詢字串中的每個引數的名稱和值都必須使用encodeURIComponent()編碼：
xhr.open("get", "login.jsp?name1=value1&name2=value2", false);
addURLParam()接收三個引數：要新增引數的URL、引數的名稱和引數的值。
var url = "login.jsp";
// 新增引數
url = addURLParam(url, "username", "xxyh");
url = addURLParam(url, "password", "xxyh123");
// 初始化請求
xhr.open("get", url, false);
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860
POST請求 POST請求用於向伺服器傳送應該被儲存的資料。POST請求的主體可以包含非常多的資料，而且格式不限。 初始化請求：
xhr.open("post", "login.jsp", true);
首先將Content-Type頭部資訊設定為application/x-www-form-urlencoded, 然後建立一個字串格式。 如果需要將頁面中的表單資料進行序列化， 然後再通過XHR傳送到伺服器， 可以使用serialize()函式來建立這個字串：
xhr.open("get", "login.jsp", false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));
結語
感謝您的觀看，如有不足之處，歡迎批評指正。