先来看以下代码:
var flag=true;
var index=0;
$.ajax({
url: "http://www.baidu.com/",
success: function(data){
flag=false;
}
});
while(flag){
index++;
}
alert(index);
请问最后alert的index的结果是多少?
可能有人会说0呗。实际上却没那么简单。大家可以自己试试看。可以看到最终程序进入了一个死循环!怎么会这样呢!
我们在看一段代码:
var flag=true;
$.ajax({
url: "http://www.baidu.com/",
success: function(data){
flag=false;
}
});
alert(flag);
大家看最后alert出flag的值是多少呢?没错,是true!为什么呢?明明我们在ajax请求成功了将flag设为false,怎么还是true呢?
这实际上是Ajax的异步机制造成的。
这里解释一下,同步和异步。js是单线程的,由于执行ajax请求会消耗一定的时间,甚至出现了网络故障而迟迟得不到返回结果;这时,如果同步执行的话,就必须等到ajax返回结果以后才能执行接下来的代码,如果ajax请求需要1分钟,程序就得等1分钟。如果是异步执行的话,就是告诉ajax代码“老兄,既然你迟迟不返回结果,我先不等你了,我还有一大堆代码要执行,等你执行完了给我说一下”。
Ajax默认是异步请求的,所以就出现了上面我们看到的结果。也就是ajax里面的代码还没有执行完,先执行了下面的代码。
那么如何使Ajax执行同步请求呢?这就需要设置async。代码如下:
var flag=true;
var index=0;
$.ajax({
url: "http://www.baidu.com/",
async:false,
success: function(data){
flag=false;
}
});
while(flag){
index++;
}
alert(index);
async默认是true,也就是异步,我们设置为false,即为同步。
分享到:
相关推荐
总结一下,解决js ajax同步请求造成浏览器假死的问题的关键在于理解浏览器单线程的特性及其在执行同步请求时会阻塞UI线程的行为。开发者可以通过使用异步请求或将耗时的请求操作放入setTimeout等JavaScript定时器中...
在JavaScript的世界里,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。AJAX的核心是利用XMLHttpRequest对象,它...
标题中提到的"extjs ajax同步请求所需js"是指ExtJS框架中用于执行同步Ajax请求的相关JavaScript代码。在ExtJS中,Ajax请求通常通过`Ext.Ajax`对象来实现。与传统的异步请求不同,同步请求会阻塞浏览器,直到请求完成...
javascript发送ajax请求,获取返回值res,async 同步/异步 var res = sendRequest({ url : "1.php", //necessary method : "post", params : { param1 : "123", param2 : "234" }, async : false });
**Ajax异步请求小结** Ajax(Asynchronous JavaScript and XML)是一种用于创建快速、动态网页的技术,它允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验,...
同步AJAX流程与异步基本一致,只是`open()`方法的第三个参数设为`false`,使得浏览器等待请求完成再继续执行后续代码。 总结来说,AJAX异步通信提供了更优秀的用户体验,因为它允许用户在等待服务器响应的同时进行...
本篇文章将深入探讨Ajax异步请求的验证,解决初级问题,为初学者提供参考。 一、Ajax的基本概念 Ajax并非一种单一的技术,而是一种利用现有Web技术(如JavaScript、XML、HTML、CSS等)组合成的新应用方式。它的...
### ExtJS 3.0 AJAX 同步请求详解 #### 一、引言 ExtJS 是一款基于 JavaScript 的开源框架,用于构建现代化的 Web 应用。它提供了丰富的 UI 组件以及强大的数据处理能力,使得开发者能够快速地开发出高质量的企业...
实现Ajax同步请求的方式是通过设置`async`属性为`false`。在jQuery中,可以通过AJAX调用的选项中设置`async: false`来达到这一目的。然而,需要注意的是,在实际开发中,推荐使用异步模式,因为同步模式会阻塞浏览器...
在前端页面开发的过程中,经常使用到Ajax...JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个XMLHttpRequest对象,使用这个对象来进行异步发送请求,具体实现参考下面代码: function ajax
本示例工程"Java通过jQuery实现ajax异步请求"着重展示了如何利用jQuery的AJAX功能与后端Java服务器进行数据通信,从而实现页面的无刷新更新。以下将详细解释这个过程中涉及的关键知识点。 首先,jQuery是一个强大的...
本文将深入探讨Ajax的同步和异步请求,以及它们的工作原理。 ### 1. 异步工作方式 **1.1 图解** 在异步模式下,Ajax请求发送后,浏览器不会等待服务器的响应,而是继续执行后续的代码。当服务器返回响应时,会调用...
本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,它是Asynchronous JavaScript and XML的缩写,虽然现在XML已不再是主要的数据交换格式,但...
然而,有时我们可能会遇到Ajax同步问题,这通常是由于对异步和同步理解不透彻或者配置不当导致的。下面我们将详细探讨这个问题。 在ExtJS中,Ajax请求主要通过`Ext.Ajax`对象来实现。`Ext.Ajax.request()`方法是...
本文将深入探讨.NET中实现AJAX异步请求的几种方法。 一、ASP.NET AJAX库 1. UpdatePanel:ASP.NET AJAX库中最基础的异步更新组件是UpdatePanel。它创建了一个局部刷新的区域,使得在这个区域内进行的任何操作都可...
标题提到的"ext-basex.js进行Ext.Ajax.request同步请求 FF无法正常"问题,涉及到浏览器兼容性和异步/同步请求的理解。 `Ext.Ajax.request`是ExtJS中的一个方法,用于发起Ajax(异步JavaScript和XML)请求。它可以...
本文将深入探讨jQuery中的异步请求,即AJAX(Asynchronous JavaScript and XML),并提供一个实例来帮助理解。 AJAX是Web开发中的核心技术之一,允许在不刷新整个页面的情况下与服务器进行数据交互。jQuery的$.ajax...
`XMLHttpRequest`是Ajax的核心组件,用于在后台与服务器交换数据,并执行异步请求而无需重载整个网页。其主要功能包括发送异步HTTP请求、处理服务器响应等。 #### 创建XMLHttpRequest对象 ```javascript var ...
在这段代码中,我们看到一个更复杂的`$.ajax()`调用,其中包含了禁用缓存、同步请求等功能,并将服务器返回的数据存储在变量`xmlStr`中,以便后续处理。 ### 二、总结与应用建议 通过对`$.ajax()`方法的深入解析...
在本示例中,我们需要实现一个功能:当用户在树形菜单中选择某一节点时,通过 AJAX 异步请求向后台添加新的子节点,并在前端动态显示出来。 首先,我们看到 HTML 结构中有一个 `#demo` ID 的 `ul` 元素,它是 layui...