ajax的同步和异步

同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。 
而异步则这个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 和success的官方的解释:

async 
Boolean 
Default: true

By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

success 
Function

A function to be called if the request succeeds. The function gets passed two arguments: The data returned from the server, formatted according to the 'dataType' parameter, and a string describing the status. This is an Ajax Event.

 

在这里,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(),也就是说,在这个时候出现两个线程,我们这里暂且说为function1() 和function2()。

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

<think>我们被要求回答关于AJAX同步异步的区别及工作原理的问题。根据引用资料,我们可以总结如下:1.**同步请求(Synchronous)**:-发送一个请求后,必须等待服务器响应结束(即请求完成)才能发送下一个请求。-在等待期间,用户不能进行其他操作,整个页面会被锁定(阻塞),用户体验较差。-同步请求会刷新整个页面。2.**异步请求(Asynchronous)**:-发送一个请求后,不需要等待服务器响应,可以继续发送其他请求。-通过回调函数处理服务器的响应,实现局部刷新(只更新页面的部分内容),不会阻塞用户操作。-用户体验更好,因为页面不会完全刷新,用户可以在等待服务器响应的同时继续与页面交互。**工作原理**:-AJAX通过`XMLHttpRequest`对象(现代浏览器中也可以用`fetch`API)与服务器进行异步通信。-基本步骤(四步操作):1.创建`XMLHttpRequest`对象。2.设置请求方法URL,并指定是否异步(通过`open`方法的第三个参数,`true`表示异步,`false`表示同步)。3.设置回调函数(通过`onreadystatechange`事件),在请求状态改变时处理响应。4.发送请求(`send`方法)。在回调函数中,我们检查请求的状态(`readyState`)响应的状态码(`status`),当请求完成且成功时(`readyState`为4,`status`为200),我们可以获取响应数据并更新页面的部分内容。**引用说明**:-引用[1][3]解释了同步异步的基本概念以及区别。-引用[3][4]详细描述了AJAX的工作原理,包括四步操作。-引用[2][5]提供了更多关于使用场景代码实现的信息。现在,我们按照要求生成相关问题。</think>### AJAX同步异步的区别及工作原理 #### **同步请求(Synchronous)** 1. **工作原理**: 发送请求后,浏览器会**阻塞用户操作**,必须等待服务器返回完整响应才能继续执行后续代码。期间页面处于“冻结”状态。 代码示例: ```javascript let xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data', false); // 第三个参数false表示同步 xhr.send(); console.log(xhr.responseText); // 需等待响应完成后才执行 ``` 2. **核心特点**: - 阻塞式交互,用户体验差 - 刷新整个页面 - 适用场景:需严格顺序执行的操作(如支付确认)[^3][^5] --- #### **异步请求(Asynchronous)** 1. **工作原理**: 通过事件驱动模型实现非阻塞通信: - 创建`XMLHttpRequest`对象 - 绑定`onreadystatechange`回调函数 - 服务器返回数据后触发回调,局部更新DOM ```javascript let xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data', true); // true表示异步 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("content").innerHTML = xhr.responseText; // 局部刷新 } }; xhr.send(); console.log("请求已发送,无需等待"); // 立即执行 ``` 2. **核心特点**: - 非阻塞式交互,用户可继续操作页面 - 仅刷新局部内容(如动态加载评论) - 通过回调函数/`Promise`处理响应[^1][^4] --- #### **关键区别总结** | **特性** | 同步请求 | 异步请求 | |----------------|----------------------------|----------------------------| | **用户体验** | 页面卡顿,操作被阻塞 | 流畅,用户可继续交互 | | **刷新范围** | 整个页面重载 | 局部DOM更新 | | **代码执行** | 顺序执行,需等待响应 | 非阻塞,回调函数处理结果 | | **适用场景** | 强依赖顺序的操作(如表单提交)| 动态加载数据、实时搜索等[^2] | #### **AJAX技术本质** 基于`XMLHttpRequest`对象(或现代`fetch API`),利用JavaScript在后台与服务器交换数据,实现**无刷新更新页面**。其异步模式通过事件循环机制实现:当主线程发送请求后,由浏览器网络线程处理通信,响应到达后通过回调函数通知主线程[^4][^5]。 > 优势:提升用户体验,减少带宽消耗; > 局限:增加服务器压力,SEO不友好[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值