java ajax同步 ajax同步请求

转载

ganmaobuhaowan 2023-10-09 07:15:44

文章标签 java ajax同步同步和异步 ajax同步和异步 ajax同步请求 ajax异步请求 文章分类 Java 后端开发

ajax同步请求和异步请求

前序
什么是同步请求？
什么是异步请求？
比较同步和异步请求

前序

最近好长时间没写博客了，主要由于前一段时间出差，没啥心思写，今天开始重新继续。进入主题，ajax的同步请求和异步请求，这个在前端面试中经常会出现的问题，在实际开发中也容易，有时候被疏忽了就会照成偶尔出现的问题。我们先来看一下，什么是同步请求，这里主要以jquery的ajax请求为例,后端示例使用的java。

什么是同步请求？

ajax同步请求，是指当前端通过ajax发送一个请求到服务端，JavaScript 会等到服务器响应就绪才继续执行。
jquery中怎么设置同步请求，这个就太简单了，不用啰嗦了吧，把async参数设置为false即可，默认是true

这里看一个例子：
前端代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="t1" />
		<button onclick="asynfalse()">同步请求</button>
		
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		function asynfalse(){
			$.ajax({
				type:"post",
				url:"http://localhost:8090/t1",
				async:false,
				success:function(data){
					$("#t1").val(data);
				}
			});
		}
	</script>

</html>

请求http://localhost:8090/t1这个接口时，我们让后端接口等待20秒钟后返回，我们会看到效果是等待很久才看到输入框赋值hello

java ajax同步 ajax同步请求_ajax同步和异步

什么是异步请求？

异步请求：ajax发送请求后，JavaScript 无需等待服务器的响应，继续执行接下来的代码，等到响应成功以后，执行响应的结果；

还是上面那个例子，我们改成异步，再加一句代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="t1" />
		<button onclick="asynfalse()">异步请求</button>
		
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		function asynfalse(){
			$.ajax({
				type:"post",
				url:"http://localhost:8090/t1",
				async:true,
				success:function(data){
					$("#t1").val(data);
				}
			});
			$("#t1").val('world！');
		}
	</script>

</html>

执行结果：

java ajax同步 ajax同步请求_同步和异步_02