AJAX是什么
1.1Ajax简介
全称Asynchronous JavaScript And XML ,异步的JS和XML.
可以通过Ajax在浏览器去中向服务器发送异步请求,无刷新获取数据,按需加载.Ajax不是语言而是现有技术的组合而成的新使用方式.
1.2Ajax本质
Ajax是jQuery框架提供的一个前端和后端交互的方法,通过Ajax方法能够实现将数据传递到后端,然后自己定义成功传入数据后的网页的变化,其中请求和回复都是页面局部进行.
ajax = 传递数据 + 自己定义的方法
额外:1.4HTTP协议
http协议:超文本传输协议,一种约定,对请求和响应进行了提前规定.
request:
组成:
行: get/post /s?ie=utf-8... http/1.1(http的版本)
头: host:... Cookie:... Content-type:...
空行: (无内容)
体: username=admin&password=123(get情况/post可为空)
response:
行: http/1.1 200(响应状态码)
头: Content-type:... Content-length:... Content-encoding:...
空行: (无内容)
体: <html>...</html>
额外:1.2XML简介
可扩展的标记语言,用来传输和存储数据,与HTML相似,但都是预定标签,通过标签来判断做什么.
使用Ajax
1.导入jQuery框架(cdn或者本地导入)
2.编写对应处理的Controller,返回消息或者字符串或者json格式的数据.
3.编写ajax请求
- url:Controller请求
- data:键值对
- success:回调函数
4.给ajax绑定事件:点击,失去焦点,键盘弹起
ajax方法的主要参数解释:
- url:请求发送过去的地址,
(将数据包装成符合http协议的请求体,将其发送到对应的地址,这个地址对应的servlet或者controller会获得此请求体执行操作) - type:要求为String类型的参数,请求方式(post或get)默认为get
- success:执行url成功后的回调函数(执行成功后就会执行的函数),其中有两个参数,
data:封装了服务器的返回的数据
status:状态
总结一下ajax的使用格式
$.ajax({
url:"${pageContext.request.contextPath}/与对应的Controller的连接",
data:{"与对应的Controller参数相同":前端获得的数据},
success:function(){//回调函数可以将data,status作为参数
//成功后要执行的前端代码
}
})
$.post("url",data,funcation(){//成功后要执行的前端代码})
//其中只有url参数必定要放入函数.
应用一:文本框输入和后他相同的正确值后执行输出true/false
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%-- 注意导入JQuery是需要相对路径的,否者会找不到--%>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js">
</script>
<script>
function a(){
//将文本框输入的值发送给服务器,服务器返回数据
//获得文本框数据
let username = document.getElementById('username').value;
//用jQuery中的Ajax方法将数据发送到对应的URL
$.ajax({//ajax方法默认提交方式是get请求,可以添加参数 type:post改为post,或者直接换成post
url: "${pageContext.request.contextPath}/a1",
data: {"name":username},
success:function (data,status){
console.log(data);
console.log(status);
}
})
$.post({
url:"${pageContext.request.contextPath}/a1",
data:{"name":$("#username").val()},
success:function (data){
alert(data);
}
})
}
</script>
</head>
<body>
<%--οnblur="a()":失去焦点就执行函数a()--%>
用户名:<input type="text" id="username" οnblur="a()">
</body>
</html>
对应的Controller
@Controller
public class AjaxController {
@RequestMapping("/a1")
public void a1(String name, HttpServletResponse response) throws IOException {
System.out.println("a1:param:"+ name);
if("ccc".equals(name)){
response.getWriter().print("true");
}else {
response.getWriter().print("false");
}
}
}
应用二:点击按钮获得数据
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
<title>数据展示</title>
</head>
<body>
<input type="button" id="btn" value="获取数据">
<table style="width: 80%;align-content: center">
<tr>
<td>姓名1</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
</tbody>
</table>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<%--在jsp文件中单独自闭合没有效果,会报错--%>
<script>
let btn = document.getElementById('btn');
console.log("aaa");
btn.onclick = function (){
console.log("bbb");
//ajax的另外的参数写法
$.post("${pageContext.request.contextPath}/a2",function (data){
console.log(data);
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].sex+"</td>"+
+"</tr>";
}
$("#content").html(html);
})
}
</script>
</body>
</html>
对应的Controller
@Controller
public class AjaxController {
public List<User> a2(){
ArrayList<User> userList = new ArrayList<>();
userList.add(new User("aaa",1,"男女"));
userList.add(new User("bbb",1,"男女"));
userList.add(new User("ccc",1,"男女"));
return userList;
}
}
**应用三:**判断输入的账户密码是否正确
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
function a1(){
$.post({
url:"${pageContext.request.contextPath}/a3",
data:{"name":$("#name").val()},
success:function (data){
if(data.toString()==='ok'){
$("#userInfo").css("color","green");
}
$("#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");
}
$("#pwdInfo").html(data)
}
})
}
</script>
</head>
<body>
<p>
user:<input type="text" id="name" οnblur="a1()">
<span id="userInfo"></span>
</p>
<p>
pwd:<input type="text" id="pwd" οnblur="a2()">
<span id="pwdInfo"></span>
</p>
</body>
</html>
对应的Controller
@Controller
public class AjaxController {
@RequestMapping("/a3")
@ResponseBody
public String a3(String name,String pwd){
String msg = "";
if(name != null){
if("admin".equals(name)){
msg="ok";
}else {
msg="用户名有误";
}
}
if(pwd != null){
if("123".equals(pwd)){
msg="ok";
}else {
msg="密码有误";
}
}
return msg;
}
}