JS AJAX

---

XMLHttpRequest 對象

創建 XMLHttpRequest 對象

var xhttp;
if (window.XMLHttpRequest) {
	//所有現代瀏覽器都有內建的 XMLHttpRequest 對象
    xhttp = new XMLHttpRequest();
    } else {
    // 老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 對象
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

---

向服務器發送請求

使用 open() 和 send() 方法向服務器發送請求

GET 比 POST 更簡單更快，可用於大多數情況下
不過，請在以下情況始終使用 POST：

• 無法使用緩存文件（更新服務器上的文件或數據庫）
• 向服務器發送大量數據（POST 無大小限制）
• 發送用戶輸入（可包含未知字符），POST 比 GET 更強大更安全

向 URL 添加一個唯一的 ID：

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);

通過 GET 方法發送信息，向 URL 添加信息：

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);

如果需要像 HTML 表單那樣 POST 數據，使用 setRequestHeader() 來添加 HTTP 頭，然後在 send() 方法中規定希望發送的數據：

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");	//規定不變
xmlhttp.send("fname=Henry&lname=Ford");

同步

當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面即可：

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

---

服務器 響應

responseText 屬性

responseText 屬性返回字符串形式的響應

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 屬性

如果來自服務器的響應是 XML，而且需要作爲 XML 對象進行解析，請使用 responseXML 屬性

請求 cd_catalog.xml 文件，並解析響應：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

---

onreadystatechange 事件

在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務
當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

xmlhttp.onreadystatechange=function()
{
	//onreadystatechange 事件被觸發 4 次（0 - 4）, 分別是： 0-1、1-2、2-3、3-4，對應着 readyState 的每個變化
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

---