大家好，我是修真院一枚程序員，今天給大家介紹一下ajax
1.背景介紹
? ? ? ? ? ? ? ? 做任務7的時候，遇到了獲取驗證碼或者發(fā)送郵件的問題。點擊按鈕，不想刷新頁面和提交表單。 用戶在注冊的時候也想在不提交表單的情況下獲
什么是Ajax？? ? ? ? ??
? ? ? ? ? ? ? ? AJAX即異步的JavaScript與XML技術，指的是一套綜合了多項技術的瀏覽器端網頁開發(fā)技術。? 通過在后臺與服務器進行少量數據交換，Ajax可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。? ? 傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。? ? ? ? ? ?
2.知識剖析? ? ? ? ? ? ??
2-1傳統的請求方式
?傳統的web應用程序中，用戶向服務器發(fā)送一個請求，然后等待，服務器接受到用戶的請求然后響應。在這段時間內，用戶會傻乎乎? ? 的盯著一個空白頁面看。這是因為以往的傳輸方式為同步處理方式。長久以來我們對這種web交互模式已經習慣了，并且以使用者的角度來講已經覺得是理所當然的事情了
Ajax的工作方式? ? ??
和傳統的web應用不同，Ajax采取了異步交互避免了用戶請求-等待-應答交互方式的缺點。Ajax在應用程序和服務器中引入了一個中間層---Ajax引擎，它是用Javascript編寫的，在一個隱藏的框架中運行。Ajax引擎負責呈現用戶界面，以及代表用戶和服務器進行交互。Ajax引擎允許用戶和服務器進行異步的交互。用戶無需傻乎乎的盯著空白頁面? ??
3.常見問題??
? ? ? ? 1、參數如何傳遞？
4.解決方案? ? ? ? ??
5.編碼實戰(zhàn)
jQuery方法
Javascript原生方法
原生的講解
(1)在使用xhr對象發(fā)送請求和處理請求響應之前，必須先用js語言創(chuàng)建一個xhr對象。由于xhr對象當前還不是w3c標準，所以才有多種方式進行創(chuàng)建以解決兼容性問題。具體創(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)向服務器發(fā)送請求
? ? ? ? ? ? ? ? (a) open(method,url,async)
規(guī)定請求的類型、URL以及是否異步處理請求。
? ? ? ? ? ? ? ? method：請求的類型；GET或 POST
? ? ? ? ? ? ? ? url：文件在服務器上的位置
? ? ? ? ? ? ? ? async：true（異步）或 false（同步）
? ? ? ? ? ? ? ? (b)send(string)
? ? ? ? ? ? ? ? 將請求發(fā)送到服務器。
? ? ? ? ? ? ? ? string：僅用于 POST請求
6.擴展思考
? ? ? ? ? ? $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是一個響應對象
? ? ? ? ? ? ? }, function() {
//帶有錯誤信息的resp
})
? ? ? ? ? ? then()方法與其他兩種方法的主要區(qū)別是，它會接收到完整的響應對象，信息更為全面，而success()和error()則會對響應對象進行析構，使用起來更為方便。
7.參考文獻
參考一：什么是跨域
參考二：AngularJS中then和success的區(qū)別
參考三：
8.提問總結
1.為什么要用ajax?
因為使用之后就不用頻繁的提交表單，刷新頁面。有了更好的用戶體驗。
2.有些網址是輸入完成之后就可以檢測？
那個是使用了dom的失去焦點的事件來完成的。
3.@datetimefomart在什么時候加載的？
這個是使用注解驅動來加載的。
下載鏈接
