首先要明確一個問題百框,AJAX是什么,為什么要用AJAX?
Q1:什么是AJAX
A1:AJAX==>Asynchronous JavaScript and XML==>異步的JavaScript和XML
是與服務(wù)器交換數(shù)據(jù)姑曙,并能夠在無需加載整個頁面的情況下更新部分頁面(即:異步局部更新);AJAX的基礎(chǔ)是XMLHttpRequest,用于在后臺與服務(wù)器交換數(shù)據(jù)
【AJAX包含的技術(shù):XHTML+CSS;使用DOM進(jìn)行動態(tài)顯示與交互佩研;使用XML和XSLT進(jìn)行數(shù)據(jù)交換以及相關(guān)操作;使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)查詢霞揉;使用JS將所有東西聯(lián)系起來】
Q2:為什么要使用AJAX旬薯?
A2:因為傳統(tǒng)的網(wǎng)頁想要更新內(nèi)容或者提交一個表單的時候需要重新加載整個頁面
【A:通過異步模式提升了用戶體驗;優(yōu)化了瀏覽器和服務(wù)器之間的傳輸零聚,減少了不必要的數(shù)據(jù)往返袍暴,減少了帶寬占用;AJAX引擎在客戶端運行隶症,承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作,從而減少了大量用戶下的服務(wù)器負(fù)載】
Q3:同步與異步岗宣?
然后蚂会,來看看一個AJAX的實現(xiàn)流程是怎樣的:
1)創(chuàng)建XMLHttpRequest對象
2)創(chuàng)建一個新的Http請求,并指定該HTTP請求的方法
【URL是服務(wù)器上文件的路徑耗式,可以是絕對路徑也可以是相對路徑】
【如果是POST方法就對send(string)進(jìn)行參數(shù)設(shè)置胁住;如果你需要向提交表單那樣POST數(shù)據(jù)趁猴,使用setRequestHeader(header,value);當(dāng)然如果是要用GET方法提交數(shù)據(jù),那么可以在URL中加入需要的參數(shù)】
【GET請求更簡單更快彪见,大部分情況下都可以使用儡司,但是在一下情況下使用POST:a:更新服務(wù)器上的文件或數(shù)據(jù)庫;b:向服務(wù)器發(fā)送大量數(shù)據(jù)余指,因為POST沒有數(shù)量限制捕犬;c:發(fā)送包含未知字符的用戶輸入時,POST比GET更穩(wěn)定更可靠】
【async的選擇酵镜,使用AJAX必須設(shè)置為true碉碉。async=true ==>異步,在等待服務(wù)器響應(yīng)時可以執(zhí)行其他的腳本淮韭,當(dāng)響應(yīng)后就對響應(yīng)進(jìn)行處理垢粮,在onreadystatechange中寫執(zhí)行函數(shù);async=false =>同步靠粪,JS會等到服務(wù)器響應(yīng)就緒以后才繼續(xù)執(zhí)行蜡吧,如果服務(wù)器忙或者緩慢,程序?qū)⒈粧炱鸹蛲V拐技藭r不需要寫onreadystatechange】
3)服務(wù)器響應(yīng)請求斩跌,并做出響應(yīng)的處理,在readystate==4&&status==200時
【responseText:得到字符串形式的數(shù)據(jù)捞慌,json串耀鸦,可以用JSON.parse()來轉(zhuǎn)換;responseXML:得到XML形式的響應(yīng)數(shù)據(jù)啸澡⌒涠】
【onraedystatechange會觸發(fā)5次,分別對應(yīng)0~4的狀態(tài)變化嗅虏,即:0=請求未初始化洛姑;1=服務(wù)器鏈接已建立(open方法成功調(diào)用后);2=請求已經(jīng)接收(表示服務(wù)器答應(yīng)了客戶端的請求)皮服;3=請求處理中楞艾;4=請求已經(jīng)完成,且響應(yīng)就緒】
4)請求的數(shù)據(jù)在頁面進(jìn)行局部刷新(顯示)
====
未完待續(xù)...........