Javascript 同步 XMLHttpRequest 的替代方案（在 Safari 中超时）答案

【问题标题】：Alternatives for Javascript Synchronous XMLHttpRequest (as timing out in Safari)Javascript 同步 XMLHttpRequest 的替代方案（在 Safari 中超时）
【发布时间】：2012-04-09 16:48:12
【问题描述】：

短版：正在寻找等待异步 XHR 请求的方法或让同步 XHR 在 Safari 中工作的方法。

更长的版本：我正在开发一个使用混合在一起的各种外部数据源的 Web 服务。我正在使用 Javacript 前端，它可以对我的 PHP 服务器代码进行 AJAX/XHR 调用。不存在跨站点问题，因为客户端只向我的服务器请求数据（服务器发出外部数据请求）。

我正在使用同步 XHR 请求，因为在数据显示在屏幕上之前，我需要对数据进行一些加载后处理（排序、过滤等）。

这在 IE、FF 和 Opera 上都可以正常工作，但对 Safari 来说似乎是个问题（我还没有尝试过 Chrome）。

在我的 Windows 机器上使用 Firebug for Safari，我可以看到服务器调用 beng，然后在 10 秒以上的时间后失败。在我的 iPad 上，消息稍微好一些，因为它说：NETWORK_ERR: XMLHttpRequest Exception 101: A network error occurred in synchronous mode.

一些研究表明 Safari 会在同步模式下 10 秒后超时。似乎有一个超时功能，您可以使用该超时功能来扩展它（Safari 的最大限制为 60 秒）。不幸的是，我无法让它工作。

我现在想知道人们会建议通过更改客户端 Javacript 代码来解决此问题的最佳方法。

我正在考虑的两个选项是 (i) 找到 Safari 浏览器将遵守的同步 XHR 超时的工作示例；或 (ii) 对异步 XHR 调用进行某种包装，以便加载后处理首先等待加载。

我不是一个特别有经验的 Javascript 黑客，但我已经在这个项目上设置了相当数量。我没有使用过 JQuery 或任何其他框架，我更愿意使用原始 JS，以避免学习额外的语法。 [你可能从我之前的帖子中看到，我过去曾尝试使用 JQM 和 Spry，但事实证明两者都是错误的选择，至少在现阶段，现在已经被抛弃了]。

我觉得回调可能是正确的等待异步选项，但我不确定它是如何工作的，或者你将如何编码。

这只是现阶段的原型，因此可以接受肮脏的黑客攻击。一旦我证明了功能，就已经准备好完全重写。

感谢人们对此的想法和建议。

问候，皮特。

【问题讨论】：

我不会在这个特定问题上提供太多帮助，因为自从我写了一个“老派”AJAX 调用以来，它已经永远存在了。我肯定会让你重新访问 jQuery——如果不是现在，很快。您可以在几行代码中进行复杂的 AJAX 调用，这些调用已经在多个浏览器中反复测试过。我曾经拒绝学习 jQuery，但现在我意识到这是一个错误。花时间学习强大、更稳定（且更易于使用）的 AJAX 调用都是值得的。
嗨@Volkner。我认为 jQuery 在不久的将来可能会成为一个明智的选择，但如果可能的话，我现在更喜欢原始的 JS 解决方法。这是一个优先事项，我很想尽快让我的原始原型工作，如果可以的话，我会避免花时间学习其他/替代方法。

标签： javascript safari timeout xmlhttprequest

【解决方案1】：

通常，您会希望坚持使用异步请求，因为它们是非阻塞的。有了它们，您将需要使用回调 - 或者简单地说，是一个设置为稍后调用的函数。

您可以使用onreadystatechange property 的XMLHttpRequest 设置回调：

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {   // DONE
        if (xhr.status === 200) { // OK
            handleSuccess(xhr);
        } else {
            handleError(xhr);
        }
    }
};

正如属性名称所暗示的，它将在readyState 的值发生变化时调用，其中4 的值表示请求已完成（成功与否）。

然后，您将在另一个函数中处理排序、过滤等 - 在本例中为 handleSuccess。

您还可以从使用许多现有库中的任何一个中受益——例如，jQuery（此 sn-p 为 1.6 或更高版本）：

$.get('/web/service/request')
    .done(function (result) {
        // sorting, filtering, etc
    })
    .fail(function (xhr) {
        // error notification, etc.
    });

【讨论】：