AJAX同步与异步请求的执行机制对比

AJAX同步与异步的执行机制对比

AJAX同步与异步请求的主要区别在于浏览器对网络请求的等待机制不同。为了直观展示这一差异，我们先对比两段核心代码的实现方式：

第一段代码演示了同步请求的实现逻辑：

 
Synchronize = function(url,param) {
function createXhrObject() {
var http;
var activeX = [ "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
try {
http = new XMLHttpRequest;
} catch (e) {
for (var i = 0; i < activeX.length; ++i) {
try {
http = new ActiveXObject(activeX[i]);
break;
} catch (e) {}
} 
} finally {
return http;
} 
} 
var conn = createXhrObject();
conn.open("POST", url, false);//ajax同步
conn.send(param);
var strReturn = conn.responseText;
alert("1");
if (strReturn != "") {
return Ext.decode(conn.responseText);
} else {
return null;
} 
alert("2");
}; 

第二段代码则展示了异步请求的实现方式：

AJAX异步请求的关键代码如下：

 
Synchronize = function(url,param) {
function createXhrObject() {
var http;
var activeX = [ "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
try {
http = new XMLHttpRequest;
} catch (e) {
for (var i = 0; i < activeX.length; ++i) {
try {
http = new ActiveXObject(activeX[i]);
break;
} catch (e) {}
} 
} finally {
return http;
} 
} 
var conn = createXhrObject();
conn.open("POST", url, true);//ajax异步
conn.send(param);
var strReturn = conn.responseText;
alert("1");
if (strReturn != "") {
return Ext.decode(conn.responseText);
} else {
return null;
} 
alert("2");
}; 

同步与异步请求的行为差异分析

通过对比上述两段代码，我们可以总结出同步与异步请求在行为上的具体差异：

在调用conn.open方法时，第三个参数决定了请求类型：true代表异步，false代表同步。

在调用conn.open方法时，第三个参数决定了请求类型：false代表同步，true代表异步。

针对代码二（异步请求），其执行顺序表现为：先弹出alert("2")，后弹出alert("1")。这是因为异步请求发出后，浏览器不会等待服务器响应，而是立即继续执行后续代码。因此，alert("2")首先被执行；只有当服务器响应到达并触发回调后，alert("1")才会执行。

针对代码一（同步请求），其执行顺序表现为：先弹出alert("1")，后弹出alert("2")。同步请求发出后，浏览器会阻塞主线程，直到服务器响应返回。因此，代码会等待响应完成后，先执行alert("1")，随后再执行alert("2")。