ajax是異步的JavaScript和XML。ajax是一種通過在后臺與服務器進行少量數據交換，在無需重新加載整個網頁的情況下，更新部分網頁的技術。
如何實現ajax請求
- 創建XMLHttpRequest實例。通過創建一個XMLHttpRequest對象得到一個實例，調用實例的
open()方法為這次ajax請求設定相應的HTTP方法，相應的地址以及是否異步。 - 發送HTTP請求。調用
send()方法發送請求，其可以接收一個參數，即要作為請求主題所發送的數據。 - 接收服務器響應數據。監聽readystatechange事件，通過該實例的readyState屬性來判斷請求狀態，其分為0，1，2，3，4四種狀態，4表示請求完成且響應就緒。這時可通過HTTP的status判斷請求結果，進行相應的操作。
下面是一個ajax請求改變文本內容的實例。
var xhr;
if(window.XMLHttpRequest) {
//ie7+,firefox,chrome,safari,opera
xhr = new XMLHttpRequest();
} else {
//ie5,ie6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function() {
if(xhr.readyState==4 && xhr.status==200) {
console.log(xhr.responseText);
}
}
xhr.open("GET", "xhr_info.txt", true);
xhr.send(null);
ajax創建XMLHttpRequest對象
XMLHttpRequest用于在后臺與服務器交換數據。
創建XMLHttpRequest對象：
var xhr;
if(window.XMLHttpRequest) {
//ie7+,firefox,chrome,safari,opera
xhr = new XMLHttpRequest();
}else {
//ie5,ie6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
ajax向服務器發送請求
使用XMLHttpRequest對象的open()和send()。
//請求類型，文件在服務器上的位置，是否異步
xhr.open("GET", "ajax_info.txt", ture);
xhr.send(null);
- GET還是POST
GET和POST是TCP/IP協議中兩種發送請求的方法，本質上都是TCP鏈接。他們運輸數據的渠道有些不一樣，GET通過URL傳遞參數，POST放在request body中傳遞參數。
與POST相比，GET更簡單也更快(只產生一個數據包)，在大部分情況下可以使用。
以下情況一般使用post
- 無法使用緩存文件
- 向服務器發送大量數據(POST沒有數據量限制)
- 發送包含未知字符的用戶輸入時
url--服務器上的文件
url相對于執行代碼的當前頁面，也可為絕對路徑。異步--true或false
如果異步，則有：
- 在等待服務器響應時執行其他腳本
- 當響應就緒后對響應進行處理
-
send()方法接收一個參數，即要作為請求主題發送的數據。如不需要發送數據則傳入null。
ajax服務器響應
如需獲取來自服務器的響應，可以使用XMLHttpRequest對象的responseText或responseXML屬性。
- responseText
如果來自服務器的響應并非XML，使用responseText將返回字符串響應數據。
document.getElementById("mydiv").innerHTML = xhr.responseText;
responseXML
如果來自服務器的響應是XML，而且需要XML對象進行解析，可使用responseXML獲得XML形式的響應數據。status
響應的HTTP狀態。服務器常用的狀態碼如下:
- 200 服務器響應正常
- 304 該資源在請求后沒有做任何修改（通常用于瀏覽器的緩存機制）
- 400 無法找到請求的資源
- 404 訪問的資源不存在
- 500 服務器內部錯誤
- readyState
表示請求/響應過程的當前活動階段。
可取的值如下：
- 0: 未初始化。尚未調用
open()方法。- 1: 啟動。已經調用
open()方法，但尚未調用send()方法。- 2: 發送。已經調用
send()方法，但尚未接收到響應。- 3: 接收。接收到部分響應數據。
- 4: 完成。接收到全部響應數據，而且已可以在客戶端使用了。
onreadystatechange事件
當請求發送到服務器時，我們需要執行一些基于響應的任務。
只要readyState屬性的值由一個值變成另一個值，都會觸發一次onreadystatechange事件，可以利用這個事件來檢測每次狀態變化后的readyState的值。
當readyState==4且status==200時，響應就已經就緒。
xhr.onreadystatechange = function() {
if(xhr.readyState==4) {
//服務器完成了請求或客戶端執行GET請求但文件未發生變化(后者通常用于瀏覽器的緩存機制)
if((xhr.status>=200 && xhr.status<=300) || xhr.status==304) {
console.log(xhr.responseText);
}else{
console.log("request error."+xhr.status);
}
}
}
使用回調函數
回調函數是一種以參數形式傳遞給另一個函數的函數。如果網頁存在多個ajax任務，可以為創建XMLHttpRequest對象編寫一個標準的函數，并為每個ajax任務調用該函數。該函數調用應該包含URL和發生onreadystatechange事件時執行的任務。
下面是一個調用回調函數與服務器進行交互的實例。
//ajax_func.js
var xhr;
function changeContent(url, cfunc) {
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = cfunc;
xhr.open("GET", url, true);
xhr.send(null);
}
function ajaxFunc() {
changeContent("ajax_info.txt", function() {
if(xhr.readyState==4) {
if(xhr.status==200 || xhr.status==304) {
document.getElementById("mydiv").innerHTML = xhr.responseText;
}else{
alert("request error." + xhr.status);
}
}
})
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>ajax回調函數</title>
</head>
<body>
<div id="mydiv" >
<h1>ajax回調函數</h1>
</div>
<button type="button" onclick="ajaxFunc()" ></button>
</body>
<script src="ajax_func.js" > </script>
</html>
