15

我正在使用 JQuery ajax 调用向服务器发送同步调用，并希望显示当时的加载图像。

但加载图像在 Firefox 中可见，但在 IE 和 chrome 中不可见。当我调试时，我发现在 IE 中，当我们调用 java 脚本时，它停止显示浏览器中的更改，因为它暂停了 DOM，并且当调用完成时，它会显示所有更改。由于我在 ajax 调用中显示加载图像并在完成调用后将其删除，因此 IE 不显示任何图像。

但是当我使用警告框时，它会在 IE 中显示加载图像，因为它会停止线程，直到我们响应它。

是否有任何方法可以停止 java 脚本执行一毫秒，以便 IE 执行停止并显示加载图像。

我已经尝试过 JQuery 的 ajaxSend、ajaxComplete、ajaxStart、ajaxStop 和 java 脚本的计时器事件，但没有得到任何解决方案。

任何帮助都是宝贵的，在此先感谢。

4

10 回答 10

10

在 XHR 的上下文中，同步意味着浏览器冻结直到请求完成。如果您想要确保在给定时间仅运行一个请求，则使用您自己的标志来指示请求正在进行中。

根据定义，请求的同步标志意味着任何其他活动都必须停止。我很惊讶它甚至可以在 Firefox 中工作，上次我尝试它不起作用，但那是很久以前的事了。所以忘记它，没有办法让它在所有浏览器中都工作。即使您使用 延迟请求setTimeout，充其量您也会得到一个带有非动画 gif 的冻结浏览器。当您冻结他们的浏览器时，用户不喜欢，特别是如果请求可能需要不到一秒钟的时间。

永远不要依赖浏览器来获得安全性或与功能相关的正确功能。如果客户端并行执行两个请求，您的应用程序可能会损坏，那么您在服务器端就有错误。没有什么可以阻止恶意用户使用普通 UI 之外的其他工具发出并行请求。

于 2012-08-17T09:52:27.633 回答
4

您的问题可能是您开篇文章中的“同步”部分。

异步打开连接。这会阻止浏览器锁定，它会按您的预期工作。（在您的 XmlHttpRequest / activex 对象上设置 async = true）

于 2012-08-16T09:42:38.090 回答
1

尝试在 ajax jquery 调用开始时显示加载图像并在成功事件中隐藏它

或者

你也可以使用设置超时

于 2012-08-14T06:27:13.383 回答
1

我在使用 ajax 时也遇到了类似的问题，就像我在 ajax 调用期间对 UI 应用了一些样式，但这些样式并没有应用于 UI，就像你告诉过的那样，如果我们发出一些警报，它将按预期工作，直到没有单击 OK 进行警报

我猜不出它为什么会发生，但你可以使用 JQuery 来显示或隐藏正在加载.... div 希望它会工作....

于 2012-08-16T11:21:42.583 回答
1

我遇到了类似的问题，然后我使用 ASP.NET 中的更新面板对其进行了整理。如果您使用 PHP 或任何其他技术，那么您必须使用 ajax 调用。如果您进行同步呼叫，则不会显示正在加载的图像。

于 2012-08-20T06:38:19.287 回答
1

我也遇到过类似的情况，如果你必须进行同步调用，浏览器会暂停 DOM 操作。因此，除非绝对必要，否则请继续使用异步调用。

有一种解决方法可以在开始 ajax 调用之前操作 DOM 并显示一个元素。使用 jQuery animate()，并在动画回调中完成 ajax 调用。以下代码对我有用：

//show the loading animation div
$('#loading').show();

//call dummy animate on element, call ajax on finish handler
$('#loading').animate({
    opacity: 1
  }, 500, function() {
        //call ajax here
        var dataString = getDataString() + p + '&al=1';
        $.ajax(
        {
            type: 'GET',
            async: false,
            url: 'uldateList.php',
            data: dataString,
            dataType: 'json',
            success: function(result){
                //Do something with result
                ...
                //hide loading animation
                $('#loading').hide();
            }
        });
  });
于 2012-08-21T15:09:47.370 回答
1

可以尝试在图片加载回调中执行ajax同步调用。

就像是：

var img = new Image();
img.src = "loading.gif";
img.onload = function() {
    /* ajax synch call */
}

然后将 img 附加到 DOM。

于 2012-08-21T16:10:42.727 回答
0

嗨尝试像这样修改ajax调用它对我有用

    xmlHttp.open('POST', url, true);
xmlHttp.onreadystatechange = myHandlerFunction;
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader("Accept-Charset", "charset=UTF-8");
xmlHttp.send(query);
于 2012-09-15T12:38:27.613 回答
0

我以 Sergiu Dumitriu 的信息为基础。我将我的 async 设置为 true 并添加

  beforeSend: function() {
    $('#Waiting').jqmShow();
  },
  complete: function() {
    $('#Waiting').jqmHide();
  }

它对我有用。基本上我创建了自己的 async:false 属性。

于 2013-03-06T16:55:11.133 回答
0

在您的 $.ajax 调用中，您需要添加 async: true。以下代码对我有用：

$.ajax({
    url: 'ajax_url',
    data: 'sending_data',
    type: 'POST',
    cache : false,
    async: true,
    beforeSend: function() {
        $('#id_of_element_where_loading_needed').html('html_of_loading_gif');
    },
    success: function(data) {
        $('#id_of_element_where_result_will_be_shown').html(data.body);           
    }
});
于 2014-11-03T09:54:00.693 回答