ajax的同步和异步问题

当一个页面有异步请求又有同步请求,页面是如何执行。例如,页面有3个同步请求,3个异步请求,是先显示什么,再显示什么?

下面代码里面有4个同步,2个异步,后端设置了2秒后返回数据。

window.onload = function(){
	ajax(‘http://127.0.0.1:8080/getasync‘,‘get‘,false,function(res){
		console.log(‘我是同步1‘+res)
	})
	ajax(‘http://127.0.0.1:8080/getasync‘,‘get‘,false,function(res){
		console.log(‘我是同步2‘+res)
	})
	ajax(‘http://127.0.0.1:8080/getasync‘,‘get‘,false,function(res){
		console.log(‘我是同步3‘+res)
	})
	ajax(‘http://127.0.0.1:8080/getasync‘,‘get‘,false,function(res){
		console.log(‘我是同步4‘+res)
	})
	console.log(‘我是同步后显示‘)
	ajax(‘http://127.0.0.1:8080/getasync‘,‘get‘,true,function(res){
		console.log(‘我是异步1‘+res)
	})
	ajax(‘http://127.0.0.1:8080/getasync‘,‘get‘,true,function(res){
		console.log(‘我是异步2‘+res)
	})
	console.log(‘我是最后显示‘)
}
function ajax(url,type,async,callback){
	var xhr = new XMLHttpRequest()
	xhr.onreadystatechange = function(){
		if(xhr.readyState==4 && xhr.status == 200){
			callback(xhr.responseText)
		}
	}
	xhr.open(type,url,async)
	xhr.send(null)
}

 

页面会先执行同步,再执行

同步:

单线程,相当于排队,当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码。

客户端请求(等待)->服务端处理->响应->页面载入

异步:

页面上的操作和服务器端的操作互相之间不会造成阻塞,例如:检查用户名是否重复。

 

ps:第一次写博客

原文地址:https://www.cnblogs.com/sosohui/p/10234840.html

时间: 2024-08-12 11:58:57

ajax的同步和异步问题的相关文章

Ajax的同步与异步

之前做项目中有遇到就是Ajax的同步与异步的问题,由于Ajax的async默认的设置值为true,属于异步.这个时候就会出现一个问题,就是2段代码如果有关联的话其有一个先后顺序执行的问题,我的下面的代码就是属于这种情况,当时老纠结为什么不是自己预期的效果,后来将async的属性值改为false后,属于同步.运行终于达到了预期的效果,经历过后还得记下来总结经验:

ajax的同步 和 异步

摘的: 一. 同步和异步的理解实际很简单,同步就代表一个请求对应一个响应对象,只有当这个过程完整个结束后,下一个请求才能进来, 异步就是执行当前请求的同时,其他请求也可以执行,其实概念和多线程执行时差不多的! 二. ajxa:  不写 async .则默认是async:true  异步 三. 1 同步:提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事 2 异步:请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕 1.一心一意:当前只

extjs Ext.Ajax.request 同步和异步

ext3.x 不支持ajax的同步请求,ext4就开始支持. 1 Ext.Ajax.request({ 2 url : '', 3 sync:true, 4 params : { 5 name : text.getValue() 6 }, 7 success : function(response, options) { 8 var responseArray = Ext.util.JSON.decode(response.responseText); 9 resultValue=respons

Ajax的同步和异步调用

jquery的async:false,这个属性 默认是true:异步,false:同步. $.ajax({ type: "post", url: "path", cache:false, async:false, dataType: ($.browser.msie) ? "text" : "xml", success: function(xmlobj){ } }); 有了这个属性可以相对的减少代码运行书序问题,但是如果用的太多

ajax中同步和异步

一.async值为true (异步) 当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程) 例如 $.ajax({             type:"POST",            url:"Venue.aspx?act=init",            da

如何理解ajax的同步和异步?

对于如下一段代码: var dataJson = {"ABC":'testABC'}; $.ajax({                url: "/MonkeyServlet",                async:false,                data:dataJson,                contentType: "application/json; charset=utf-8",              

jQuery中ajax的同步与异步

之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题.最近的项目用了到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除. 而异步则这个AJAX代码运行中的时候其他代码一样可以运行. jquery的async:false,这个属性 默认是true:异步,false:同步. $.ajax({ type: "post", url: "

Ajax 的同步与异步

1.Ajax的工作原理如图: 2.同步 XMLHttpRequest 对象用于和服务器交换数据. XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true: xmlhttp.open("GET","ajax_test.html",true); 通过 AJAX,JavaScript 无需等待服务器的响应,而是: 在等待服务器响应时执行其他脚本 当响应就绪后对响应进行处理 3.异步 如需使用 async

ajax的同步和异步问题 (转)

async默认的设置值为true,这种情况为异步方式,当ajax发送请求后,在等待server端返回的数据的过程中,程序会继续执行ajax块后面的代码,直到服务器返回正确的结果才会去执行success的方法,也就是说程序会从两个方向去执行脚本.在这个程序里,执行是这样的,执行ajax的success方法,另一方面执行脚本2.显然,不能得到想要的结果.因为,执行顺序的问题. 当把asyn设为false时,这时ajax的请求时同步的.这样的话,只有ajax请求成功之后,才会执行脚本2.也就是说,这个