Ajax复习

最新推荐文章于 2023-05-13 21:40:40 发布

竹肖臣

最新推荐文章于 2023-05-13 21:40:40 发布

阅读量285

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_60232967/article/details/119960296

版权

一.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请求中.

                                    .

竹肖臣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax复习

axios请求方式一.请求类型1.get 执行查询业务2.post 执行form表单提交(登录/新增)3.put 执行修改操作4.delete 执行删除业务二.axios的语法axios.get("url地址信息","参数信息").then(function(args){})查找（get）url: http://localhost:8090/vue1/findall前端：axios.get ...
复制链接

扫一扫