SpringMVC --> 五、Ajax
狂神说
文章目录
10. Ajax
10.1 什么是Ajax
- Ajax= Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）；
- Ajax不是新的编程语言，而是一种使用现有标准的新方法，是一种用于创建更好更快以及交互性更强的Web应用程序的技术；
- Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容；
- Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行；
- 传统的网页(即不用Ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页；
- 使用Ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新；
- 使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
10.2 XMLHttpRequest
-
XMLHttpRequest 是 Ajax 的基础和核心。
-
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
-
创建XMLHttpRequest对象
var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } -
XMLHttpRequest 对象用于和服务器交换数据。
-
如需将请求发送到服务器，使用 XMLHttpRequest 对象的 open() 和 send() 方法：
方法 描述 open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步） send(string) 将请求发送到服务器。string：仅用于 POST 请求 -
如需像 HTML 表单那样 POST 数据，使用setRequestHeader() 方法来添加 HTTP 头。然后在 send() 方法中规定希望发送的数据：
方法 描述 setRequestHeader(header,value) 向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值 xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford"); -
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 描述 responseText 获得字符串形式的响应数据。 responseXML 获得 XML 形式的响应数据。 -
onreadystatechange 事件:
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性 描述 onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪 status 200: “OK” 404: 未找到页面 在 onreadystatechange 事件中，规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
-
回调函数
回调函数是一种以参数形式传递给另一个函数的函数。
如果网站上存在多个 AJAX 任务，应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
function myFunction() { loadXMLDoc("/try/ajax/ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }
10.3 jQuery Ajax方法的使用
-
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
-
jQuery 提供多个与 AJAX 有关的方法。
-
通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON ，同时能够把这些外部数据直接载入网页的被选元素中。
-
jQuery Ajax本质就是 XMLHttpRequest，对其进行了封装，方便调用！
-
语法:
$.ajax({name:value, name:value, ... }) -
参数
名称 值/描述 url 请求的 URL。默认是当前页面。 type 请求方式，GET、POST（1.9.0之后用method） headers 请求头 data 规定要发送到服务器的数据。 contentType 发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。 async 布尔值，请求是否异步处理。默认是 true。 timeout 设置本地的请求超时时间（以毫秒计）。 beforeSend(xhr) 发送请求前运行的函数。 complete(xhr,status) 请求完成时运行的回调函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 success(result,status,xhr) 当请求成功时运行的函数。 error(xhr,status,error) 如果请求失败要运行的函数。 accepts 通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型 dataType 将服务器端返回的数据转换成指定类型 “xml” 将服务器端返回的内容转换成xml格式 “text” 将服务器端返回的内容转换成普通文本格式 “html” 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。 “script” 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式 “json” 将服务器端返回的内容转换成相应的JavaScript对象 jsonp 在一个 jsonp 中重写回调函数的字符串。 jsonpCallback 在一个 jsonp 中规定回调函数的名称。 cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 context 为所有 AJAX 相关的回调函数规定 “this” 值。 dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。 global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 password 规定在 HTTP 访问认证请求中使用的密码。 processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 scriptCharset 规定请求的字符集。 traditional 布尔值，规定是否使用参数序列化的传统样式。 username 规定在 HTTP 访问认证请求中使用的用户名。 xhr 用于创建 XMLHttpRequest 对象的函数。
简单测试一下：
-
编写springmvc的配置文件
resources/spring-mvc.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.ano.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> -
配置
web.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:spring-mvc.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>encodingFilter</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>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app> -
编写一个Controller类
AjaxControler.javapackage com.ano.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @Controller public class AjaxController { @RequestMapping("/a1") public void ajaxTest(String name, HttpServletResponse response) throws IOException { if("admin".equals(name)) { response.getWriter().print(true); } else { response.getWriter().print(false); } } } -
下载jquery
在官网下载jquery,
jquery-3.6.1.js, 路径为web\statics\js\jquery-3.6.1.js -
编写
index.jsp进行测试<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.1.js"></script> <script> function a1() { $.post({ url:"${pageContext.request.contextPath}/a1", data:{'name':$("#txtName").val()}, success:function (data,status) { alert(data); alert(status) } }) } </script> </head> <body> 用户名：<input type="text" id="txtName" οnblur="a1()"> </body> </html> -
配置tomcat运行测试，会看到鼠标离开输入框时会发出一个ajax请求
10.4 Ajax实现异步加载数据
一个简单测试 SpringMVC实现
-
编写一个实体类
User.java, 这里使用lombok插件；package com.ano.pojo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @AllArgsConstructor @NoArgsConstructor public class User { private String name; private int age; private String gender; } -
编写AjaxController类的一个测试接口
AjaxController.java@RestController public class AjaxController { @RequestMapping("/a2") public List<User> ajaxTest2() { List<User> userList = new ArrayList<User>(); userList.add(new User("KeyNG",26,"男")); userList.add(new User("Ano",26,"女")); userList.add(new User("西西PERSISTING",19,"女")); return userList; } } -
编写前端页面，就在
index.jsp页面修改<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.1.js"></script> <script> $(function () { $("#btn").click(function () { $.post("${pageContext.request.contextPath}/a2",function (data) { console.log(data) console.log(data[0].name); let html = ""; for (let i = 0; i < data.length; i++) { html += `<tr> <td>${"${data[i].name}"}</td> <td>${"${data[i].age}"}</td> <td>${"${data[i].gender}"}</td> </tr>` } $("#content").html(html) console.log(html) }) }) }) </script> </head> <body> <input type="button" value="加载数据" id="btn"> <table> <thead> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> </thead> <tbody id="content"> </tbody> </table> </body> </html> -
导入依赖jackson-databind,否则会报错
<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.13.3</version> </dependency> -
配置Tomcat运行测试
-
附上spring配置文件
spring-mvc.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.ano.controller"/> <mvc:default-servlet-handler/> <!--JSON乱码问题配置--> <mvc:annotation-driven> <mvc:message-converters> <bean class="org.springframework.http.converter.StringHttpMessageConverter"> <constructor-arg value="UTF-8"/> </bean> <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="objectMapper"> <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean"> <property name="failOnEmptyBeans" value="false"/> </bean> </property> </bean> </mvc:message-converters> </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>
10.5 Ajax实现用户登录验证Demo
一个简单测试 SpringMVC实现，基于10.4章节，配置不用动
-
编写Controller类
@RequestMapping("/a3") public String ajaxTest3(String name, String password) { String msg = ""; if(name != null) { if("admin".equals(name)) { msg="Ok"; }else { msg="用户名输入错误"; } } if(password != null) { if("123456".equals(password)) { msg="Ok"; }else { msg="密码输入错误"; } } return msg; } -
登录前端页面
login.jsp,为了便于测试，与index.jsp同路径<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.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:{'password':$("#pwd").val()}, success:function (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" οnblur="a1()"/> <span id="userInfo"></span> </p> <p> 密码:<input type="text" id="pwd" οnblur="a2()"/> <span id="pwdInfo"></span> </p> </body> </html> -
测试
1976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
