简介
- AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)。
- AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
- Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
- 在2005年,Google通过其Google Suggest使AJAX变得流行起来。Google Suggest能够自动帮你完成搜索单词。
- Google Suggest使用AJAX创造出动态性极强的web界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。
- 就和国内百度的搜索框一样:
常见应用
- 注册时,输入用户名自动检测用户是否已经存在
- 登录时,提示用户名或密码错误
- 删除数据行时,将行ID发送到后台,后台在数据库中删除后,在页面DOM中也将数据行删除
- 传统的网页(即不用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。
- 使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。
- 使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
导入Jquery包
- 配置web.xml和applicationContext.xml
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">
<!--DispatchServlet-->
<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 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.rm.controller"/>
<!--开启注解驱动-->
<mvc:annotation-driven/>
<!--过滤静态资源-->
<mvc:default-servlet-handler/>
<!--视图解析器-->
<bean id="internalResourceViewResolver"
class="org.springframework.web.servlet.view.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>
<%--导入jquery,script标签必须成对出现--%>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.3.1.js">
</script>
<script>
<%--$等价于Jquery--%>
function a() {
$.post({
url:"${pageContext.request.contextPath}/a1",
//后端从data中取数据(id选择器),键值对形式,值是前端的数据
data:{"name":$("#userName").val()},
//成功或者失败都需要一个回调函数
success:function (data) {
alert(data);
},
error:function () {
alert("错误")
}
})
}
</script>
</head>
<body>
<%--失去焦点的时候,发送一个请求(携带信息)到后台--%>
<%--失去焦点的时候会调用x函数--%>
用户名;<input type="text" id="userName" onblur="a()">
</body>
</html>
- controller层
AjaxController
package com.rm.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@RestController
public class AjaxController {
@RequestMapping("/a1")
//接收前端的参数,返回数据
public void a1(String name, HttpServletResponse response) throws IOException {
System.out.println("a1:参数"+name);
if ("张三".equals(name)){
response.getWriter().write("true");
}else {
response.getWriter().write("false");
}
}
}
2.利用Ajax实现不刷新页面验证用户名功能
- 前端代码
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>书籍展示</title>
</head>
<%--BootStrap美化页面--%>
<link href="https://cdn.staticfile.org/twitter-bootstrap/
3.3.7/css/bootstrap.min.css" rel="stylesheet">
<%--JQuery--%>
<script src="${pageContext.request.contextPath}/static/
js/jquery-3.3.1.js"></script>
<%--通过ajax实现不用刷新页面完成用户名验证--%>
<script>
function a1() {
$.get({
url:"${pageContext.request.contextPath}/allUser",
//根据id选择器选取用户输入的值传递给后端
data:{"name":$("#name").val()},
//接收后端处理后的数据【msg】
success:function (data) {
if (data.toString()==="ok"){
// 获取userInfo并更改样式
$("#userInfo").css("color","green");
$("#userInfo").html(data);
}else {
$("#userInfo").css("color","red");
$("#userInfo").html(data);
}
}
})
}
</script>
<body>
<div class="col-md-4 column" >
<form action="/login" method="post">
<p>
<%--用户失去焦点会触发a1事件--%>
用户名:<input name="userName" id="name"
class="form-control" placeholder="请输入用户名" onblur="a1()" required>
<span id="userInfo"></span>
</p>
<p>
密码:<input type="password" name="password"
class="form-control" placeholder="请输入密码" required>
</p>
<div align="center">
<input type="submit" class="btn btn-primary" value="登录">
</div>
</form>
</div>
</body>
</html>
- 后端代码
@ResponseBody
@RequestMapping("/allUser")
public String allUser(String name){
//name是接收前端用户输入的
List<User> users = userService.allUser();
String msg="";
for (User user : users) {
System.out.println(user.getUserName());
if (name.equals(user.getUserName())){
msg="ok";
return msg;
}
}
msg="false";
System.out.println("msg-->"+msg);
return msg;
}
输入数据库存在的用户名时
输入数据库不存在的用户名时