初學AJAX總結
AJAX全稱為Asynchronous JavaScript and XML。
也就是非同步的JavaScript和XML。
通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
在學習使用AJAX的過程中，不得不瞭解到一個物件：XMLHttpRequest。
所有的現代瀏覽器都支援XMLHttpRequest物件（IE5和IE6要用ActiveXObject）。
XMLHttpRequest用於在後臺與伺服器交換資料。
建立XMLHttpRequest物件的語法：
老版本的IE5和IE6建立ActiveXObject物件：variable = new XMLHttpRequest();
variable = new AvtiveXObject("Microsoft.XMLHTTP");如果支援就使用XMLHttpRequest物件，不支援就使用AvtiveXObject物件。
判斷程式碼如下：
建立了與伺服器進行資料交換的物件之後，我們來了解一下向伺服器傳送請求的兩個方法。var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執行程式碼 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
open(method,url,async)：此方法規定請求的型別，URL以及是否非同步處理請求。
method：請求的型別，GET或者POST；
url：檔案在伺服器上的位置；
async：true(非同步)，false(同步)。
send(string)：將請求傳送到伺服器。
string：僅用於POST請求，GET請求傳送字串在情況在url後面加上要傳的引數。
那麼我們什麼時候用GET請求，什麼時候用POST請求呢。
與POST相比，GET更簡單也更快，並且在大部分情況下都能用。
但是在如下幾種情況中，請使用POST請求：
1.無法使用快取檔案（更新伺服器上的檔案或資料庫）。
2.向伺服器傳送大量資料（POST沒有資料量限制）。
3.傳送包含未知字元的使用者輸入時，POST比GET更穩定也更可靠。
第一個方法第三個引數為true，使用非同步請求的好處是：
在等待伺服器響應時執行其他指令碼，當響應就緒後對響應進行處理。
當我們獲得伺服器的響應時，伺服器會給我們傳回響應的資料，資料有兩種形式，分別是Text形式和XML形式。
responseText：獲得字串形式的響應資料。
responseXML：獲得XML形式的響應資料。
responseText和responseXML都是XMLHttpRequest的屬性。
接下來讓我們以一個例子來講解如何使用AJAX，其中會用到一個onreadystatechange函式，我們在例子後面對它進行解析。
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執行程式碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//當readyState狀態發生改變時，執行的回撥函式
xmlhttp.onreadystatechange=function()
{
//當請求已完成且已經響應成功時執行
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//設定請求型別併發送
xmlhttp.open("GET","www.baidu.com",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改該文字內容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內容</button>
</body>
</html>在如上程式碼的 loadXMLDoc()函式中進行了三個操作：
1.建立XMLHttpRequest物件。
2.當伺服器響應就緒時執行函式。
3.把請求傳送到我們伺服器上面的檔案。
在瞭解XMLHttpRequest的onreadystatechange函式之前，我們先來了解一下伺服器響應時的一些狀態變化。
readyState：存有XMLHttpRequest的狀態，從0到4發生變化。
0：請求未初始化。
1：伺服器連線已建立。
2：請求已接收。
3：請求處理中。
4：請求已完成，且響應已就緒。
status：響應的狀態。
200：響應成功。
403：請求不允許。
404：沒有發現請求的URL。
500：伺服器產生內部錯誤。
在瞭解了伺服器狀態的改變之後，我們再來看看onreadystatechange函式。
onreadystatechange函式是一個回撥函式，每當readyState狀態發生一次改變，就會觸發一次onreadystatechange函式事件。
也就是說一次完整的請求readyState狀態從0變到4，onreadystatechange函式事件會被呼叫5次。
在我們的程式碼中，當 readyState==4 && status==200 也就是請求已完成且已經響應成功的時候，把請求返回的資料給輸出到 id="myDiv"的標籤中。
其實你可能會發現，在使用AJAX請求伺服器的時候，很多地方是通用的，不同的地方只是我們請求的URL地址和回撥函式執行的操作。
那麼我們可以把相同的部分進行封裝，這樣當我們存在多個AJAX請求的時候，就可以重複呼叫了。
示例程式碼：
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 程式碼
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 程式碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改文字內容</h2></div>
<button type="button" onclick="myFunction()">修改內容</button>
</body>
</html>