ajax 是什么？有什么作用？
- AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML）劲藐，是一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)镶柱。它使用：
使用XHTML+CSS來(lái)標(biāo)準(zhǔn)化呈現(xiàn)摔癣；
使用XML和XSLT進(jìn)行數(shù)據(jù)交換及相關(guān)操作姑曙；
使用XMLHttpRequest對(duì)象與Web服務(wù)器進(jìn)行異步數(shù)據(jù)通信襟交；
使用Javascript操作Document Object Model進(jìn)行動(dòng)態(tài)顯示及交互；
使用JavaScript綁定和處理所有數(shù)據(jù)伤靠。 - 與傳統(tǒng)的web應(yīng)用比較：
傳統(tǒng)的Web應(yīng)用交互由用戶觸發(fā)一個(gè)HTTP請(qǐng)求到服務(wù)器,服務(wù)器對(duì)其進(jìn)行處理后再返回一個(gè)新的HTHL頁(yè)到客戶端, 每當(dāng)服務(wù)器處理客戶端提交的請(qǐng)求時(shí),客戶都只能空閑等待,并且哪怕只是一次很小的交互婿着、只需從服務(wù)器端得到很簡(jiǎn)單的一個(gè)數(shù)據(jù),都要返回一個(gè)完整的HTML頁(yè),而用戶每次都要浪費(fèi)時(shí)間和帶寬去重新讀取整個(gè)頁(yè)面。這個(gè)做法浪費(fèi)了許多帶寬醋界，由于每次應(yīng)用的交互都需要向服務(wù)器發(fā)送請(qǐng)求竟宋，應(yīng)用的響應(yīng)時(shí)間就依賴于服務(wù)器的響應(yīng)時(shí)間。這導(dǎo)致了用戶界面的響應(yīng)比本地應(yīng)用慢得多形纺。
與此不同丘侠，AJAX應(yīng)用可以僅向服務(wù)器發(fā)送并取回必需的數(shù)據(jù)，它使用SOAP或其它一些基于XML的Web Service接口逐样，并在客戶端采用JavaScript處理來(lái)自服務(wù)器的響應(yīng)蜗字。因?yàn)樵诜?wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少，結(jié)果我們就能看到響應(yīng)更快的應(yīng)用脂新。同時(shí)很多的處理工作可以在發(fā)出請(qǐng)求的客戶端機(jī)器上完成挪捕，所以Web服務(wù)器的處理時(shí)間也減少了。 - ajax工作原理：
Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層(AJAX引擎),使用戶操作與服務(wù)器響應(yīng)異步化争便。并不是所有的用戶請(qǐng)求都提交給服務(wù)器,像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來(lái)做, 只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請(qǐng)求级零。 - Ajax其核心有JavaScript、XMLHTTPRequest滞乙、DOM對(duì)象組成奏纪，通過(guò)XmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)斩启，然后用JavaScript來(lái)操作DOM而更新頁(yè)面序调。
ajax的優(yōu)點(diǎn)：
<1>.無(wú)刷新更新數(shù)據(jù)。
AJAX最大優(yōu)點(diǎn)就是能在不刷新整個(gè)頁(yè)面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)兔簇。這使得Web應(yīng)用程序更為迅捷地響應(yīng)用戶交互发绢，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒(méi)有改變的信息，減少用戶等待時(shí)間垄琐，帶來(lái)非常好的用戶體驗(yàn)边酒。
<2>.異步與服務(wù)器通信。
AJAX使用異步方式與服務(wù)器通信此虑，不需要打斷用戶的操作甚纲，具有更加迅速的響應(yīng)能力。優(yōu)化了Browser和Server之間的溝通朦前，減少不必要的數(shù)據(jù)傳輸介杆、時(shí)間及降低網(wǎng)絡(luò)上數(shù)據(jù)流量。
<3>.前端和后端負(fù)載平衡韭寸。
AJAX可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端春哨，利用客戶端閑置的能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)恩伺，節(jié)約空間和寬帶租用成本赴背。并且減輕服務(wù)器的負(fù)擔(dān)，AJAX的原則是“按需取數(shù)據(jù)”晶渠，可以最大程度的減少冗余請(qǐng)求和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)凰荚，提升站點(diǎn)性能。
<4>.基于標(biāo)準(zhǔn)被廣泛支持褒脯。
AJAX基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)便瑟，不需要下載瀏覽器插件或者小程序，但需要客戶允許JavaScript在瀏覽器上執(zhí)行番川。隨著Ajax的成熟到涂，一些簡(jiǎn)化Ajax使用方法的程序庫(kù)也相繼問(wèn)世。同樣颁督，也出現(xiàn)了另一種輔助程序設(shè)計(jì)的技術(shù)践啄，為那些不支持JavaScript的用戶提供替代功能。
<5>.界面與應(yīng)用分離沉御。
Ajax使WEB中的界面與應(yīng)用分離（也可以說(shuō)是數(shù)據(jù)與呈現(xiàn)分離）屿讽，有利于分工合作、減少非技術(shù)人員對(duì)頁(yè)面的修改造成的WEB應(yīng)用程序錯(cuò)誤吠裆、提高效率聂儒、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。 - ajax的缺點(diǎn)：
<1>.AJAX干掉了Back和History功能硫痰，即對(duì)瀏覽器機(jī)制的破壞衩婚。
<2>.AJAX的安全問(wèn)題。
<3>.對(duì)搜索引擎支持較弱效斑。
<4>.AJAX不能很好支持移動(dòng)設(shè)備非春。
<5>.客戶端過(guò)肥，太多客戶端代碼造成開發(fā)上的成本缓屠。
前后端開發(fā)聯(lián)調(diào)需要注意哪些事情奇昙？后端接口完成前如何 mock 數(shù)據(jù)？
前后端開發(fā)聯(lián)調(diào)需要一起確定接口敌完，前端向后端發(fā)送數(shù)據(jù)或請(qǐng)求的方式(get/post)储耐，前端需要向后端發(fā)送的數(shù)據(jù)，前端可以從后臺(tái)獲取到的數(shù)據(jù)滨溉，這些都是需要雙方協(xié)商確定的什湘。
后端接口完成前可以利用server-mock模擬服務(wù)器长赞，通過(guò)制造一些假數(shù)據(jù)來(lái)進(jìn)行交互調(diào)試，保證業(yè)務(wù)能跑通闽撤。
點(diǎn)擊按鈕得哆，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來(lái)之前防止重復(fù)點(diǎn)擊?
思路1：加入標(biāo)識(shí)符哟旗，在未接收到響應(yīng)數(shù)據(jù)的情況下贩据，通過(guò)標(biāo)識(shí)符的狀態(tài)來(lái)防止點(diǎn)擊，這種情況下點(diǎn)擊只會(huì)返回第一次點(diǎn)擊請(qǐng)求的數(shù)據(jù)闸餐。
var btn = document.querySelector('.query-area button')
var ct =document.getElementById('ct');
var page = 0;
var resultsArray = true;//狀態(tài)標(biāo)識(shí)
btn.addEventListener('click', function(){
if(!resultsArray){
return ;
}
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if((xhr.status >= 200 &&xhr.status < 300) ||xhr.status === 304){
var results = JSON.parse(xhr.responseText)
render(results);
page+=5;
}else {
console.log("獲取數(shù)據(jù)失敗");
}
resultsArray = true;
}
}
xhr.open('get', '/getInfo?page='+page+'&len=5', true)
xhr.send()
resultsArray = false;
})
實(shí)現(xiàn)加載更多的功能饱亮，效果范例323，后端在本地使用server-mock來(lái)模擬數(shù)據(jù)
<div class="detail-area">
<ul id='ct'>
</ul>
</div>
<div class="query-area">
<button id='btn'>加載更多</button>
</div>
window.onload=function (argument) {
var btn = document.querySelector('.query-area button')
var ct =document.getElementById('ct');
var page = 0;
var resultsArray = true;
btn.addEventListener('click', function(){
if(!resultsArray){
return ;
}
resultsArray = false;
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if((xhr.status >= 200 &&xhr.status < 300) ||xhr.status === 304){
var results = JSON.parse(xhr.responseText)
render(results);
page+=5;
resultsArray = true;
}else {
console.log("獲取數(shù)據(jù)失敗");
}
resultsArray = true;
}
}
xhr.open('get', '/getInfo?page='+page+'&len=5', true)
xhr.send()
resultsArray=false;
})
function render(results){
var frag = document.createDocumentFragment()
for(var i = 0; i < results.length; i++){
var node = document.createElement('li')
node.innerText = results[i]
frag.appendChild(node);
}
ct.appendChild(frag);
}
}
