`

javascript Ajax 同步请求与异步请求的问题

阅读更多
先来看以下代码:

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,即为同步。
分享到:
评论

相关推荐

    javascript发送ajax请求,获取返回值res,async 同步/异步

    javascript发送ajax请求,获取返回值res,async 同步/异步 var res = sendRequest({ url : "1.php", //necessary method : "post", params : { param1 : "123", param2 : "234" }, async : false });

    原生JavaScript实现Ajax异步请求

    在前端页面开发的过程中,经常使用到Ajax...JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个XMLHttpRequest对象,使用这个对象来进行异步发送请求,具体实现参考下面代码: function ajax

    原生JavaScrpit中异步请求Ajax实现方法

    在前端页面开发的过程中,经常使用到Ajax...JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个XMLHttpRequest对象,使用这个对象来进行异步发送请求,具体实现参考下面代码: function ajax

    JavaScript Ajax实现异步通信

    JavaScript Ajax实现异步通信 一、浏览器与服务器的同步和异步通信 1.同步:是阻塞的,浏览器在向服务器发送请求之后一直等待服务器的响应,而没有做其他事情。 2.异步:非阻塞的,浏览器向服务器发送请求之后,...

    ajax的js,jq jsonp,的请求方式

    ajax的同步异步请求,分别用 jquery和 javascript的方式另外和 jsonp 的请求方式

    详解JavaScript for循环中发送AJAX请求问题

    首先说,出现这个问题的场景是很少见的,因为有太多更好解决方法... 一、同步的ajax请求,而ajax请求默认是异步的,所以要设置为false。 function creatXMLHttpRequest() { var xmlHttp; if (window.ActiveXObjec

    ajax-get用JS非同步

    a detail for who want to learn ajax by javascript welcome to download it

    从浅到深,带你彻底搞懂AJAX异步请求

    在平时开发过程中,异步请求似乎比同步请求出现的频率还要高一些。这是为什么呢?在同步请求时如果对网页的部分内容进行更新时,是不是就必须重载整个页面。这样肯定是不行的,这时就可以采用异步请求来解决此问题。...

    ajax+json.pdf

    ASynchronous JavaScript And XML 异步的 JavaScript 和...存在就有其道理 异步虽然好 但是有些问题是要用同步用来解决,比 如有些东西我们需要的是拿到返回的数据在进行操作的。这些是异步 所无法解决的。 Ajax 是一种

    详解JavaScript原生封装ajax请求和Jquery中的ajax请求

    Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),当然也可同步,这样就可使网页从服务器请求少量的信息,而不是整个页面。Ajax使我们的项目更小、更快,更友好,在前端开发有很高的地位,也是面试题...

    ajax长连接式的浏览器、服务器的全双工通信框架.rar

    借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML立即更新UI,并向服务器发出异步请求,以执行更新或查询数据库。当请求返回时,就可以使用JavaScript和CSS来相应地更新UI,而不是刷新整个页面。最重要的是...

    Web前端Ajax&JQuery视频教程课件

    本套Java教程涵盖Ajax的实现原理,XMLHttpRequest实现Ajax,回调函数,Ajax数据交换格式(HTML、XML、JSON),Ajax发送GET和POST请求,异步编程模型和同步编程模型,解决Ajax的GET请求缓存问题,使用Ajax验证用户名...

    ajaxOrder:通过AJAX实现异步POST请求的智能同步器

    ajaxOrder 通过AJAX实现异步POST请求的智能同步器

    XMLHttpRequest对象_Ajax异步请求重点(推荐)

    1.Ajax能够是实现异步传输,所依赖的就是JavaScript中的XMLHttpRequest 2.XMLHttpRequest对象是XMLHttp组件的对象,它是一个抽象对象,允许脚本从服务器获取返回的eXML数据或将数据发送到服务器端 3.XMLHttpRequest...

    小程序关于请求同步的总结

    或者在网页中,我们使用Ajax的方式向服务器端做异步数据请求。这些异步的代码不会阻塞当前的界面主进程,界面还是可以灵活的进行操作,等到异步代码执行完成,再做相应的处理。 举一个例子:在小程序中,我们获取到...

    day22_Ajax&Json.zip

    通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页...

    Head First Ajax (中文版)+源码

    这本书专门针对你的大脑而制作,涵盖JavaScript、XHTML、异步和同步请求、DOM以及扩展和提升你的Web应用开发能力所需的所有内容。你要做的不只是记住其他人所写框架中的某些方法,也不再只是从某个工具包向应用拖放...

    原生js jquery ajax请求以及jsonp的调用方法

    XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,...

    Ajax入门学习教程(一)

    AJAX(Asynchronous JavaScript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。 AJAX还有一个最大的特点就是,当...

    Ajax课件学习(免费)

    该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。 XMLHttpRequest是XMLHTTP组件的对象,通过这...

Global site tag (gtag.js) - Google Analytics