這次帶給大家詳細解析JS中Ajax的使用技巧，詳細解析JS中使用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);
}登入後複製
透過偵測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);
}
}
};
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);登入後複製
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));登入後複製
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
jQuery+AJAX实现调用后台步骤详解
JQuery调用Ajax加载图片
以上是詳細解析JS中Ajax的使用技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
