大家好丁频，我是修真院一枚程序員抓督，今天給大家介紹一下ajax
1.背景介紹
? ? ? ? ? ? ? ? 做任務(wù)7的時(shí)候燃少，遇到了獲取驗(yàn)證碼或者發(fā)送郵件的問(wèn)題。點(diǎn)擊按鈕铃在，不想刷新頁(yè)面和提交表單阵具。 用戶在注冊(cè)的時(shí)候也想在不提交表單的情況下獲
什么是Ajax？? ? ? ? ??
? ? ? ? ? ? ? ? AJAX即異步的JavaScript與XML技術(shù)定铜，指的是一套綜合了多項(xiàng)技術(shù)的瀏覽器端網(wǎng)頁(yè)開發(fā)技術(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)行更新。? ? 傳統(tǒng)的網(wǎng)頁(yè)（不使用 Ajax）如果需要更新內(nèi)容畸陡，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面鹰溜。? ? ? ? ? ?
2.知識(shí)剖析? ? ? ? ? ? ??
2-1傳統(tǒng)的請(qǐng)求方式
?傳統(tǒng)的web應(yīng)用程序中，用戶向服務(wù)器發(fā)送一個(gè)請(qǐng)求丁恭，然后等待曹动，服務(wù)器接受到用戶的請(qǐng)求然后響應(yīng)。在這段時(shí)間內(nèi)牲览，用戶會(huì)傻乎乎? ? 的盯著一個(gè)空白頁(yè)面看仁期。這是因?yàn)橐酝膫鬏敺绞綖橥教幚矸绞健ｉL(zhǎng)久以來(lái)我們對(duì)這種web交互模式已經(jīng)習(xí)慣了，并且以使用者的角度來(lái)講已經(jīng)覺(jué)得是理所當(dāng)然的事情了
Ajax的工作方式? ? ??
和傳統(tǒng)的web應(yīng)用不同跛蛋，Ajax采取了異步交互避免了用戶請(qǐng)求-等待-應(yīng)答交互方式的缺點(diǎn)熬的。Ajax在應(yīng)用程序和服務(wù)器中引入了一個(gè)中間層---Ajax引擎，它是用Javascript編寫的赊级，在一個(gè)隱藏的框架中運(yùn)行押框。Ajax引擎負(fù)責(zé)呈現(xiàn)用戶界面，以及代表用戶和服務(wù)器進(jìn)行交互理逊。Ajax引擎允許用戶和服務(wù)器進(jìn)行異步的交互橡伞。用戶無(wú)需傻乎乎的盯著空白頁(yè)面? ??
3.常見(jiàn)問(wèn)題??
? ? ? ? 1、參數(shù)如何傳遞晋被？
4.解決方案? ? ? ? ??
5.編碼實(shí)戰(zhàn)
jQuery方法
Javascript原生方法
原生的講解
(1)在使用xhr對(duì)象發(fā)送請(qǐng)求和處理請(qǐng)求響應(yīng)之前兑徘，必須先用js語(yǔ)言創(chuàng)建一個(gè)xhr對(duì)象。由于xhr對(duì)象當(dāng)前還不是w3c標(biāo)準(zhǔn)羡洛，所以才有多種方式進(jìn)行創(chuàng)建以解決兼容性問(wèn)題挂脑。具體創(chuàng)建方式如下：?
?var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
? ? ? ? ? ? ? ? (2)向服務(wù)器發(fā)送請(qǐng)求
? ? ? ? ? ? ? ? (a) open(method,url,async)
規(guī)定請(qǐng)求的類型、URL以及是否異步處理請(qǐng)求欲侮。
? ? ? ? ? ? ? ? method：請(qǐng)求的類型崭闲；GET或 POST
? ? ? ? ? ? ? ? url：文件在服務(wù)器上的位置
? ? ? ? ? ? ? ? async：true（異步）或 false（同步）
? ? ? ? ? ? ? ? (b)send(string)
? ? ? ? ? ? ? ? 將請(qǐng)求發(fā)送到服務(wù)器。
? ? ? ? ? ? ? ? string：僅用于 POST請(qǐng)求
6.擴(kuò)展思考
? ? ? ? ? ? $http({
url:'data.json',
method:'GET'
}).success(function(data,header,config,status){
//code goes here
}).error(function(data,header,config,status) {
//code goes here
});
var promise = $http({
url:'data.json',
method:'GET'
});
promise.then(function(resp) {
//resp是一個(gè)響應(yīng)對(duì)象
? ? ? ? ? ? ? }, function() {
//帶有錯(cuò)誤信息的resp
})
? ? ? ? ? ? then()方法與其他兩種方法的主要區(qū)別是威蕉，它會(huì)接收到完整的響應(yīng)對(duì)象刁俭，信息更為全面，而success()和error()則會(huì)對(duì)響應(yīng)對(duì)象進(jìn)行析構(gòu)韧涨，使用起來(lái)更為方便牍戚。
7.參考文獻(xiàn)
參考一：什么是跨域
參考二：AngularJS中then和success的區(qū)別
參考三：
8.提問(wèn)總結(jié)
1.為什么要用ajax?
因?yàn)槭褂弥缶筒挥妙l繁的提交表單，刷新頁(yè)面虑粥。有了更好的用戶體驗(yàn)翘魄。
2.有些網(wǎng)址是輸入完成之后就可以檢測(cè)？
那個(gè)是使用了dom的失去焦點(diǎn)的事件來(lái)完成的舀奶。
3.@datetimefomart在什么時(shí)候加載的暑竟？
這個(gè)是使用注解驅(qū)動(dòng)來(lái)加載的。
下載鏈接
