ajax中的同步和异步

最新推荐文章于 2023-06-23 16:08:14 发布

程宇寒

最新推荐文章于 2023-06-23 16:08:14 发布

阅读量370

点赞数

CC 4.0 BY-SA版权

文章标签： ajax 同步和异步 web开发前端开发 javaScript

本文链接：https://blog.youkuaiyun.com/czh500/article/details/108107875

<!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 {

	}

}