单词
- 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()。
同步与异步时间比较
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 。
