ajax的同步与异步

ajax,同步,异步

拭目以待 发布于

XMLHttpRequest对象支持开启同步或异步两种不同的请求:

var xhr = new XMLHttpRequest();
xhr.open(method, url, async, user, password):


async  类型为 Boolean 值,  设置 true 时代码该请求使用异步, 设置 false 时代码该请求使用同步。

一般情况下 async 都是配置为true(异步), 且当未进行配置时会默认为true; 因为我们平时的业务场景所需要的正是异步请求。


同步与异步的区别

1. 同步请求在请求完成前,后续的程序将处于暂停执行状态。而异步请求,除过请求事件函数中的程序在特定条件下执行外,请求外的程序会紧接着执行。

2. 部分属性在同步请求中不可用或受限制,如

      异步请求可以通过配置属性 timeout 来进行超时设置, 而同步请求则不能配置,如果在同步请求中配置 timeout 会抛异常(禁止在同步请求中使用属性 timeout的异常信息)。

这就意味着同步请求会阻断之后所有的代码执行,而这并不是大多项目所期望的场景。

      通过 onreadystatechange 事件所捕获的 readyState属性值在同步请求中只会存在1(已调用open方法)与4(请求完成)。


async 参数如何使用

// async = true:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  console.log('readyState=>', xhr.readyState);
};
xhr.open('GET', 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', true);
xhr.send(null);
console.log('代码执行到这里了');



// async = false:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  console.log('readyState=>', xhr.readyState);
};
xhr.open('GET', 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', false);
xhr.send(null);
console.log('代码执行到这里了');


需要注意:是否为异步执行的效果是从xhr.send(null)之后开始区分的。


如果想了解更多的XMLHttpRequest参数,请查阅XMLHttpRequest参数详解