一.Ajax介绍
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)是用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
1.特点: 局部刷新,异步访问
2.异步原理:
请求同步说明:
用户向服务器发起请求,如果服务器正忙,这时程序处于等待的状态.这时页面处于加载 ,同时用户不能操作.
为了让用户的体验更好,则一般采用异步.
异步原理:
4.步骤:
4.1. 用户发起Ajax请求, Ajax内部机制,将请求交给Ajax引擎处理.
4.2. Ajax引擎接收到用户的请求之后,重写发起一个新的请求.访问后端服务器.
4.3. 当服务器端接收到了 Ajax请求之后,完成业务处理.之后将数据响应给Ajax引擎.
4.4. Ajax引擎通过事先约定好的 回调函数, 将服务器数据 交还给用户.
4.5.用户在请求的过程中,可以完成自己的任务.
注意事项: 多个Ajax的请求 不关注顺序.
5.练习
5.1.编辑页面
<body>
<h1>Ajax请求练习</h1>
<!-- 使用步骤:
1.导入JS函数类库
2.发起Ajax请求,之后业务处理.
-->
<script src="../js/axios.js"></script>
<script>
axios.get("http://localhost:8090/vue1/findAll")
.then(function(promise){
console.log(promise)
console.log(promise.data)
})
</script>
</body>
5.2 在后端Controller类中开启跨域
二.axios请求方式
1.请求类型
1.get 执行查询业务
2.post 执行form表单提交(登录/新增)
3.put 执行修改操作
4.delete 执行删除业务
2.axios的语法
axios.get("url地址信息","参数信息")
.then(function(args){})
axios.get("url地址信息","参数信息").then(promise()=> { })
查找(get)
url: http://localhost:8090/vue1/findall
前端:axios.get ( url ).then(promise=>{ console.log(promise.data) })
后端:@GetMapping(" findall ")
删除(delete)
url: http://localhost:8090/vue1/deleteById?id=..
前端:axios.delete("deleteById"+user.id).then(promise =>{ console.log(promise.data)})
后端:@DeleteMapping("deleteById")
修改(put)
url:http://localhost:8090/vue1/updateById
前端:axios.put("/updateById",参数).then(promise =>{ })
后端:@PutMapping("updateById")
添加(post)
url:http://localhost:8090/vue1/saverUser
前端:axios.post("/saverUser",参数).then(promise=>{})
后端:@PostMapping("saverUser")
Axios简化操作
1.async-await关键字
说明:
1.1 async:用来标识函数
1.2 await: 用来标识请求
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios简化操作</title>
</head>
<body>
<h1>简化操作语法</h1>
<script src="../js/axios.js"></script>
<script>
//1.定义请求的前缀
axios.defaults.baseURL = "http://localhost:8090/vue"
//2.定义函数!!!!
async function findAll(){
//解构赋值操作
let {data: result} = await axios.get("/findAll")
console.log(result)
}
//3.调用函数
findAll()
</script>
</body>
</html>
async - await 是axios为了简化then()的一种全新的语法. 语法如此.该用法只能用到Ajax请求中.
.