前後端分離之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>
三、使用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
-