ajax中的同步和异步

怼烎@ 2022-11-29 11:17 149阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>ajax中的同步和异步</title>
    <link rel="stylesheet" type="text/css" href="../css/body.css" />
    <link rel="stylesheet" type="text/css" href="../css/mark.css" />
    <link rel="stylesheet" type="text/css" href="../css/input2.css" />
    <link rel="stylesheet" type="text/css" href="../css/console.css" />
    </head>
    <body>
    <h1>ajax中的同步和异步</h1>
    <h3>ajax的本质就是，发送http请求的工作交给js中的XMLHttpRequest对象去做</h3>
    <h1>同步和异步的区别</h1>
    <h3>简而言之：异步不阻塞后面代码的执行,同步会阻塞后面代码的执行</h3>
    </body>
    <script type="text/javascript">
    //
    function fn1(){
    	var xhr = new XMLHttpRequest();
    	xhr.onreadystatechange = function() {
    		if(this.readyState == 4 && this.status == 200){
    			alert('服务端返回的内容：' + this.responseText);
    			}
    		}
    	var url = '/ajax/asynchronous';
    	//true表示异步
    	xhr.open('get', url, true);
    	//false表示同步
    // 	xhr.open('get', url, false);
    	xhr.send(null);
    }
    
    function fn2(){
    	alert('duang.....duang.....');
    }
    
    fn1();
    fn2();
    </script>
    </html>

package com.jiongmeng.ajax;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * 测试同步和异步的区别
     */
    @WebServlet("/asynchronous")
    public class Asynchronous extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		response.setContentType("text/html;charset=UTF-8");
    		PrintWriter pw = response.getWriter();
    		double randomNumber = Math.random();
    		try {
    			//故意睡眠3秒，模拟网络慢的情况
    			Thread.sleep(3000);
    		} catch (InterruptedException e) {
    			e.printStackTrace();
    		}
    		System.out.println("随机数：" + randomNumber);
    		pw.print("随机数：" + randomNumber);
    		pw.flush();
    		pw.close();
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    	@Override
    	public void init(ServletConfig config) throws ServletException {
    
    	}
    
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221124/6e901d9df7a24a76a5896d96cadd5552.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221124/2ab707c157c742b79a456bc53a6ff790.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221124/786830e120024f42958d9162101eae58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: /images/20221124/c9ea3b2556b64f7e8aa42dfdf3dee08a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: /images/20221124/af29f0b2713b4b85803ca9f503b31ad7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5]: /images/20221124/bf6250b078884428a4263c7c08a605f9.png