Ajax之异步同步请求

￡神魔★判官ぃ 2022-05-20 06:53 255阅读 0赞

# 同步、异步 #

ajax对象.open（方式get/post，url地址，\[异步true\]同步false）；

ajax是可以与服务器进行（异步或同步）交互的技术之一。

异步：同一个时间点允许执行多个进程。

同步：同一个时间点只允许执行一个进程。

**服务器端04.php：**

<?php
    
    echo "computer";

**同步请求：**

**客户端04async.html：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ajax同步</title>
    	<script type="text/javascript">
    	alert(1234);
    	</script>
    </head>
    <body>
    	<img src="./1.png" alt="" width="400" height="300">
    </body>
    </html>

**实现效果：**

![70][]![70 1][]

**异步请求：**

**客户端05async.html：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>ajax同步</title>
    	<script type="text/javascript">
    		var xhr = new XMLHttpRequest();
    		xhr.onreadystatechange = function(){
    			if (xhr.readyState==4) {
    				alert(xhr.responseText);
    			}
    		}
    		xhr.open('get', './04.php', true);//异步请求
    		//xhr.open('get', './04.php', false);//同步请求
    		xhr.send(null);
    	</script>
    </head>
    <body>
    	<img src="./1.png" alt="" width="400" height="300">
    </body>
    </html>

**实现效果：**

![70 2][]

![70 3][]

异步请求只是给用户视觉上的同时呈现，但是若ajax请求响应或img响应时间不一致也会出现先后顺序，只是同一时间点多个进程同时执行。

# 什么时候使用同步请求？ #

ajax绝大多数情况下进行异步请求，但是有的时候也要使用“同步请求”（其不能取代）。

例如页面有两部分内容，ajax请求内容和正常的html内容输出，如果html的输出内容包括ajax请求的内容，就需要使用ajax请求完成了再进行html内容的输出，这样就要设置两者一前一后调用（而非同时调用），既要进行同步请求。

[70]: https://img-blog.csdn.net/20180714104713576?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RGRjE5OTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220520/8438fd04a04e408f8cfbfb7db0e4fff4.png
[70 2]: /images/20220520/0b38d8e994a3448aa6cb975c047130e3.png
[70 3]: /images/20220520/974defb9a8b24f62b41ba45ff159adb7.png