深入理解ajax資料請求的四大步驟

在前端工作中，常常會用到ajax，其實很多人只知道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請求完成並且回應準備。
status屬性，200表示成功回應，404表示頁面不存在。

在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(&quot;demo&quot;).innerHTML = xhttp.responseText;
}
</script>

以上所述是Ajax的使用四大步驟。

以上是深入理解ajax資料請求的四大步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！