Ajax
1、什么是Ajax
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML),使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互更强的Web应用程序的技术。
Ajax的核心是XMLHttpRequest对象,也就是XHR,XHR向服务器发送请求和解析服务器的响应,能够以异步的方式从服务器获取新数据。
jQuery提供多个与AJAX有关的方法,能够使用HTTP Get 和 HTTP Post从远程服务器上请求数据,同时能够把这些数据直接载入到网页的元素中展示。
jQuery不是生产者,而是大自然的搬运工。
jQuery Ajax本质就是XMLHttpRequest,对他进行了封装,方便调用。
增强B/S的体验性
2、Ajax可以做什么
- 注册时,输入用户名自动检测用户是否已经存在
- 登陆时,提示用户名密码错误
3、H5中使用Iframe理解Ajax(局部刷新)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪造Ajax</title>
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div>
<p>请输入要加载的地址</p>
<input type="text" class="linkAddress" value="https://www.baidu.com/">
<input type="button" id="addIframe" onclick="btnClick()" value="加载链接放入iframe">
</div>
<div>
<h3>加载页面地址</h3>
<iframe style="width: 100%; height: 500px" id="iframe"></iframe>
</div>
</body>
<script>
function btnClick(){
//获取text文本框中的值
const targetURL = $('.linkAddress').val();
//将text中指赋值给iframe的src路径
$('#iframe').attr('src', targetURL);
// 下面通过原生js也可以给iframe的src路径赋值
// document.getElementById("iframe").src = targetURL;
}
</script>
</html>
4、简单应用
页面有个文本框,输入文字后,文本框失去焦点,ajax会向url接口路径发起请求,后端处理后返回结果
1、编写页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.7.1.js"></script>
</head>
<body>
<%--onblur:鼠标失去焦点触发的事件--%>
<input type="text" id="txtVal" οnblur="pd()" placeholder="请输入文字">
<script>
function pd() {
<%--$.ajax默认是get请求--%>
$.post({
url:"${pageContext.request.contextPath}/ajax/a1",
// data为封装的参数,键值对的形式,key:value
data:{"txtVal":$('#txtVal').val()},
success: function (returnData) {
// returnData是接口返回的数据
alert(returnData);
}
});
}
</script>
</body>
</html>
2、编写后端
package com.smbms.servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String txtVal = req.getParameter("txtVal");
resp.getWriter().print("您好," + txtVal);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
3、效果
5、公式
- 原始写法
$.post({
url:"${pageContext.request.contextPath}/ajax/a1",
// data为封装的参数,键值对的形式,key:value
data:{"txtVal":$('#txtVal').val()},
success: function (returnData) {
// returnData是接口返回的数据
alert(returnData);
}
});
- 简写
$.post(
"${pageContext.request.contextPath}/ajax/a1",
{"param1":"value1","param2":"value2"},
function (returnData){方法体},"json"
);
6、实际应用
前端页面js编写
<script>
$.ajax({
url: "/mk/sendInfoToLowCodeAndFile",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(contractInfo),
success: function (returnData) {
console.log(returnData);
if(returnData.code === 200){
alert(returnData.msg);
window.location.href = "/index/success"
}else {
alert(returnData.msg);
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.error("Error: " + textStatus, errorThrown);
alert("请求失败,请稍后再试。");
}
});
</script>
后端接口接收
@RequestMapping("sendInfoToLowCodeAndFile")
public Result sendInfoToLowCodeAndFile(@RequestBody Contract contract) throws JsonProcessingException {
return sendInfoToLowCodeService.sendInfoToLowCodeAndFile(contract);
}