Ajax异步加载
jsp涉及到的问题
- 每次哪怕是页面的局部修改，都会导致服务器重新获取，页面的所有信息，导致 jsp 页面的效率非常低下
- 前端 jsp 页面无法脱离服务器运行
- 前端和后端无法分离开发，开发效率低下
Ajax介绍
Ajax 是由谷歌开发，底层是通过 js 开发的技术，如果页面内容只是局部发生修改，不需要重新加载整个页面，而是局部加载，这个技术正是我们前后端分离的基础
前后端不分离图示（通过 Tomcat 进行处理）
前后端分离图示（反向代理实现前后端分离）
⭐反向代理通过 nginx 负载均衡来实现
hutool 工具包
导入工具包（maven 坐标）
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-json</artifactId>
<version>5.8.18</version>
</dependency>
VO 软件包介绍 + 一个小栗子
ViewObject 存放的是前端所需要所希望接收的数据对象，为前端进行服务，前端需要什么，这里就封装成什么样子
// 一个栗子
public class ResultVO<T> {
private boolean isOK;
/**
* 用于后端给前端传输的消息，类似存储响应编码等数据
*/
private String mess;
/**
* 后端需要返回给前端的数据
*/
private T t;
}
// js原生代码。。。极度繁琐且痛苦
let xmlHttp;
function check(){
// 获取表单输入值
let name = document.getElementById("name").value;
// 定义url路径，进行参数拼接
let url = "http://localhost:8080/checkName?name=" + name;
// 创建 Ajax 所需要的 xhr 对象
xmlHttp = new XMLHttpRequest();
// 定义 Ajax 请求的响应函数
xmlHttp.onreadystatechange=checkResult;
// 设置请求所发送的 url 和请求的 method
xmlHttp.open("GET",url,true);
// 利用 Ajax 对象向指定 url 发送请求，send() 代表请求所携带的参数
// 由于在上方已经拼接了参数，所以 send() 传参传null
xmlHttp.send(null);
// 如果没有提前拼接参数，则将数据以 js 的方式进行传递
// xmlHttp.send({"name":name});
}
// 响应函数
function checkResult(){
// readyState: 请求状态（0-请求未初始化，1-服务器连接已经建立，2-请求已经被接受，3-请求处理中，4-请求已经完成，并且响应已经就绪）
// status: 响应编码（200-ok，404-找不到服务器）
// responseText: 服务器返回的响应内容
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
// 反序列化
let jsonObject = JSON.parse(xmlHttp.responseText);
document.getElementById("checkResult").innerHTML = jsonObject.mess;
}
}
// 后台处理servlet
@WebServlet("/checkName")
public class CheckNameServlet extends HttpServlet {
private final CategoryService categoryService = new CategoryServiceImpl();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 参数接收
String name = req.getParameter("name");
// 获取分类集合
List<Category> categories = categoryService.list();
boolean flag = false;
loop:for (Category category : categories) {
if(category.getName().equals(name)){
flag = true;
break loop;
}
}
ResultVO vo = new ResultVO<>();
if(flag){
// 找到目标名
vo.setOK(true);
vo.setMess("存在目标信息");
}else{
// 没找到目标名
vo.setOK(false);
vo.setMess("没有找到匹配的信息");
}
// 将响应内容转换成 json 进行返回给 Ajax (借助响应对应的输出流)
resp.getWriter().write(JSONUtil.toJsonStr(vo));
}
}
Jquery ajax ---通过 Jquery 优化 js 原生代码
- $.ajax方式 ------ 好使，真滴好使！！！！！
$(function(){
$('#name').blur(function(){
// 设置url
let url = "checkName";
// 获取表单值
let value = $(this).val();
// 写 ajax 请求
$.ajax({
url:url,
// 严格遵守 JSON 格式
data:{"name":value},
// 设置请求方式，默认GET
method:"GET",
// 响应成功之后所对应的响应函数
// result:表示响应数据
success:function(result){
let jsObject = JSON.parse(result);
$('#checkResult').html(jsObject.mess);
}
})
})
})
- $.get方式 （专门用来发送 GET 请求）------ 没啥变化，就短了点，个人感觉还不如上边的
$(function(){
$('#name').blur(function(){
// 设置url
let url = "checkName";
// 获取表单值
let value = $(this).val();
// 写 get 请求
$.get(
url,
{"name":value},
function(result){
let jsObject = JSON.parse(result);
$('#checkResult').html(jsObject.mess);
}
)
})
})
- $.post方式 （专门用来发送 POST 请求）------ 和 $.get 大同小异，真心不如第一个好使吧，有一说一
$(function(){
$('#name').blur(function(){
// 设置url
let url = "checkName";
// 获取表单值
let value = $(this).val();
// 写 post 请求
$.post(
url,
{"name":value},
function(result){
let jsObject = JSON.parse(result);
$('#checkResult').html(jsObject.mess);
}
)
})
})
- 一行实现 ------ 什么玩意？一行。。。一坨答辩，又不清晰，又记不住，何必呢
$(function(){
$('#name').blur(function(){
$('#checkResult').load("checkName?name=" + $(this).val());
})
})