ajax基礎
- 巴扎黑原創
- 2016-11-25 14:45:471249瀏覽
一。 ajax是異步的JavaScript和XML。是一種用於建立快速動態網頁的技術。透過在後台與伺服器進行少量資料交換，可以是網頁實現非同步更新，這樣就可以在不重新載入網頁的情況下，進行局部的載入。
二。物件的創建。 XMLHttpRequest是ajax的基礎。
1.建立語法：new XMLHttpRequest();
2.舊版的建立：new ActiveXObject("Microsoft.XMLHTTP").
三。伺服器請求。
open(method,url,async).
method:代表請求類型：GET或POST
url:檔案在伺服器的位置。
async：true（非同步請求）或false（同步請求）。
send(string).
把請求送到伺服器。
string:僅用於POST請求。代表要傳送的參數
四。伺服器的回應。
responseText():取得字串形式的回應資料。對於非XML請求，請使用responseText屬性。
responseXML():取得XML形式的對應資料。
五。 onreadystatechange事件。
用於執行基於回應的任務。
onreadystatechange：儲存函數，每當readyState屬性改變時，就會呼叫該函數.
readyState:代表XMLHttpRequest的狀態。從0到4發生變化。
0：請未初始化
2：請求已接收
4：請求已完成，且回應就緒。
status：200：‘OK’ 404：未找到頁。
範例：<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","文件的地址",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
範例：
rrreee