js的原生态的Ajax异同步

最新推荐文章于 2022-08-21 17:41:25 发布

小猴子豆芽菜

最新推荐文章于 2022-08-21 17:41:25 发布

阅读量671

点赞数 1

分类专栏： Ajax 文章标签： Ajax 异步同步

本文链接：https://blog.csdn.net/XU906722/article/details/79601820

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

了解Ajax之前必须先知道什么是同步，什么是异步。

同步：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待、卡死状态。

异步：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。

Ajax运行原理：

页面发出请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器，在这段时间里，客户端可以进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

接下来通过一个入门小程序更直观的体验一下异步与同步的区别之处。

html

<!DOCTYPE html>
<html>
  <head>
    <title>Ajax异步与同步区别</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <script>
    
    	//Ajax异步响应
    	function fn1(){
    		// 1.创建Ajax引擎对象
    		var xmlHttp=new XMLHttpRequest();
    		// 2.绑定监听
    		xmlHttp.onreadystatechange=function(){
    			if(xmlHttp.readyState==4 && xmlHttp.status==200){
    				// 5.接收响应数据
    				var responseValue=xmlHttp.responseText;
    				document.getElementById("input1").value=responseValue;
    			}
    		}
    		// 3.绑定地址
    		xmlHttp.open("GET","/WEB/ajaxServlet?name=Tom",true);//true：异步；false：同步
    		// 4.发送请求
    		xmlHttp.send();
    	}
    	
    	//Ajax同步响应
    	function fn2(){
    		// 1.创建Ajax引擎对象
    		var xmlHttp=new XMLHttpRequest();
    		// 2.绑定监听
    		xmlHttp.onreadystatechange=function(){
    			if(xmlHttp.readyState==4 && xmlHttp.status==200){
    				// 5.接收响应数据
    				var responseValue=xmlHttp.responseText;
    				document.getElementById("input2").value=responseValue;
    			}
    		}
    		// 3.绑定地址
    		xmlHttp.open("GET","/WEB/ajaxServlet?name=Rose",false);//true：异步；false：同步
    		// 4.发送请求
    		xmlHttp.send();
    	}
    </script>
  </head>
  
  <body>
	<input type="button" value="异步响应" οnclick="fn1()"><input type="text" id="input1">
	<br><br>
	<input type="button" value="同步响应" οnclick="fn2()"><input type="text" id="input2">
	<br><br>
	<input type="button" value="测试按钮" οnclick="alert('异步响应时可以进行其他操作')">
	<span>异步响应时可以进行其他操作,同步则不能进行其他操作</span>
  </body>
</html>

AjaxServlet.java

package ajax;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取请求参数
		String parameter = request.getParameter("name");
		
		//为了更好地演示异步与同步的区别，让线程睡眠5秒
		try {
			Thread.sleep(5000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		
		//响应请求
		response.getWriter().write(parameter);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

执行效果：