1. 什么是Ajax技术
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
- 传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
- 使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
利用Ajax可以做：
- 注册时，输入用户名自动检测用户是否已经存在。
- 登陆时，提示用户名密码错误
- 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
…等等
2. 伪造Ajax
可以使用前端的iframe标签来伪造一个ajax的样子
1、新建一个项目，构建web模块
2、编写一个 ajax-frame.html 使用 iframe 测试，感受下效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>zz</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
let myDate = new Date();
document.getElementById('currentTime').innerText = myDate.getTime();
};
function LoadPage(){
let targetUrl = document.getElementById('url').value;
console.log(targetUrl);
document.getElementById("iframePosition").src = targetUrl;
}
</script>
<div>
<p>请输入要加载的地址：<span id="currentTime"></span></p>
<p>
<input id="url" type="text" value="https://www.pku.edu.cn/"/>
<input type="button" value="提交" onclick="LoadPage()">
</p>
</div>
<div>
<h3>加载页面位置：</h3>
<iframe id="iframePosition" style="width: 50%;height: 300px;"></iframe>
</div>
</body>
</html>
3、配置Tomcat测试
可以看出，只有加载页面位置区域局部更新页面，其余区域不变。
3. Ajax相关测试
用以下两种均可实现Ajax
- jQuery ：用的比较多
- axios ：vue推荐使用 axios
在这里使用 jquery
1. 失去焦点(鼠标离开输入框)触发一个ajax请求
页面ajax01.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<html>
<head>
<title>Title</title>
<!--注意：script标签不要自闭合-->
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
百度：<input type="text" id="baidu" onblur="baidu()">
<script>
function baidu() {
// 失去焦点触发一个ajax请求
alert("ajax请求")
}
</script>
</body>
</html>
测试
鼠标先点击输入框，再移动离开输入框，即失去焦点
2. 失去焦点触发一个ajax请求，后台返回ok，显示测试成功
控制类AjaxController
package com.zz.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class AjaxController {
@RequestMapping("/a2")
public String ajax(String name){
System.out.println(name);
return "ok";
}
}
页面ajax02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
百度：<input type="text" name="name" id="baidu" onblur="baidu()">
<script>
function baidu(){
// 失去焦点触发一个ajax请求
$.post({
url:'/a2',
data:{name:$("#baidu").val()},
//成功的回调函数
success:function (data,status) {
console.log(data)
console.log(status)
}
});
}
</script>
</body>
</html>
测试
3. 失去焦点触发一个ajax请求，后台返回一个集合对象
控制类AjaxController
@RequestMapping("/aj2")
public List<User> ajax2(String name){
User user1 = new User("铁牛1", 18, "女");
User user2 = new User("铁牛2", 18, "男");
User user3 = new User("铁牛3", 18, "女");
User user4 = new User("铁牛4", 18, "男");
User user5 = new User("铁牛5", 18, "女");
User user6 = new User("铁牛6", 18, "男");
List<User> users = Arrays.asList(user1, user2, user3, user4, user5, user6);
return users;
}
同时把页面ajax02.html中的地址改成 /aj2
测试
4. 触发一个事件，数据回显到前端界面
页面ajax03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<input type="button" id="btn" value="点击"/>
<table width="70%" border="1px" align="center">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
<!--应该从后台自动刷新数据过来-->
</tbody>
</table>
<script>
$('#btn').click(function(){
//post(url,data,success的回调函数)
$.post("/aj2",function (data){
console.log(data);
//基本的dom操作
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>
测试
