`

ajax中的async属性值之同步和异步的区别

 
阅读更多

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

 

同步是指当JS代码加载到当前AJAX的时候,页面中其他的代码会停止加载,页面出现假死状态。只有当这个AJAX执行完毕后,才会继续运行其他代码页面,假死状态解除。而异步则是这个AJAX代码运行中的时候,其他代码一样可以运行。

 

一、async值为true (异步)

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

$.ajax({  
     type:"POST", 
     url:"Venue.aspx?act=init", 
     dataType:"html", 
     success:function(result){  // function1()
       f1(); 
       f2();  
     },
     failure:function (result) {  
       alert('Failed');  
     }
 }
 function2();

在上例中,当ajax块发出请求后,他将停留function1(),等待server端的返回,但同时(在这个等待过程中),前台会去执行function2()。

 

二、async值为false (同步)

当执行当前AJAX的时候,会停止执行后面的JS代码,直到AJAX执行完毕后时,才能继续执行后面的JS代码。

$.ajax({  
     type:"POST", 
     url:"Venue.aspx?act=init", 
     dataType:"html", 
     async: false,
     success:function(result){  // function1()
       f1(); 
       f2(); 
     },
     failure:function (result) {  
      alert('Failed');  
     }
 }
 function2();

 

当把asyn设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,他会等待在function1()这个地方,不会去执行function2(),直到function1()部分执行完毕。

 

分享到:
评论

相关推荐

    ajax中的async属性值之同步和异步及同步和异步区别

    jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现假死...

    jquery ajax属性async(同步异步)示例

    在使用jQuery AJAX进行开发时,开发者需要根据实际业务需求和用户体验要求来选择合适的async属性值。如果请求处理的时间较短,且对用户体验要求较高,应优先考虑使用异步请求。如果业务逻辑必须在请求完全完成之后...

    jQuery ajax 当async为false时解决同步操作失败的问题

    最后,由于最新的jQuery版本已经废弃了async属性,建议使用更现代的JavaScript技术栈和方法来处理异步操作。例如,可以使用Fetch API或者引入其他库如axios,这些新工具提供了更加强大和灵活的异步处理能力。

    解决ajax请求后台,有时收不到返回值的问题

    jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现

    ajax异步提交表单

    这里使用`alert(data.name)`显示返回的JSON对象中的`name`属性值。 ##### 5.6 错误处理 `error: function()`定义了请求失败时的处理函数。在这个例子中,只简单地弹出了一个警告框。 #### 六、总结 通过上述分析,...

    Ajax异步请求

    当`readyState`属性值为4(表示请求完成)且`status`属性值为200(表示成功)时,表明请求成功。 6. **处理响应**:在事件处理函数中,使用`responseText`或`responseXML`属性获取响应数据,并进行后续处理。 ### 3...

    jquery ajax同步异步的执行最终解决方案

    标题中的知识点包括“jquery ajax 同步异步执行”的解决方案,即通过设置`async`属性的不同值来控制AJAX请求是同步执行还是异步执行。描述部分讲述了同步执行的一个关键点,即在AJAX请求完成前,程序会等待,不会...

    Ajax请求中async:false/true的作用分析

    在Ajax请求中,async属性控制了请求的同步或异步行为。async属性可以设置为true(默认)或false。async属性决定了浏览器是等待Ajax请求完成后再继续执行后续代码(同步),还是在发送请求后立即继续执行后续代码...

    jQuery_ajax异步请求

    在IT领域,特别是Web开发中,异步请求是实现网页动态加载、提升用户体验的关键技术之一。本文将基于给定的代码示例,深入探讨jQuery的`$.ajax()`方法及其应用场景,帮助读者理解如何利用jQuery执行异步请求,以及...

    js异步方式手写(ajax原版)

    2. **设置请求属性**:如`open()`方法指定请求类型(GET、POST等)、URL和是否异步。 3. **发送请求**:通过`send()`方法发送请求。对于GET请求,直接发送空字符串;对于POST请求,可能需要传递数据。 4. **监听状态...

    jquery ajax 同步异步的执行示例代码

    在分析和使用jQuery进行AJAX调用时,常常会遇到同步和异步执行方式的选择。在同步AJAX请求中,浏览器会停止执行后续代码,直到AJAX请求完成后才会继续。而异步AJAX请求允许浏览器同时执行其他任务,不会阻塞后续代码...

    AJAX_技术总结_设计模式

    3. **打开连接**:调用 `open()` 方法,参数为请求方法、URL 和布尔值(true 表示异步)。 4. **发送请求**:调用 `send()` 方法,POST 请求时可能需要传递额外数据。 5. **监听状态变化**:通过 `...

    掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求

    在探讨Ajax和JavaScript如何发出异步请求之前,我们先简要回顾一下Web2.0的概念及其与传统Web1.0的区别。Web1.0时代,Web应用程序主要依赖于请求/响应模型,用户每次点击都会导致整个HTML页面的重新加载,这种过程...

    Ajax简介Ajax.API

    Ajax 的异步交互过程可以分为两种:同步交互和异步交互。 同步交互:提交请求—>等待服务器处理—>处理完毕返回这个期间客户端浏览器不能干任何事。 异步交互:请求通过事件触发—>服务器处理(这时浏览器仍然可以...

    ajax设置async校验用户名是否存在的实现方法

    在本篇中,我们将重点关注如何利用AJAX中的async属性来校验用户名(手机号码)是否已存在于数据库中,以及该属性的异步与同步行为对整个页面加载和操作流程的影响。 AJAX校验用户名的核心代码是一个名为checkRepeat...

    17jQuery异步ajax.docx

    在jQuery中,异步Ajax(Asynchronous JavaScript and XML)是实现网页动态更新和实时交互的关键技术。Ajax允许在不刷新整个页面的情况下,与服务器进行数据交换,提升用户体验。 在jQuery中,$.ajax() 方法是最基础...

    Ajax中文基础教程

    3. **打开连接**:调用open()方法,传入请求类型、URL和布尔值(异步或同步)。 4. **设置回调函数**:使用onreadystatechange事件监听状态变化,当状态变为4(表示请求已完成)且状态码为200(成功)时,处理返回的...

    ajax各个属性

    以上介绍了 AJAX 技术中 XMLHttpRequest 对象的主要方法和属性,它们是实现 AJAX 异步请求的核心。正确地使用这些方法和属性,可以帮助开发者更加高效地构建 AJAX 应用程序。在实际开发过程中,还需要根据具体需求...

    ajax基础学习资料

    而async/await则进一步提升了异步编程的可读性,使得Ajax请求如同同步代码一样编写。 8. **AJAX与前端路由**:在单页应用(SPA)中,Ajax常与前端路由结合,实现页面无刷新的切换,提高用户体验。 9. **安全问题**...

Global site tag (gtag.js) - Google Analytics