一、 问题描述

我们在web项目中经常在JS中使用ajax函数获取数据，并将获得的数据返回供其他函数所用。例如定义如下函数：

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getData()
{
    var dataVal = null;
    //（默认）使用异步获取数据
    $.ajax({
        type:'POST',
        url:'URl',
        dataType:'text',
        cache : false, //不缓存
        success:function(data){
            dataVal = data;
            return dataVal;
            //其实这个return只是
            //返回ajax中function的返回值。
            //而不是getData()的返回值。
        }
    });
    return dataVal;//此返回值一直为空
}

当其它函数调用getData()函数时，我们会发现：ajax明明已经获取到了数据，而getData()函数的返回值却一直为空。究竟为什么呢？

二、原因与解决办法

其实jquery中ajax()是默认以异步的方式请求数据的。所以getData()函数中第一个return语句返回的只是ajax()中function的返回值。而异步时getData()函数本身的return语句先执行了。

想要解决这个问题只需要将ajax设置为同步即可。代码如下：

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getData()
{
    var dataVal = null;
    $.ajax({
        type:'POST',
        url:'URl',
        dataType:'text',
        cache : false, //不缓存
        async:false,  //使用同步方式获取数据 
        success:function(data){
            dataVal = data;
        }
    });
    return dataVal;//此返回值为获取的数据
}

添加async属性并设置值为false后，getData()函数的返回值就会是ajax()获取的数据。

三、 总结

1、关于Ajax

  • AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

  • ajax() 方法通过 HTTP 请求加载远程数据。

  • jquery中通过async属性控制ajax是同步请求还是异步请求。默认是true，即默认以异步的方式请求数据。

2、关于同步和异步

同步的意思是：当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于阻塞状态（假死状态），当这个AJAX执行完毕（返回数据）后才会继续运行其他代码，页面阻塞状态解除。 类似于单线程。

异步的意思是：当AJAX代码运行时，其他代码代码不会进入阻塞状态，而会继续向下执行。类似于多线程。

3、 什么时候使用异步?什么时候使用同步？

异步请求是在发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两个线程，各走各的，互不影响。

异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

同步请求是在当前发出请求后，浏览器什么都不能做，页面处于一个假死状态，必须得等到请求完成返回数据之后，才会执行后面的代码，页面解除假死状态。

所以，当Ajax的请求结果需交由后续函数处理时，使用同步请求。否则，使用异步请求。
同步和异步，有各自不同的应用场景，应该根据应用场景，合理选择加载方式。