前后端分離之Ajax入門
前后端分離之Ajax入門
一、概念
Ajax（Asynchronous Javascript And XML），即是異步的JavaScript和XML，Ajax其實就是瀏覽器與服務器之間的一種異步通信方式。它可以異步地向服務器發送請求，在等待響應的過程中，不會阻塞當前頁面，在這種情況下，瀏覽器可以做自己的事情。直到成功獲取響應后，瀏覽器才開始處理響應數據。
-
傳統傳統的Web應用模式和 ajax方式的比較：
傳統的web應用：請求提交的時候,提交的是整個表單，服務端返回的時候，也是返回整個頁面（刷新）
ajax方式：提交請求的時候只把某些數據提交（可以不用表單），服務端也只返回特定的數據 -
Ajax 應用的特點
- 不刷新整個頁面,在頁面內與服務端通迅
- 使用異步方式和服務端通迅
- 大部分交互都在頁面內完成
-
Ajax 技術組成
XMLHttpRequest：用于與服務器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請求特定 URL，發送和獲取數據。這允許網頁在不影響用戶操作的情況下，更新頁面的局部內容，所有的現代瀏覽器都支持這個對象。
javascript：一種腳本編程語言，它可以在網頁上實現復雜的功能，網頁展現的不再是簡單的靜態信息，而是實時的內容更新。
HTML：超文本標記語言，是一種用來結構化 Web 網頁及其內容的標記語言。
json(曾經使用XML)：將結構化數據表示為 JavaScript 對象的標準格式，是一種輕量級數據交換格式，而XML較為復雜
二、XMLHttpRequest 實現ajax
-
準備好服務端程序（tomcat）
@WebServlet("/UserServlet") public class UserServlet extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8");//設置結果集 response.getWriter().print("這是服務端的數據:"+LocalDateTime.now());//向瀏覽器發送數據 } } -
客戶端程序
步驟：
- 創建 XMLHttpRequest對象, 直接new就可以
- 要指定回調函數
- 調用它的open方法,指明提交方式,提交地址,及數據
- 調用它的send方法,發送請求
- 在回調函數中進行相應的處理
<script src="js/jquery-1.8.0.js"></script> <script> var xmlhttp; function test(){ //創建 XMLHttpRequest對象 xmlhttp = new XMLHttpRequest(); //要指定回調函數 xmlhttp.onreadystatechange=mystatechange; //調用open方法 xmlhttp.open("get","UserServlet",null); //調用send xmlhttp.send(null); } function mystatechange(){ //alert(xmlhttp.readyState); if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ // alert(xmlhttp.responseText); document.getElementById("lbl_msg").innerHTML=xmlhttp.responseText; } } } </script> <body> <button onclick="test()">測試</button> <label id="lbl_msg"></label> </body> -
readyState狀態碼
0 --> UNSENT-- XMLHttpRequest 代理已被創建，但尚未調用 open() 方法。
1 --> OPENED-- open() 方法已經被觸發。在這個狀態中，可以通過 setRequestHeader() 方法來設置請求的頭部，可以調用 send() 方法來發起請求。
2 --> HEADERS_RECEIVED-- send() 方法已經被調用，并且頭部和狀態已經可獲得。
3 --> LOADING-- 響應體部分正在被接收。如果
responseType屬性是“text”或空字符串，responseText將會在載入的過程中擁有部分響應數據。
4 --> DONE-- 請求操作已經完成。這意味著數據傳輸已經徹底完成或失敗。
三、使用jQuery實現ajax
四種實現方式：
- load()方法
- $.get()方法
- $.post()方法
- $.ajax()方法 - 常用
-
load()：請求方式由是否傳遞參數決定。即傳遞參數，為GET方式;不傳遞參數，為POST方式。
<script src="js/jquery-1.8.0.js"></script> <script> //load(url,data,callback) /* url：異步請求的地址 data：異步請求的數據 如果省略請求數據的話，當前的請求方式為GET 如果發送請求數據的話，當前的請求方式為POST callback - 異步請求成功后的回調函數 */ $(function(){ function mystatechange(){ alert('異步請求成功') } function test(){ $('button').load('UserServlet',mystatechange()) } }) </script> <body> <button onclick="test()">測試</button> </body> -
$.get()：使用get方式向服務器端發送異步請求
<script src="js/jquery-1.8.0.js"></script> <script> //get(url,data,callback,type) /* url：異步請求的地址 data：異步請求的數據 callback：異步請求成功后的回調函數 type：設置服務器滿響應結果的格式；值為xml、html、script、json、text和default */ $(function(){ $("button").click(function(){ $.get("UserServlet",{userName:"admin",password:"123"}, function(data){ alert('異步請求成功'); }); }); }); </script> <body> <button>測試</button> </body> -
$.post()：使用POST方式向服務器端發送異步請求
<script src="js/jquery-1.8.0.js"></script> <script> //post(url,data,callback,type) /* url：異步請求的地址 data：異步請求的數據 callback：異步請求成功后的回調函數 type：設置服務器滿響應結果的格式；值為xml、html、script、json、text和default */ $(function(){ $("button").click(function(){ $.post("UserServlet",{userName:"admin",password:"123"}, function(data){ alert('異步請求成功'); }); }); }); </script> <body> <button>測試</button> </body> -
$.ajax()：是jQuery中最為底層的Ajax方法
<script> $(function(){ $("button").click(function(){ $.ajax({ type:"post", url:"UserServlet", data:{userName:"admin",password:"123"}, success: function(data){ alert('異步請求成功'); } }); }); }); </script> <body> <button>測試</button> </body>
四、$.ajax([options]) 詳解
$(function(){
$("button").click(function(){
$.ajax({
type:"post", //請求的提交方式,可以是post和get, 大小寫不敏感
url:"UserServlet", //請求的地址
data:{userName:"admin",password:"123"}, //提交的數據,前面的key可以用雙引號引起來也可以不引
success: function(data){ //回調函數,data 代表服務端返回的數據,data這個名字不是固定的,叫什么都可以
alert(data);
}
});
});
});
注：當以post方式提交請求的時候,放在url后面的參數,是可以用的
比如下面的表單:
<form action="UserServlet?flag=add" method="post">
<input name="userName">
<input name="password">
<submit >
</form>
請求提交以后,服務端能收到 flag, userName,password
但當請求以get的方式提交的時候,放在url后面的參數會被表單中其他的數據覆蓋
$.ajax() 其他參數：
- async
- cache
- dataType //服務端傳回來的數據,是什么類型, 取值有 text,html, js,xml,josn, jsonp
- contentType //發給服務端的數據,是什么格式
- 回調函數
-
async 是否啟用異步,默認是true
$(function(){ $("button").click(function(){ alert("a"); $.ajax({ type:"post", url:"UserServlet", data:{userName:"admin",password:"123"}, success: function(data){ alert("b"); } }); alert("c"); }); }); /* 以上代碼的執行順序有可能是a, b, c；也有可能是a, c, b 原因：默認情況下，async的取值是true，即使用異步的方式提交 想要同步執行，需要設置：async : false */ -
cache 是否緩存
默認值：true，當dataType為script時，默認為false，設置為false將不會從瀏覽器緩存中加載請求信息
當cache 為true時，瀏覽器會優先從緩存中取數據，若緩存中存在則直接取出，若不存在會向服務端發送請求。
優點：從緩存中取數據，減少了服務器端的壓力
缺點：無法實時更新。如需要獲得請求服務器的次數時，客戶端完成獲取次數，服務器段完成更新次數，會從緩存中直接取數據，不會請求服務器執行增加次數操作
-
dataType 服務端傳回來的數據,是什么類型
如：
- xml：返回XML文檔。
- html：返回純文本HTML信息；包含的script標簽會在插入DOM時執行。
- script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。
- json：返回JSON數據。
- jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數名，以執行回調函數。
- text：返回純文本字符串。
-
contentType 發給服務端的數據,是什么格式
默認值：application/x-www-form-urlencoded。這種格式的特點：name/value 成為一組，每組之間用 & 聯接，而 name與value 則是使用 = 連接。如：url?name=zhangsan&password=123
注：這種形式是沒有辦法將復雜的 JSON 組織成鍵值對形式。
-
回調函數
-
success 成功以后調用
-
error 出錯的時候調用
-
complete 不管成功,失敗,都調用
$(function(){ $("button").click(function(){ $.ajax({ type:"post", url:"UserServlet?flag=visit", success:function(data){ alert("success調用了"); }, error:function(e){ alert("error 調用了"+e); }, complete:function(){ alert("complete 調用了"); } /* 總結 success 在服務端正確返回的情況下調用 complete 總要調用 error 在出錯的時候會調用 (1) 客戶端請求寫錯了,會引起error的調用 (2) 服務端出錯了,也會引起error的調用 */ }); }); }); <body> <button>測試</button> </body
-
五、ajax的status狀態碼
- 1**：信息響應類，表示接收到請求并且繼續處理
- 2**：處理成功響應類，表示動作被成功接收、理解和接受
- 3**：重定向響應類，為了完成指定的動作，必須接受進一步處理
- 4**：客戶端錯誤，客戶請求包含語法錯誤或者是不能正確執行
- 5**：服務端錯誤，服務器不能正確執行一個正確的請求
常見的狀態碼：
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息為空
300——請求的資源可在多處得到
301——刪除請求數據
302——在其他地址發現了請求數據
303——建議客戶訪問其他URL或訪問方式
400——錯誤請求，如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發現文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
500——服務器產生內部錯誤
501——服務器不支持請求的函數
502——服務器暫時不可用，有時是為了防止發生系統過載
503——服務器過載或暫停維修
505——服務器不支持或拒絕支請求頭中指定的HTTP版本
