# Ajax初次體驗 ###### tags: `Ajax介紹` ## Ajax是什麼 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 ### 異步無刷新請求： 無須重新加載整個網頁的情況下，能夠更新部分網頁的技術，如下圖： ![](https://i.imgur.com/JfCjfhQ.png) 輸入新的資料後，網頁端發出**xhr**，此為異步的請求 ![](https://i.imgur.com/20dP0Bb.png) ## Ajax使用示範 jQuery是一個庫;js的大量函數(方法) ### 環境搭建 #### web.xml ```xml= <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <filter> <filter-name>encoding</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>encoding</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app> ``` #### applicationContext.xml ```xml= <?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 http://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"> <context:component-scan base-package="com.kuang.controller"/> <!--靜態資源過濾--> <mvc:default-servlet-handler/> <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> ``` ### 操作 #### AjaxController.java ```java= @RestController public class AjaxController { @RequestMapping("/t1") public String test(){ return "hello"; } @RequestMapping("/a1") public void a1(String name, HttpServletResponse response) throws IOException { System.out.println("a1:param=>" + name); if("狂神".equals(name)){ response.getWriter().print("true"); }else{ response.getWriter().print("false"); } } } ``` ```htmlembedded= <!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" value="https://www.google.com/"> <input type="button" value="提交" onclick="go()"> </p> </div> <div> <iframe id="iframe1" style="width: 100%;height: 500px"></iframe> </div> </body> </html> ``` #### index.jsp ```htmlembedded= <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.4.js"></script> <%--js是一個隨便的源--%> <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> ``` 當輸入設定好正確的答案，讓鼠標移開輸入框，出現： ![](https://i.imgur.com/cB8Dd0S.png) 輸入錯誤的答案，讓鼠標移開輸入框，出現： ![](https://i.imgur.com/4uuD6HN.png) 可以看到當失去焦點時，瀏覽器立刻回傳xhr類型檔案 ![](https://i.imgur.com/lfKPy0c.png) ### 關係視圖 ![](https://i.imgur.com/nKOPUoL.png) ### ajax 前後端分離 #### 學習前置綱要 html+css略懂+js(超級熟練) #### js: 函數：閉包()() Dom id,name,tag create,remove Bom window document ES6:import require