ajax同步请求与异步请求,Ajax请求的同步与异步

在写一个项目时遇到一个问题。

问题是这样的，点击切换到A TAB页时，需要通过ajax加载数据，然后用highchart图表进行显示。由于数据加载较多，要等待上几秒，所以打算加个loading的样式，使用户体验良好。

使用了模态框的形式，载入一张loading的gif图片。

$(".tab").click(function(){

$("loadingModal").modal("show");

执行ajax1；

执行ajax2；

})

本来以为按照预想的显示，但是实际上，只在ajax2请求完之后才短暂地显示了模态框。

后来查资料后，才发现其中的问题，

由于设计需要，两个ajax请求都设为同步。

即，async:false;(true的话即为异步)

如果ajax请求设为同步，则在发送ajax请求后，页面会出现假死，无法与用户交互，直到ajax请求完毕后网页才会恢复。也就是问题中，为什么等到ajax2执行完毕之后，我的模态框才弹出loading样式。

如果async:true，则为异步请求。发送ajax后，不用等待请求完毕，便可继续执行以下的操作。

由于设计需要，ajax必须为同步，但是如何在同步状态下显示loading字样，还需要继续想办法

后来为了完成该需求还是做了一些解决方法。

查资料后发现，当我们ajax请求设置为同步的时候，UI绘制线程会被挂起，主线程用于通过ajax读取数据。知道ajax返回数据后UI线程才能恢复工作状态。

我的解决方法还是绕不过这个点。只能变通，需要互相依赖的ajax就让他们先后执行。比如，Bajax需要从Aajax中获得数据再请求，那么就将Bajax的执行放在Aajax的success函数中。

虽然实际上没有解决ui线程与主线程的问题，但在一定程度上还是绕过了这个坑。至于这个怎么解决，等待再次查资料