1、问题描述

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

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()函数的返回值却一直为空。究竟为什么呢？

2、原因分析

出现该问题的原因在于：**jquery中ajax()默认以异步的方式请求数据。**此getData()函数中第一个return语句返回的只是ajax()中function的返回值。而异步时getData()函数本身的return语句先执行了。

3、解决方法

因此，我们只需将ajax设置为同步即可解决该问题。具体代码如下：

function getData()
{
    var dataVal = null;
    $.ajax({
        type:'POST',
        url:'URl',
        dataType:'text',
        cache : false, //不缓存
        async:false,  //使用同步方式获取数据 
        success:function(data){
            dataVal = data;
        }
    });
    return dataVal;//此返回值为获取的数据
}

此时，getData()函数的返回值为ajax()获取的数据。

4、问题剖析

(1) 关于AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
ajax() 方法通过 HTTP 请求加载远程数据。
jquery中通过async属性控制ajax是同步请求还是异步请求。默认是true，即默认以异步的方式请求数据。

(2) 何为异步？何为同步？

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

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

(3) 什么时候异步?什么时候同步？

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

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

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

因此，当Ajax的请求结果需交由后续函数处理时，使用同步请求。否则，建议使用异步请求。

后记

结论：同步可以改变外部定义的变量值，异步可以提高加载效率，增强用户体验。

同步、异步，各有春秋，应根据应用场景，合理选择加载方式。

阿汤笔迹微信公众平台

关注**“阿汤笔迹”** 微信公众号，获取更多学习笔记。
原文地址：http://www.atangbiji.com/2020/04/18/ajaxCommunication/
博主最新文章在个人博客 http://www.atangbiji.com/ 发布。