ajax同步与异步的坑

之前工作中一个需求,需要动态的添加一组下拉菜单并为这个菜单绑定一个插件,很明显获取数据用Ajax,这本身是没错的,坑就坑在我用了 同步请求,当服务器端正确返回数据时再去执行下一个方法,这逻辑本身没有问题。所以当我写完之后,我发现页面加载速度及其的慢,我删除了一些多余的和http请求,仍然不能解决这个问题,然后我突然想到了Ajax同步和异步的问题,改成异步之后页面数据加载就快了很多,希望能正确的使用同步和异步。

在Jquery中ajax方法中async用于控制同步和异步,当async值为true时是异步请求,当async值为fase时是同步请求。ajax中async这个属性,用于控制请求数据的方式,默认是true,即默认以异步的方式请求数据。

1、async值为true (异步)

当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的代码,直到server端返回正确的结果才会再去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)

2、async值为false (同步)

Ajax发出请求之后在等server端返回的过程中不会再执行任何代码,暂停在当前的请求中,直到server端正确返回数据之后,会先执行Ajax中success的回调方法,回调执行完成之后才会继续执行余下的代码。

原文地址:https://www.cnblogs.com/xieyao/p/8467920.html

时间: 2024-11-05 12:36:17

ajax同步与异步的坑的相关文章

ajax同步与异步的区别

jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除.而异步则这个AJAX代码运行中的时候其他代码一样可以运行. ajax中async这个属性,用于控制请求数据的方式,默认是true,即默认以异步的方式请求数据. 一.async值为true (异步) 当

jquery的ajax同步和异步的理解及示例

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

JQ Ajax 同步与异步的区别

$.ajax({ url: xml_addr, type: 'get', dataType: 'xml', timeout: 1000, //设定超时 cache: false, //禁用缓存 async:false,//同步(保证配置取出再执行其他的代码) error: function(xml) { console.log("读取xml出错"); }, success:function(xml) { $(xml).find("server").each(func

ajax 同步和异步的区别

举个例子:普通B/S模式(同步)AJAX技术(异步)同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕--------------------------------------------------------------------------------------------------------------------同步就是你叫我去吃饭,我听到了就和你去

AJAX同步和异步的区别

function paginationGo(page){ sendata = {"page":page}; $.ajax({ type:"POST", url:"newqc1.asp", async:true, timeout:10000, data:sendata, success:function(data){ //alert(data+"aa"); $("#qc01").html(data); },

ajax同步与异步的实践

写在前面:本文中所有测试实例皆基于mac版chrome, firefox及safari. 同步请求 同步请求,其实也就是告诉js引擎:你先把我这个处理了再做别的事情!所以同步无需等,在send()之后直接往responseText中拿数据就好. function req() { var xhr = new XMLHttpRequest(); xhr.open('get', './data.json',false); xhr.send(); console.log(xhr.responseText

ajax同步和异步的切换

ajax为网页提供了非常不错的异步机制,但是有时候两个ajax放在一起,希望第一个完成后再继续第二个ajax的执行.这时候可以将第一个ajax代码带上同步参数即可,如下: $.ajax({ async: false, //这里设置为false,为同步,不添加该语句为异步 type: 'POST', url: "/ADShiTis/AjaxDelete", data: { cid: $('#daCID').val(), }, dataType: "json" });

深入理解ajax同步和异步的区别

说明: 同步可以改变外部定义的变量值,异步可以提高加载效率 示例:a. 说明:b. 原代码: <script> var a = 0 function loadDoc(file,async=true){ if(window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{ // code for IE6, IE5 xmlhttp=new Ac

Ajax 是什么?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题

Ajax 是什么: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载. Ajax 的最大的特点: 1. Ajax可以实现动态不刷新(局部刷新) 2. readyState 属性 状态 有5个可取值: 0 = 未初始化,1 = 启动, 2 = 发送,3 = 接收,4 = 完成 Ajax 同步和异步的区别: 1. 同步:提交请求 -> 等待服务