前端學(xué)了有一段時(shí)間了，在項(xiàng)目中我通常使用的都是jQuery封裝好的Ajax函數(shù)($.ajax、$.get、$.post)，使用非常的簡(jiǎn)單方便，但為了更清楚的了解Ajax，需要學(xué)習(xí)原生xhr對(duì)象。
 
先來(lái)明確什么是Ajax，Ajax：“Asynchronous JavaScript and XML”，翻譯過(guò)來(lái)就是異步JavaScript和XML。
Ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。意味這可以再不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
 
創(chuàng)建Ajax：
 
要?jiǎng)?chuàng)建Ajax，主角是XMLHttpRequest（下簡(jiǎn)稱XHR）對(duì)象。
第一步：創(chuàng)建XHR對(duì)象 
var xhr = new XMLHttpRequest();

 

 
第二步：向服務(wù)器發(fā)送請(qǐng)求
方法：open(method,url,async) 和 send(string)
open()方法傳入三參數(shù)
  • method：請(qǐng)求的類型（GET/POST）
  • url：文件在服務(wù)器上的位置
  • async：布爾值，true表示異步，false表示同步（可選，默認(rèn)為true）
send()方法將請(qǐng)求發(fā)送到服務(wù)器，有一個(gè)可選的參數(shù)string，僅用于POST類型的請(qǐng)求。
 
這里主要討論一下async參數(shù)，XMLHttpRequest對(duì)象如果要用于AJAX的話，其open()方法的async參數(shù)必須設(shè)置為true。那如果參數(shù)設(shè)置為false會(huì)有什么樣的后果呢？同步請(qǐng)求的后果是：JavaScript會(huì)等到服務(wù)器響應(yīng)就緒才繼續(xù)執(zhí)行。如果是比較大型的請(qǐng)求或者服務(wù)器處于繁忙狀態(tài)，應(yīng)用程序會(huì)掛起或停止。簡(jiǎn)單點(diǎn)說(shuō)就是頁(yè)面會(huì)一直卡到響應(yīng)內(nèi)容回來(lái)才繼續(xù)運(yùn)行。
 
在發(fā)送GET請(qǐng)求的時(shí)候，可能得到緩存的信息（IE中），導(dǎo)致我們發(fā)送的異步請(qǐng)求不能正確的返回我們想要的最新的數(shù)據(jù)。
 
方法一：在url中添加一個(gè)唯一的ID：（隨機(jī)數(shù)）