Javascript 同步 XMLHttpRequest 的替代方案(在 Safari 中超时)

2022-01-15 00:00:00 timeout xmlhttprequest javascript safari

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

Short version: Looking for a method to wait for an Asynch XHR request or a way to get Synch XHR working in Safari.

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

Much longer version: I'm working on a web service that uses various external data sources mashed together. I am using a Javacript front-end which makes AJAX/XHR calls to my PHP server code. There's no cross-site issues as the client only requests data from my server (the server makes the external data requests).

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

I'm using a synchronous XHR request as I have some post-load processing (sorting, filtering, etc) to do on the data before it is presented on screen.

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

This all works fine on IE, FF and Opera, but seems to be a problem to Safari (I haven't tried Chrome yet).

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

Using Firebug for Safari on my Windows machine I can see the server calling beng made and then it fails after a time above 10 seconds. On my iPad the message is slightly beter as it says: NETWORK_ERR: XMLHttpRequest Exception 101: A network error occurred in synchronous mode.

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

A bit of research indicates that Safari will timeout after 10 seconds in synch mode. There appears to be a timeout function which timeout function you can use to extend this (with a max limit for Safari of 60 seconds). Unfortunately I can't get this to work.

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

I'm now wondering what people would suggest as the best way of working around this through changes to the client Javacript code.

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

The two options I'm thinking are (i) find a working example of a synch XHR timeout that Safari browsers will honour; or (ii) having some sort of wrapper around an asynch XHR call so that the post-load processing waits for the load first.

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

I'm not a particulalry experienced Javascript hacker, but I have setup a fair amount on this project. I haven't used JQuery or any other frameworks and would prefer to keep with raw JS just to avoid having to learn the additional syntax. [You may see from my previous posts I tried using JQM and Spry in the past, but both proved to be the wrong choices, at least at this stage and have since been ditched for now].

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

I get the feeling a callback may be the right wait-for-asych option, but I'm not sure how this works or how you would code it.

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

This is just a prototype at this stage, so dirty hacks are acceptable. A full re-write is already on the cards for later on once I have proven functionality.

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

Appreciate peoples thoughts and advice on this.

问候，皮特.

推荐答案

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

Generally, you'll want to stick to asynchronous requests, as they're non-blocking. And with them, you'll want to use a callback -- or, simply, a function that is setup to be called later.

您可以使用 onreadystatechange 属性设置回调XMLHttpRequest:

You can set the callback with the onreadystatechange property of an XMLHttpRequest:

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

正如属性名所暗示的，它会在readyState的值改变时被调用，其中4的值表示请求已经完成(成功与否).

As the property name suggests, it will be called as the value of readyState changes, where a value of 4 means the request has completed (successful or not).

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

You'd then handle your sorting, filtering, etc. within another function -- in this example, handleSuccess.

您还可以从使用许多现有库中的任何一个中受益——例如，jQuery(为此需要 1.6 或更高版本片段):

You can also benefit from using any of a number of existing libraries -- e.g., jQuery (1.6 or later for this snippet):

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

相关文章