AJAX簡單介紹

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）
AJAX是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)瞳腌；
從后臺(tái)提取數(shù)據(jù)利用創(chuàng)建動(dòng)態(tài)節(jié)點(diǎn)怀伦，把后臺(tái)數(shù)據(jù)展示在頁面中搬男。

XMLHttpRequest簡單介紹

Ajax技術(shù)的核心是XMLHttpRequest對(duì)象（簡稱XHR）奕枢，XMLHttpRequest是一個(gè)JavaScript對(duì)象居砖，它提供了一種簡單的方法來檢索URL中的數(shù)據(jù)雷酪∥馀浚可以通過使用XHR對(duì)象獲取到服務(wù)器的數(shù)據(jù)揩慕，然后再通過DOM將數(shù)據(jù)插入到頁面中呈現(xiàn)亭畜。雖然名字中包含XML，但Ajax通訊與數(shù)據(jù)格式無關(guān)迎卤，所以我們的數(shù)據(jù)格式可以是XML或JSON等格式拴鸵。

XMLHttpRequest對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)，具體作用如下：

• 在不重新加載頁面的情況下更新網(wǎng)頁
• 在頁面已加載后從服務(wù)器請(qǐng)求數(shù)據(jù)
• 在頁面已加載后從服務(wù)器接收數(shù)據(jù)
• 在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)

創(chuàng)建 XMLHttpRequest 對(duì)象

所有現(xiàn)代瀏覽器（IE7+蜗搔、Firefox劲藐、Chrome、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對(duì)象樟凄。
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveXObject聘芜。

代碼示例:

// Creates a XMLHttpRequest object.
var xhr = new XMLHttpRequest();

兼容瀏覽器代碼示例:

 var xhr;
//根據(jù)標(biāo)準(zhǔn)的瀏覽器是否支持標(biāo)準(zhǔn)的創(chuàng)建方法來創(chuàng)建對(duì)象
//先判斷瀏覽器是否具備XMLHttpRequest()方法；
if(window.XMLHttpRequest){
    //有缝龄，表示當(dāng)前是標(biāo)準(zhǔn)瀏覽器汰现；
     xhr = new XMLHttpRequest(); // 支持IE8挂谍，9；w3c標(biāo)準(zhǔn)瞎饲。
}else{
    //無口叙，表示不是標(biāo)準(zhǔn)瀏覽器, 是 IE 5,6,7;
    //在IE5,6,7這些老版的瀏覽器中，Ajax組件是放在ActiveXObject組件庫中的嗅战，需要傳入Micrsoft.XMLHTTP 這個(gè)參數(shù)才能返回出這個(gè)組件妄田。
    xhr = new ActiveXObject('Micrsoft.XMLHTTP');
}

Ajax 向服務(wù)器發(fā)送請(qǐng)求

創(chuàng)建XHR對(duì)象后，將請(qǐng)求發(fā)送到服務(wù)器,使用 XMLHttpRequest 對(duì)象的 open() 和 send()方法:

代碼示例:

//GET請(qǐng)求
    //如果有參數(shù)驮捍，則把請(qǐng)求參數(shù)直接拼接在url之后
    xhr.open('GET','JSON.html',true);   
//發(fā)送請(qǐng)求：
    //GET 請(qǐng)求send()參數(shù)可以不寫,最好在send(null)參數(shù)中寫上null
    xhr.send();

open(method,url,async)方法:

• method：請(qǐng)求的類型疟呐；GET 或 POST
• url：文件在服務(wù)器上的位置
• async：true（異步）或 false（同步）

send(string)方法:

• 將請(qǐng)求發(fā)送到服務(wù)器；string：僅用于 POST 請(qǐng)求

GET 請(qǐng)求

一個(gè)簡單的 GET 請(qǐng)求 (可能得到的是緩存的結(jié)果)：

xhr.open("GET","/try/ajax/demo_get.php",true);
xhr.send();

為了避免這種情況厌漂，請(qǐng)向 URL 添加一個(gè)唯一的 ID：

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

希望通過 GET 方法發(fā)送信息萨醒，請(qǐng)向 URL 添加信息：

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

POST 請(qǐng)求

一個(gè)簡單 POST 請(qǐng)求：

