AJax异步请求和同步请求的差别

• 问题背景

此前，遇到一个问题：在前台界面绑定下拉框value和name，$("#" + elementID).append("" + name + "")，绑定之后，再通过value赋值使name显示想要的内容，绑定的value和name是通过后台采用ajax请求读取过来的，但在界面调试过程中，总是失败，无法显示想要的值，而且打开界面的时候，发现value和name已经完成绑定动作了，js控制台调试$("#id").val("temp")，也是可以的。后来发现，是ajax请求异步和同步的差别，导致失败，ajax请求默认async：true是异步请求，界面加载时请求未完成，导致绑定未完成，赋值也无法显示，在界面加载完成后请求完成，绑定完成，这时候赋值动作已经在请求完成前完成了，导致怎么无法显示我想要的值。

一、ajax异步（默认async：true）

异步：并行处理，程序向服务器发送一个请求，在结果返回之前，程序还是可以执行其它操作（以前台界面为例，用户依然可以输入其它信息，并且和服务器进行其它交付），大大节省了用户的时间，也提高用户的体验

$.ajax({
        url: actionurl,
        type: 'GET',
        data: searchdata,
        beforeSend:function(){
            console.log("not yet");
            },
        success: function (result) {
            console.log("success");
            },
        error: function (errmsg) {
            console.log("error");
        }
    })

 

二、ajax同步（设置async：false）

同步：顺序处理，程序向服务器发送一个请求，在结果返回之前，程序要一直等待结果返回才可以执行下一步操作

$.ajax({
        url: actionurl,
        type: 'GET',
        data: searchdata,
        async:false,
        beforeSend:function(){
            console.log("not yet");
            },
        success: function (result) {
            console.log("success");
            },
        error: function (errmsg) {
            console.log("error");
        }
    })

举个具体例子，这里test1利用ajax请求访问test2，在chrome和firefox等浏览器是不可以的，只有在IE是可以的（涉及到跨域访问）

test2.html如下：

AJax异步测试返回结果

异步（async默认为true无需设置）情况下：test1.html如下

    
    
    


    

        
返回结果：
    
    

返回结果：AJax异步测试返回结果

同步情况（设置async为false）下：test2.html如下：

    
    
    


    

        
返回结果：
    
    

返回结果：Ajax同步测试返回结果

由上面两个例子可以看出，在异步的情况中 $('#resultView').html("Ajax同步测试返回结果"); 这句语句执行时，请求还未完成，界面加载完全之前，请求完成，执行 $('#resultView').html(data); 语句，导致界面显示test2.html内容；在同步的情况中必须等请求结束后才会执行 $('#resultView').html("Ajax同步测试返回结果"); 所以在界面加载完全之后显示是第二条语句执行后的结果。

注：除非有特殊要求或需求，尽量不要用同步