Ajax初体验
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
- AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
-
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
简单来说ajax是一种异步刷新的方法。在不使用异步刷新的情况下，如果数据更新至前端，我们之恶能做重定向或者转发，这样会使整个页面刷新。而ajax就做到了在不刷新整个页面的情况下，请求并更新数据（比如百度的搜索框）。
image.png
伪造ajax
前端中的iframe标签有类似与ajax的效果。下面是一个简单的iframe展示，在文本框中输入对应的域名，就会在iframe框中显示。
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe 体验</title>
<script>
function go(){
var url = document.getElementById("url").value;
document.getElementById("iframe1").src = url;
}
</script>
</head>
<body>
<div>
<p>请输入地址:</p>
<input type="text" value="http://www.baidu.com" id="url">
<input type="button" onclick="go()">
</div>
<div>
<iframe id="iframe1" style="width: 100%;height: 500px"></iframe>
</div>
</body>
</html>
效果展示:
image.png
ajax初体验
上面的iframe虽然在效果上与ajax比较向，但是不一样。上面的iframe是把整个的网页（比如bing的网页）加载过来了，而不是通过xhr请求（异步请求，区别于get，post等请求）请求一个数据（json数据）。下面开始ajax的初操作。我们使用jquery进行ajax开发。
- 下载jquery
在官网下载jquery
下载jquery
导入到项目静态资源目录
项目结构
下面展示一个简单的ajax小demo:
前端：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="${pageContext.request.contextPath}/static/js/jQuery3.60.js"></script>
<%-- jquery成功导入后，$就指代jQuery，这两个写谁都行--%>
<script>
function a(){
$.post({
url:"${pageContext.request.contextPath}/a1",
data:{"name":document.getElementById("username").value},
success:function (data){
alert(data);
}
});
}
</script>
</head>
<body>
<%-- 失去焦点的时候，发起一个请求到后端--%>
<span>用户名: </span>
<input type="text" id="username" onblur="a()">
</body>
</html>
后端控制器：
//使返回的数据为字符串
@RestController
public class AjaxController {
@RequestMapping("/hello")
public String test(){
return "hello";
}
@RequestMapping("/a1")
public String a1(String name, Model model){
System.out.println("a1:name==> " + name);
if ("yangsir".equals(name)){
return "true";
}else{
return "false";
}
}
}
在文本框中输入用户名字，如果名字为"yangsir"返回true，否则返回false。
ajax异步加载数据
编写请求，使得返回json数据：
@RequestMapping(value = "/a2", produces="application/json;charset=UTF-8")
public List<User> a2(){
List<User> users = new ArrayList<User>();
//添加数据
users.add(new User("yangsir",15,"男"));
users.add(new User("yangsir",18,"女"));
return users;
}
里面的user类自己编写一下吧，很简单。这里有个坑需要注意，虽然springMVC的驱动和默认是可以处理返回json数据的（默认jackson），但是一定得导入jackson的包才行。导入相关依赖：
<dependencies>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.13</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.0</version>
</dependency>
</dependencies>
编写前端:
test2.jsp:
<%--
Created by IntelliJ IDEA.
User: yangsir
Date: 2022/2/25
Time: 9:07
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/static/js/jQuery3.60.js"></script>
<script>
function a(){
$.post("${pageContext.request.contextPath}/a2",function (data){
var 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);
$("#content").html(html);
})
}
</script>
</head>
<body>
<input type="button" value="加载数据" id="btn" onclick="a()">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
</tbody>
</table>
</body>
</html>
该页面的功能是使用他变了显示从"/a2"处获取到的数据。
效果展示：
image.png
