开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Ajax 同步与异步

简介: Ajax 同步与异步
+关注继续查看

单词


  • synchronization


英 [ˌsɪŋkrənaɪ’zeɪʃ(ə)n]


美 [ˌsɪŋkrənaɪ’zeɪʃ(ə)n]


n. 同时; 同时性; 同步; 同期[步]录音;


  • asynchronization


英 [eɪˈsɪŋkrənaɪ’zeɪʃ(ə)n]


美 [eɪˈsɪŋkrənaɪ’zeɪʃ(ə)n]


n. 异步化;


二者定义


关于同步与异步的概念在生活中有很多常见的场景,举例说明。


  • 同步:一个人在同一个时刻只能做一件事情,在执行一些耗时的操作(不需要看管)不去做别的事,只是等待


  • 异步:在执行一些耗时的操作(不需要看管)去做别的事,而不是等待


xhr.open() 方法第三个参数要求传入的是一个 bool 值,其作用就是设置此次请求是否采用异步方式执行,默认为 true (即默认为异步方式进行),如果需要同步执行可以通过传递 false 实现:


console.log('before ajax')

var xhr = new XMLHttpRequest()

// 默认第三个参数为 true 意味着采用异步方式执行xhr.open('GET', './time.php', true) xhr.send(null)
xhr.onreadystatechange = function () {

if (this.readyState === 4) { // 这里的代码最后执行console.log('request done')
}

}

console.log('after ajax')


如果采用同步方式执行,则代码会卡死在 xhr.send() 这一步:



console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', './time.php', false)
// 同步方式 执行需要 先注册事件再调用 send,否则 readystatechange 无法触发
xhr.onreadystatechange = function () {

    if (this.readyState === 4) { 
        // 这里的代码最后执行
        console.log('request done')
    }

}

xhr.send(null) console.log('after ajax')


同步与异步的区别


同步请求


$.ajax({
  type:'post',
 url:"<c:url value='/device/org/' />"+val,
 data:{'orgId':val},
 success:function(data){
 //function(1)
 name=data.orgName;
 },
 dataType:"json",

 async:false
});

function(2);


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


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


异步请求


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


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


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


同步与异步时间比较


image


time.php


<?php

// for ($i = 0; $i < 100000; $i++) {
//   echo time();
// }

// 打印时间戳
echo time();


Sync-vs-Async.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>

    // console.time('abc')
    // for (var i = 0; i < 100000000; i++) {}
    // console.timeEnd('abc')

    // console.log('begin request')
    var xhrAsync = new XMLHttpRequest()
    // open 方法的第三个参数是 async 可以传入一个布尔值,默认为 true
    xhrAsync.open('GET', 'time.php', true)
    console.time('async')
    xhrAsync.send()
    console.log(xhrAsync.responseText)
    // console.log('end request')
    console.timeEnd('async')

    // 同步模式 ajax 操作会有楞等的情况
    // 区别在于 send 方法会不会出现等待情况
    // console.log('begin request')
    var xhrSync = new XMLHttpRequest()
    // open 方法的第三个参数是 async 可以传入一个布尔值,默认为 true
    xhrSync.open('GET', 'time.php', false)
    console.time('sync')
    xhrSync.send()
    console.log(xhrSync.responseText)
    // console.log('end request')
    console.timeEnd('sync')

  </script>
</body>
</html>


演示同步异步差异。


一定在发送请求 send() 之前注册 readystatechange (不管同步或者异步)


为了让这个事件可以更加可靠(一定触发),一定是先注册


了解同步模式即可,切记不要使用同步模式。


至此,我们已经大致了解了 AJAX 的基本 API 。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ajax的使用
  如上一张表单提交,一般我们通常的做法是,form表单提交,方便快捷,提交以后就不用管了,是否完成以及完成以后做什么是提交以后的后台操作,form表单只负责提交过去。(一般后台在接收表单提交以后,根据验证以及数据流转结果给前台交互,常见的是 重定向)。
989 0
Ajax
什么是Ajax? AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 ajax是一种浏览器异步发起请求。
941 0
Ajax
Ajax是无需刷新页面就能够从服务器取得数据的一种方法。 1、XMLHttpRequest对象 各浏览器(包括ie7+)都支持原生的XHR对象,在这些浏览器中创建XHR对象可以: var xhr=new XMLHttpRequest(); ps:个人觉得现在写一个跨浏览器兼容的函数方法没必要,兼容做到ie7+就够了 2、XHR的用法 ①open( )方法 接受三个参数:第一个参数是要发送的请求的类型(“get”、“post”等);第二个参数是请求的URL(文件);第三个参数表示是否(true/false)异步发送请求的布尔值。
754 0
Ajax异步验证登陆或者注册
首先介绍一个不错的学习Ajax的中文网站:http://www.w3school.com.cn/ajax/index.asp AJAX = 异步 JavaScript 和 XML。详细介绍见上面的网址即可; 1:首先介绍一下使用Javascript写的异步验证,然而在实际开发过程中很少用这种的,太过繁琐,但是依旧写一个吧!至少懂其原理哦!   1.
1085 0
[Ajax]ajax入门
谈到ajax异步刷新技术,我之前感觉很高深,今天看了一下,大体上有一个了解,AJAX最大的应用就是我们要理解XMLHttpRequest这个对象。XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请数 据, 在  页面加载后在服务器端接受数据,在后台向客户端发送数据。
857 0
Ajax技术概述与现状应用
Ajax技术概述与现状应用   AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
883 0
AJAX(1)
昨天有同事做了ajax的讲座,恩 虽然原来自己也看过ajax方面的东西,但在细节上,听了讲座还是觉得有了更深入的了解。 不敢独享 故分享于网上,望对诸君有些许作用。 本帖说的就是概念 发展 趋势,具体技术见帖2 AJAX 作为一个概念火了很久,很多人听过,但不知道是什么,表现又在哪里。 AJ
1132 0
ajax调用异常
一般情况下 return false可以阻止浏览器的默认事件,如下一段代码 function ajaxMethod(){ $.get(url,function(data){ alert(data); }); }    在以上的ajax方法 alert...
638 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载