xhr..open("POST","/try/ajax/demo_post.php",true);
xhr.send();

如果需要像 HTML 表單那樣 POST 數(shù)據(jù)，就使用 setRequestHeader() 來添加 HTTP 頭苇倡。然后在 send() 方法中規(guī)定所希望發(fā)送的數(shù)據(jù)：

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

setRequestHeader(header,value)方法:

• 向請(qǐng)求添加 HTTP 頭富纸；header: 規(guī)定頭的名稱
• value: 規(guī)定頭的值

GET 還是 POST？

與 POST 相比旨椒，GET 更簡單也更快晓褪，并且在大部分情況下都能用。
然而综慎，在以下情況中涣仿，請(qǐng)使用 POST 請(qǐng)求：

• 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
• 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
• 發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

url - 服務(wù)器上的文件

open() 方法的 url 參數(shù)是服務(wù)器上文件的地址：

xhr.open("GET","ajax_test.html",true);

該文件可以是任何類型的文件示惊，比如 .txt 和 .xml好港，或者服務(wù)器腳本文件，比如 .asp 和 .php （在傳回響應(yīng)之前米罚，能夠在服務(wù)器上執(zhí)行任務(wù)）钧汹。

Async=true

當(dāng)使用 async=true 時(shí)，規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時(shí)執(zhí)行的函數(shù)：

xhr.open("GET","/try/ajax/ajax_info.txt",true);
xhr.send();
xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200)
    {
        document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
}

Async=false

不推薦使用 async=false录择，因?yàn)镴avaScript 會(huì)等到服務(wù)器響應(yīng)就緒才繼續(xù)執(zhí)行拔莱。如果服務(wù)器繁忙或緩慢，應(yīng)用程序會(huì)掛起或停止隘竭。當(dāng)使用 async=false 時(shí)塘秦，不要編寫 onreadystatechange 函數(shù) 把代碼放到 send() 語句后面即可：：

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

Ajax 服務(wù)器響應(yīng)

獲得來自服務(wù)器的響應(yīng)，使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性动看。

responseText 屬性: 獲得字符串形式的響應(yīng)數(shù)據(jù)尊剔。

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

responseXML 屬性: 獲得 XML 形式的響應(yīng)數(shù)據(jù)。且需要作為 XML 對(duì)象進(jìn)行解析菱皆，使用 responseXML 屬性：

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;

AJAX - onreadystatechange 事件

當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)须误，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)笔咽。
每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件霹期。
readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。
下面是 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性：

• onreadystatechange : 存儲(chǔ)函數(shù)（或函數(shù)名）拯田，每當(dāng) readyState 屬性改變時(shí)历造，就會(huì)調(diào)用該函數(shù)。

• readyState : 存有 XMLHttpRequest 的狀態(tài)船庇。從 0 到 4 發(fā)生變化吭产。
  0: 請(qǐng)求未初始化
  1: 服務(wù)器連接已建立
  2: 請(qǐng)求已接收
  3: 請(qǐng)求處理中
  4: 請(qǐng)求已完成，且響應(yīng)已就緒
• status
  200: "OK"
  404: 未找到頁面

在 onreadystatechange 事件中鸭轮，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)臣淤。
當(dāng) readyState 等于 4 且狀態(tài)為 200 時(shí)，表示響應(yīng)已就緒：

xhr.onreadystatechange=function(){
  if (xhr.readyState==4 && xhr.status==200){
    document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
}

使用回調(diào)函數(shù):
回調(diào)函數(shù)是一種以參數(shù)形式傳遞給另一個(gè)函數(shù)的函數(shù)窃爷。
如果您的網(wǎng)站上存在多個(gè) AJAX 任務(wù)邑蒋，那么您應(yīng)該為創(chuàng)建 XMLHttpRequest 對(duì)象編寫一個(gè)標(biāo)準(zhǔn)的函數(shù)，并為每個(gè) AJAX 任務(wù)調(diào)用該函數(shù)按厘。
該函數(shù)調(diào)用應(yīng)該包含 URL 以及發(fā)生 onreadystatechange 事件時(shí)執(zhí)行的任務(wù)（每次調(diào)用可能不盡相同）：

function myFunction(){
    loadXMLDoc("/try/ajax/ajax_info.txt",function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}