9. Ajax技術
簡介
- AJAX=Asynchronous JavaScript and XML （非同步的JavaScript和XML）
- AJAX是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。
- Ajax不是新的程式語言，而是一種用於建立更快更好以及互動性更強的Web應用程式的技術。
- 舉例：在搜尋框輸入關鍵詞時，JavaScript會把這些字元傳送到伺服器，然後伺服器返回一個搜尋建議的列表。
偽造Ajax
我們可以使用前端的一個標籤來偽造一個ajax的樣子：iframe
-
新建一個module，springmvc-06-ajax，匯入web支援
-
編寫一個
ajax-frame.html使用iframe測試<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe測試 體驗頁面無重新整理</title> <script> function go() { //所有的值 變數 提前獲取 var url=document.getElementById("url").value; document.getElementById("iframe1").src="url"; } </script> </head> <body> <div> <p>請輸入地址：</p> <p> <input type="text" id="url"> <input type="button" value="提交" onclick="go()"> </p> </div> <div> <iframe id="iframe1" style="width:100%;height:500px"></iframe> </div> </body> </html>
利用Ajax可以做：
- 註冊時，輸入使用者名稱自動檢測使用者是否存在
- 登入時，提示使用者名稱密碼錯誤
- 刪除資料行時，將行ID傳送到後臺，後臺在資料庫中刪除，頁面DOM將資料行也刪除
jQuery.ajax
- 直接使用jQuery提供的ajax
- Ajax的核心是XMLHttpRequest物件（XHR）。XHR為伺服器傳送請求和解析伺服器響應提供了介面，能夠非同步方式從伺服器上獲取新資料。
- jQuery提供了多個與AJAX有關的方法
- 通過jQueryAJAX方法，能夠使用HTTP Get和HTTP Post從遠端伺服器上請求文字、html、xml或json，同時把這些外部資料直接載入網頁的被選元素中。
- jQuery Ajax的本質就是XMLHttpRequest，對它進行了封裝。
jQuery是一個庫，包含大量JS的函式（方法）
來做個簡單的測試，使用最原始的HttpServletRequest處理：
-
配置web.xml和springmvc的配置檔案
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!--自動掃描包 讓指定包下的註解生效 由IOC容器統一管理--> <context:component-scan base-package="com.kuang.controller"/> <!--讓spring mvc不處理靜態資源 .css .js --> <mvc:default-servlet-handler/> <!--annotation-driven幫助我們自動完成handlermapper和adapter例項的注入--> <mvc:annotation-driven/> <!--檢視解析器: 模版引擎--> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"/> </bean> </beans> -
index.jsp<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"> </script> <script> function a(){ $.post({ url:"${pageContext.request.contextPath}/a1", data:{"name":$("#username").val()}, success:function (data,status) { console.log("data="+data); console.log("status="+status); } }) } </script> </head> <body> <%--失去焦點的時候發起一個請求（攜帶資訊）--%> 使用者名稱：<input type="text" id="username" onblur="a()"> </body> </html> -
AjaxController.java@RequestMapping("/a1") public void a1(String name, HttpServletResponse response) throws IOException { System.out.println("a1.param:"+name); if("huba".equals(name)){ response.getWriter().print("true"); }else { response.getWriter().print("false"); } }
架構解析：
非同步載入資料測試案例
-
新建pojo包下的user實體類
@Data @AllArgsConstructor @NoArgsConstructor public class User { private String name; private int age; private String sex; } -
增加controller：
AjaxController.java@RequestMapping("/a2") public List<User> a2(){ List<User> userList = new ArrayList<User>(); //新增資料 userList.add(new User("狂神說java",1,"男")); userList.add(new User("狂神說前端",1,"女")); userList.add(new User("狂神說運維",1,"男")); return userList; } -
寫頁面
test2.jsp<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script> <script> $(function () { $("#btn").click(function () { //簡寫 //$.post(url,param，success) param可省略 $.post("${pageContext.request.contextPath}/a2", function (data) { // console.log(data); var html="<>"; for (let i = 0; i < data.length; i++) { html+="<tr>"+ "<td>"+data[i].name+"</td>"+ "<td>"+data[i].age+"</td>"+ "<td>"+data[i].sex+"</td>"+ "<tr>"; } console.log(data); $("#content").html(html); }); }); }); </script> </head> <body> <input type="button" value="載入資料" id="btn"> <table> <tr> <td>姓名</td> <td>年齡</td> <td>性別</td> </tr> <tbody id="content"> <%--資料在後臺--%> </tbody> </table> </body> </html>
註冊提示效果
測試：平時註冊時，輸入框後面的實時提示是如何做到的？
-
寫一個controller
@RequestMapping("/a3") public String a3(String name,String pwd){ String msg=""; if(name!=null){ //實際上，admin的資料應從資料庫查詢 if("admin".equals(name)) msg="ok"; else msg="no"; } if(pwd!=null){ if("123456".equals(pwd)) msg="ok"; else msg="no"; } return msg; } -
寫一個登入頁面
login.jsp<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>登入頁面</title> <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script> <script> function a1() { $.post({ url:"${pageContext.request.contextPath}/a3", data:{"name":$("#name").val()}, success:function (data) { // console.log(data); if(data.toString()==='ok'){ $("#userInfo").css("color","green"); }else $("#userInfo").css("color","red"); $("#userInfo").html(data); } }) } function a2() { $.post({ url:"${pageContext.request.contextPath}/a3", data:{"pwd":$("#pwd").val()}, success:function (data) { // console.log(data); if(data.toString()==='ok'){ $("#pwdInfo").css("color","green"); }else $("#pwdInfo").css("color","red"); $("#pwdInfo").html(data); } }) } </script> </head> <body> <p> 使用者名稱：<input type="text" id="name" onblur="a1()"> <span id="userInfo"></span> </p> <p> 密碼：<input type="text" id="pwd" onblur="a2()"> <span id="pwdInfo"></span> </p> </body> </html>