這次帶給大家Ajax使用步驟詳解，Ajax使用的注意事項 有哪些，下面就是實戰案例，一起來看一下。
什麼是ajax?
ajax(非同步javascript xml) 能夠刷新局部網頁資料而不是重新載入整個網頁。
如何使用ajax?
#第一步， 建立xmlhttprequest對象，var xmlhttp =new XMLHttpRequest（); XMLHttpRequest物件用來和伺服器交換資料。
var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
} 登入後複製
第二步 ，使用xmlhttprequest物件的open（）和send（）方法發送資源請求給伺服器。
xmlhttp.open(method,url,async) method包含get 和post，url主要是檔案或資源的路徑，async參數為true(代表非同步)或false（代表同步）
xhttp.send();使用get方法傳送請求到伺服器。
xhttp.send(string);使用post方法傳送請求到伺服器。
post 發送請求什麼時候能夠使用呢？
(1)更新一個檔案或資料庫的時候。
(2)發送大量資料到伺服器，因為post請求 沒有字元限制。
(3)發送使用者輸入的加密資料。
get範例：
xhttp.open("GET", "ajax_info.txt", true);
xhttp.open("GET", "index.html", true);
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send(); 登入後複製
post範例
xhttp.open("POST", "demo_post.asp", true);
xhttp.send(); 登入後複製
post表單資料需要使用xmlhttprequest物件的setRequestHeader方法增加一個HTTP頭。
post表單範例
xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford"); 登入後複製
async=true 當伺服器準備回應時將執行onreadystatechange函數。
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "index.aspx", true);
xhttp.send(); 登入後複製
asyn=false 則將不需要寫onreadystatechange函數，直接在send後面寫上執行程式碼。
xhttp.open("GET", "index.aspx", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; 登入後複製
第三步 ，使用xmlhttprequest物件的responseText或responseXML屬性來獲得伺服器的回應。
使用responseText屬性得到伺服器回應的字串 數據，使用responseXML屬性得到伺服器回應的XML資料。
範例如下：
document.getElementById("demo").innerHTML = xhttp.responseText; 登入後複製
伺服器回應的XML資料需要使用XML物件進行轉換。
範例:
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt; 登入後複製
第四步 ，onreadystatechange函數，當發送請求到伺服器，我們想要伺服器回應執行一些功能就需要使用onreadystatechange函數，每次xmlhttprequest物件的readyState發生變更都會觸發onreadystatechange函數。
onreadystatechange屬性儲存一個當readyState發生改變時自動被呼叫的函數。
readyState屬性，XMLHttpRequest物件的狀態，改變從0到4，0代表請求未被初始化，1代表伺服器連線成功，2請求被伺服器接收，3處理請求，4請求完成並且回應準備。
在onreadystatechange事件中，伺服器回應準備的時候發生，當readyState==4和status==200的時候伺服器回應準備。
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
//函数作为参数调用
Let AJAX change this text.
Change Content
<script>
function loadDoc(url, cfunc) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
cfunc(xhttp);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
登入後複製
我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
處理WebService跨域問題方法詳解
#Ajax()與後台互動使用詳解
以上是Ajax使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
