Ajax技术
原始的网页开发方式是前后端合一的,代码写在一起,我请求一个地址,服务器就以相应正文的形式返回给我一个页面。Ajax的出现就改变了这一现象,我们可以借此获取所需的特定数据,在不重载整个页面的情况下进行数据更新。
Ajax为什么可以异步
同步:
当用户发起请求时,如果后端服务器没有返回数据,此时用户页面无法展现. 一直出于加载的状态 (整个页面同时刷新)
异步原因: 有Ajax引擎
步骤:
- 用户将请求发送给Ajax引擎. 之后JS继续向下执行.
- Ajax引擎接收用户请求之后,通过代理的方式访问后端服务器.
- 后端服务器接收请求之后,执行业务操作,最终将响应的结果返回值代理服务器(Ajax引擎)
- 引擎通过回调函数的方式返回给用户数据
ajax请求注意事项
用对象接收而不使用@RequestBody注解情况
/**
* 需求: 查询name=tomcat age=18 sex=女的用户
* 要求使用:restFul
* URL: http://localhost:8090/user/tomcat/18/女
* restFul的优化:
* 如果{参数名称}与对象中的属性名称一致,
* 则SpringMVC动态的为对象赋值,
* @PathVariable 可以省略
* 注意事项:
* 前后端的参数的传递必须保持一致!!!!
*/
@GetMapping("/user/{name}/{age}/{sex}")
public User restGetUser(User user){
//执行后续的业务操作 userService
return user;
}
/**
* URL: http://localhost:8090/getUserByUser?id=1&name="张三"
* 参数: user对象的数据
* 返回值: User
*/
@GetMapping("/getUserByUser")
public User getUserByUser(User user){
//1.SpringMVC如果解析到参数是对象 先获取其中的Get方法
// getId()/getName()......
//2.将方法get去除首字母小写~~~id1111/name/age/sex
//3.实例化一个User对象之后调用setxxx()方法实现赋值
//4.最终方法中获取一个实例化的User对象
//String id = request.getParameter("id");
return user;
}
JSON嵌套
JS中循环写法
基础循环写法
//JS可以将接收的JSON串动态转化为JS对象
$.get(url,function(data){
//循环遍历返回值
for(var i=0; i<data.length;i++){
console.log(data[i])
}
})
in关键字
//JS可以将接收的JSON串动态转化为JS对象
$.get(url,function(data){
//循环遍历返回值
//in 遍历数组下标
for(index in data){//从0开始
console.log(data[index])
}
})
of 关键字
//JS可以将接收的JSON串动态转化为JS对象
$.get(url,function(data){
//循环遍历返回值
//of 关键字 直接获取遍历对象
for(user of data){
console.log(user)
}
})
Ajax获取远程数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户列表demo</title>
<!-- html是一种解释执行的语言 -->
<!-- 导入JS函数类库 -->
<script src="jquery-3.6.0.min.js"></script>
<script>
//让页面加载完成之后,再次调用
//编程方式: 函数式编程
$(function(){
/**
* 常见Ajax写法:
* 1.$.ajax({})
* 2.$.get() get类型
* 3.$.post()
* 4.$.getJSON()
*/
/**
* 语法说明:
* $.get(url,data,function(data){},dataType)
* 参数说明:
* 1.url: 请求服务器的网址
* 2.data: 前端向服务器传递的参数 字符串
* 3.回调函数: 请求成功之后开始回调
* 4.dataType: 返回值结果的数据类型. 可以省略自动判断
*
*/
var url = "http://localhost:8090/getAll"
/**
* 关于data语法: id=100 name="tom"
* 写法: 25上课!!!!
* 1.JS对象写法
* {id:100,name:"tom"}
* 2.字符串拼接
* id=100&name=tom
*/
//var data = "id=100&name=tom"
var data = {id:100,name:"tom"}
//JS可以将接收的JSON串动态转化为JS对象
$.get(url,function(data){
//循环遍历返回值
//of 关键字 直接获取遍历对象
for(user of data){
//获取数据信息
var tr =
`<tr align="center">
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
<td>${user.sex}</td>
</tr>`
//将tr标签追加到表格中
$("#tab1").append(tr)
}
})
})
/**
* 传统Ajax 功能强大
*/
$.ajax({
url: "http://localhost:8090/getAll",
type: "get",
data: {id:100,name:"tomcat"},
success: function(data){
console.log(data)
},
error: function(data){//浏览器的返回值
console.log(data)
},
async: true //默认为true 异步 false 同步调用
})
/*
1. 基本循环
for(var i=0; i<data.length;i++){
console.log(data[i])
}
2.in 关键字
for(index in data){
console.log(data[index])
}
*/
</script>
</head>
<body>
<table id="tab1" border="1px" align="center" width="80%">
<tr>
<td colspan="4" align="center"><h1>用户列表</h1></td>
</tr>
<tr>
<td align="center">编号</td>
<td align="center">姓名</td>
<td align="center">年龄</td>
<td align="center">性别</td>
</tr>
<!-- <tr>
<td align="center">111</td>
<td align="center">发到付</td>
<td align="center">333</td>
<td align="center">人呀</td>
</tr> -->
</table>
</body>
</html>
同源策略
览器的地址与Ajax请求地址如果满足 HTTP请求协议/请求的域名/端口号 要求3项必须相同则满足同源策略
跨域解决策略
JSONP
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的
核心知识: 利用 <script src属性=“获取远程服务器数据”> 实现跨域访问.
CORS 跨域资源共享
跨域资源共享( CORS ) ,通过Http 响应头 信息标识哪些网址可以访问服务器.现在几乎所有的浏览器默认支持CORS. 在请求之前会进行"预检" 如果预检成功,则在一段时间之后无需校验(30分钟).