前後端分離之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——請求收到，但返回資訊為空
205——伺服器完成了請求，使用者代理必須復位當前已經瀏覽過的檔案
206——伺服器已經完成了部分使用者的GET請求
300——請求的資源可在多處得到
301——刪除請求資料
302——在其他地址發現了請求資料
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經執行了GET，但檔案未變化
305——請求的資源必須從伺服器指定的地址得到
306——前一版本HTTP中使用的程式碼，現行版本中不再使用
307——申明請求的資源臨時性刪除
400——錯誤請求，如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發現檔案、查詢或URl
405——使用者在Request-Line欄位定義的方法不允許
406——根據使用者傳送的Accept拖，請求資源不可訪問
407——類似401，使用者必須首先在代理伺服器上得到授權
408——客戶端沒有在使用者指定的餓時間內完成請求
409——對當前資源狀態，請求不能完成
410——伺服器上不再有此資源且無進一步的參考地址
411——伺服器拒絕使用者定義的Content-Length屬性請求
412——一個或多個請求頭欄位在當前請求中錯誤
413——請求的資源大於伺服器允許的大小
414——請求的資源URL長於伺服器允許的長度
415——請求資源不支援請求專案格式
416——請求中包含Range請求頭欄位，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭欄位
417——伺服器不滿足請求Expect頭欄位指定的期望值，如果是代理伺服器，可能是下一級伺服器不能滿足請求
500——伺服器產生內部錯誤
501——伺服器不支援請求的函式
502——伺服器暫時不可用，有時是為了防止發生系統過載
503——伺服器過載或暫停維修
504——關口過載，伺服器使用另一個關口或服務來響應使用者，等待時間設定值較長
505——伺服器不支援或拒絕支請求頭中指定的HTTP版本