本文深入探讨了在使用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请求设置为异步，并确保加载器的显示和隐藏逻辑正确地包裹请求过程。
-
设置 async: true (或移除该行，因为它是默认值)： 这是最直接且最重要的修改。它允许浏览器在等待服务器响应时继续处理UI更新。
-
正确放置加载器显示/隐藏逻辑：
- 在发起AJAX请求之前显示加载器。
- 在AJAX请求的success和error回调函数中隐藏加载器，无论请求成功还是失败，都应确保加载器被隐藏，以防止其永久停留在页面上。
以下是修正后的代码示例：
<!-- html 结构，包含加载图片和表单元素 --> <img src="Images/ipload.gif" id="imgLoader" style="display: none; width: 100%; height: 100%; z-index: 9999; position: fixed; top: 0; left: 0; background-color: rgba(255,255,255,0.7);" /> <div class="row"> <div class="col-md-4"> <div class="form-group"> <select name="ddlVendorName" id="ddlVendorName" class="form-control"> <option value="--Select Vendor--">--Select Vendor--</option> <option value="1032">IPFEE_INDUS</option> <option value="1028">IPFEE_TVIPL</option> <option value="1033">IPFEE_ASCEND</option> <option value="1029">IPFEE_BIL</option> <option value="1031">IPFEE_GTL</option> </select> <label>Vendor Name</label> </div> </div> <div class="col-md-3 filterButton"> <div class="form-group"> <button type="button" class="btn btn-danger button" id="btnFilterClick"><i class="fa fa-filter" aria-hidden="true"></i>Filter</button> </div> </div> </div> <script> // 确保DOM加载完成后绑定事件 $(document).ready(function () { $('#btnFilterClick').on('click', fnLoadVendorData); }); function fnLoadVendorData() { var vendorSel = $("#ddlVendorName option:selected").text(); var strCircle = $("#lblRole").text(); if (vendorSel !== "--Select Vendor--" && typeof (vendorSel) !== 'undefined') { $('#imgLoader').show(); // 在AJAX请求发起前显示加载器 $.ajax({ type: "POST", url: "Ipfee.aspx/GetVendorData", data: JSON.stringify({ "vendorName": vendorSel, "strCircle": strCircle }), contentType: "application/json; charset=utf-8", dataType: "json", async: true, // 关键修改：设置为异步 success: function (response) { if (response.d !== "NoDataFound") { var getDatalist = JSON.parse(response.d); Create_vendorDataTable(getDatalist); } else { jAlert("Data not available !!", "Information"); } }, error: function (xhr, textStatus, errorThrown) { jAlert("请求失败: " + textStatus + " - " + errorThrown, "错误信息"); }, complete: function() { // 无论成功或失败，请求完成后都隐藏加载器 $('#imgLoader').hide(); } }); } } // 假设 Create_vendorDataTable 函数已定义 function Create_vendorDataTable(data) { console.log("Creating vendor data table with:", data); // 这里是创建或更新表格的实际逻辑 } // 假设 jAlert 函数已定义 (例如使用jQuery UI Dialog或自定义弹窗) function jAlert(message, title) { alert(title + "n" + message); } </script>
注意事项：
- 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应用程序。