17370845950

本文深入探讨了在使用jquery ajax进行数据请求时，加载动画（如gif）无法正确显示的问题。核心原因在于将ajax请求设置为同步（`async: false`），这会阻塞浏览器主线程，导致ui更新无法执行。文章详细解释了同步与异步请求的区别，并提供了将请求设置为异步（`async: true`）以及正确管理加载器显示与隐藏的解决方案和最佳实践，确保用户界面的响应性。

理解AJAX与异步操作

在Web开发中，AJAX（Asynchronous JavaScript and XML）允许我们在不重新加载整个页面的情况下与服务器进行数据交互，极大地提升了用户体验。jQuery的$.ajax()方法是实现这一功能的强大工具。其中一个关键参数是async，它决定了AJAX请求是同步还是异步执行。

• 异步请求 (async: true)：这是$.ajax()的默认行为。当发起异步请求时，浏览器不会等待服务器响应，而是会继续执行后续的JavaScript代码和UI渲染任务。当服务器响应到达时，会通过回调函数（如success或error）处理结果。这种模式下，用户界面不会被阻塞，可以保持响应性。
• 同步请求 (async: false)：当发起同步请求时，浏览器会暂停执行所有JavaScript代码和UI渲染，直到服务器响应返回。这意味着在请求完成之前，用户无法与页面进行任何交互，页面会处于“冻结”状态。

async: false 导致加载器不显示的根本原因

当我们将$.ajax()的async参数设置为false时，就强制浏览器以同步方式执行请求。在这种情况下，即使你在AJAX请求之前调用了$('#imgLoader').show();来显示加载动画，这个UI更新操作也无法立即在浏览器中渲染出来。因为主线程被AJAX请求阻塞，浏览器没有机会去处理并绘制这个显示加载器的命令。只有当同步AJAX请求完全完成并返回结果后，主线程才会被释放，此时加载器可能已经失去了显示意义，或者在数据加载完成后才短暂闪现然后立即隐藏。

考虑以下原始代码片段：

function fnLoadVendorData() {
    // ... 其他逻辑 ...
    if (vendorSel != "--Select Vendor--" && typeof (vendorSel) != 'undefined') {
        $.ajax({
            type: "POST",
            url: "Ipfee.aspx/GetVendorData",
            data: JSON.stringify({ "vendorName": vendorSel, "strCircle": strCircle }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false, // 问题所在：同步请求
            success: function (response) {                
                if (response.d != "NoDataFound") {
                    $('#imgLoader').show(); // 此时显示已晚，或者会被后续的hide立即覆盖
                    var getDatalist = JSON.parse(response.d);                    
                    Create_vendorDataTable(getDatalist);
                    $('#imgLoader').hide(); // 隐藏
                } else {
                    // ...
                }
                $('#imgLoader').hide(); // 无论如何都会隐藏
            },
            error: function (response, textStatus, errorThrown) {
                // ...
                $('#imgLoader').hide();
            }
        });
    }
}

在上述代码中，$('#imgLoader').show();被放置在success回调内部，这本身就意味着加载器只有在数据成功返回后才尝试显示，这与加载器的“加载中”语义相悖。更重要的是，即使尝试在$.ajax调用前显示，由于async: false的阻塞特性，加载动画也无法在请求期间正常渲染。

解决方案：拥抱异步并正确管理加载器

解决此问题的关键是将AJAX请求设置为异步，并确保加载器的显示和隐藏逻辑正确地包裹请求过程。

1. 设置 async: true (或移除该行，因为它是默认值)： 这是最直接且最重要的修改。它允许浏览器在等待服务器响应时继续处理UI更新。

2. 正确放置加载器显示/隐藏逻辑：

   • 在发起AJAX请求之前显示加载器。
   • 在AJAX请求的success和error回调函数中隐藏加载器，无论请求成功还是失败，都应确保加载器被隐藏，以防止其永久停留在页面上。

以下是修正后的代码示例：

@@##@@


    
        
            
                --Select Vendor--
                IPFEE_INDUS
                IPFEE_TVIPL
                IPFEE_ASCEND
                IPFEE_BIL
                IPFEE_GTL
            
            Vendor Name
        
    
    
        
            Filter
        
    

注意事项：

• complete 回调函数：jQuery AJAX的complete回调函数无论请求成功（success）还是失败（error）都会执行。这是一个非常适合放置隐藏加载器逻辑的地方，可以避免在success和error中重复编写相同的隐藏代码。
• 加载器样式：为了让加载器在请求期间真正覆盖页面并防止用户操作，可以考虑为其设置position: fixed、top: 0、left: 0、width: 100%、height: 100%以及一个半透明的背景色。
• 避免使用 async: false：在现代Web开发中，几乎所有场景都应该使用异步AJAX请求。同步请求会导致糟糕的用户体验，因为它们会冻结浏览器，尤其是在网络条件不佳或服务器响应缓慢时。

总结

当jQuery加载器（或其他UI更新）在AJAX请求期间不显示时，首先应检查async参数的设置。将async设置为true（或使用其默认值），并确保在请求发起前显示加载器，在请求完成（无论成功或失败）后隐藏加载器，是解决此类问题的标准做法。遵循这些最佳实践将有助于构建响应迅速、用户体验良好的Web应用程序。