Ajax
声明：本文章属于学习笔记，根据狂神说的SpringMVC编写
SpringMVC 4.2.4.RELEASE 中文文档
一丶什么是Ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
我们可以看这样的一个图片Ajax一个简单的应用就是我们在搜索框搜索的时候,他可以有很多的提示.
二丶案例展示
首先我们要配置我们的springmvc:
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: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>
我们通过xml文件,进行编码集的统一和过滤所有的请求,并且去绑定applicationContext.xml文件。
applicationContext.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">
<!-- 自动扫描指定的包，下面所有注解类交给IOC容器管理 -->
<context:component-scan base-package="com.kdy.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>
前台页面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
function a1(){
$.post({
url:"${pageContext.request.contextPath}/kdy/a1",
data:{'name':$("#txtName").val()},
success:function (data,status) {
alert(data);
alert(status);
}
});
}
</script>
</head>
<body>
<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>
</body>
</html>
controller层：
@RequestMapping("/a1")
public void ajax1(String name , HttpServletResponse response) throws IOException {
if ("admin".equals(name)){
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
我们可以看到前台利用Ajax去发送post请求（这里post和get请求其实是一样的，但是我们在这里用post请求）
我们的前后台将交互都是前台的一些表单元素发送给后台之后后台去进行一些操作。以前我们跳转界面是要在后台进行跳转，我们的页面就会同步刷新。但是我们使用Ajax之后就会实现异步刷新，将这些任务都给前台！
我们看下面的这张图片：当我们失去焦点的时候，Ajax发送post请求向后台，后台接收了前台发送的内容来判断，返回是为true还是flase。可是这时候需要前后端进行交互，我们在交互的时候。不由自主的一定会将地址和判断内容发到后台，也就是我们前台所发送的url和data键值对。在这里时我们都要记住，如果只发送这两个那么他跳转页面一定会是后台进行跳转！但是我们这时候要是用Ajax那么，我们的视图层就会交给前台去管理，所有就用了这个callback回调函数将后台响应的数据给前台，之后让前台去显示视图层。而后台这个时候只需要将数据接收就可以了。
三丶Ajax异步加载数据
我们可以看这样的一段代码：
@RequestMapping("/a2")
public List <User> ajax2(){
List<User> list = new ArrayList<>();
list.add(new User("kdy1",21,"男"));
list.add(new User("kdy2",22,"男"));
list.add(new User("kdy3",23,"男"));
return list;
}
当我们访问时：
我们可以看到当我们没有使用Ajax的时候，他是个dom类型而不是xhr类型。
如果我们用Ajax来进行视图层的显示：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$.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>"
}
$("#content").html(html);
});
})
})
</script>
</body>
</html>
执行结果：
当我们点击按钮之后，会显示出xhr类型也就是我们的Ajax。虽然显示出的页面一样，都是在这里显示。但是执行的过程完全不一样，后台只负责接收数据，前台负责视图层的呈现。
这样的做法才是真正意义上实现了***数据的回显***！！！
四丶Ajax验证用户体验
我们看这样的两段代码：
@RequestMapping("/a3")
public String ajax3(String name,String pwd){
String msg="";
if (name!=null) {
if ("admin".equals(name)) {
msg = "ok";
} else {
msg = "用户名或者密码错误";
}
}
if (pwd!=null) {
if ("123456".equals(pwd)) {
msg = "ok";
} else {
msg = "用户名或者密码错误";
}
}
return msg;
}
login.jsp：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
function a1(){
$.post({
url:"${pageContext.request.contextPath}/a3",
data: {'name':$('#pwd').val()},
success:function (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) {
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>
运行结果：
我们可以看见，当我们输入后台相同的字段的时候。他是ok的。
当我们输入不是上面的情况的时候，我们可以看见（虽然没解决乱码问题但是他不是ok，那么他就是登录不成功），所以我们在这个时候一定联想起一些东西那就是当我们登录的时候提示的密码和用户名错误就是这样实现的。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
