如何使用 2 个依赖于另一个的 XMLHttpRequest? [英] How to work with 2 XMLHttpRequest one dependent on another?

问题描述

我正在做一个项目，其中有 2 个 XMLHttpRequest() 对象，比如 A 和 B.

I am working on a project where I have got 2 XMLHttpRequest() objects, say A and B.

我想要完成的是当A完成获取数据项列表时，将触发B根据A之前获取的数据项获取更多项.

What I want to accomplish is when A finish fetching a list of data items, B will be triggered to fetch some more items based on the previous data items fetch by A.

目前我的问题是这两个对象彼此独立工作.

Currently my problem is that the two objects are working independent of one another.

我的代码如下:

            var A = new XMLHttpRequest();

            var B = new XMLHttpRequest();

            A.open("GET", directory, true);
            A.onreadystatechange = function () {

                if (A.readyState === 4) {
                    if (A.status === 200 || A.status == 0) {
                     //does... something
                     }
                }

            }
            A.send(null);
            while(true){

                B.open("GET", another_directory, false);
                B.overrideMimeType("application/document");
                B.send(null);
                if (B.status == "404")
                continue;

                 //does... something else
            }

此代码不起作用，因为我发现 B 总是在 A 完成之前继续进行.我基本上不知道该使用哪个事件.

This code is not working because I find evertime B proceed before A can complete. I basically don't know which event to use.

我怎样才能实现我的目标?我可以使用哪些事件以便在完成 A 后立即同步处理 B?

How can I accomplish my objective? What events can I use so that I can sync processing B right after finishing with A?

推荐答案

好的，让我们从您的代码开始.我已经添加了一些评论，所以现在你可以理解问题的根源了:

Ok, so let's start with your code. I've added a few comments to it, so now you can understand the source of the problem:

var A = new XMLHttpRequest(); //You create an XMLHttpRequest object
var B = new XMLHttpRequest(); //And an another

A.open("GET", directory, true); 

/* Now you open a GET request to DIRECTORY, with async TRUE. The third parameter can 
make a request sync or async, but sync is not recommended as described below. */

A.onreadystatechange = function () {
    if (A.readyState === 4) {
        if (A.status === 200 || A.status == 0) {

        /* So you registered an event listener. It runs when the readyState changes.
        You can use it to detect if the request is finished or not. If the readyState is
        4, then the request is finished, if the status code is 200, then the response is
        OK. Here you can do everythin you want after the request. */

         }
    }

}

A.send(null); //Now you send the request. When it finishes, the event handler will
// do the processing, but the execution won't stop here, it immediately goes to the 
// next function

while(true){ // Infinite loop
     B.open("GET", another_directory, false); //Open request B to ANOTHER_DIRECTORY,
     // but now, request B will be synchronous

     B.overrideMimeType("application/document"); // Configure mime type

     B.send(null); // Send the request

     if (B.status == "404")
         continue;
         // If it's not found, then go to the next iteration

     // and do something else
}

我希望现在你能看到问题的根源.当您运行此脚本时，您将启动一个异步请求，然后立即启动下一个请求.现在您可以从 2 种方式中进行选择.

I hope that now you can see the source of the problem. When you run this script, then your start an async request and then immediately start the next one. Now you can choose from 2 ways.

这是更好的方法.因此，启动您的第一个(异步)请求，然后在事件侦听器(您进行处理的地方)中启动下一个请求.我在这里做了一个评论的例子:http://jsfiddle.net/5pt6j1mo/1/

It's the better way. So start your first (async) request and in the event listener (where you do the processing) you can start the next request. I've made a commented example here: http://jsfiddle.net/5pt6j1mo/1/

(你可以在没有数组的情况下完成 - 这只是一个例子)

如果您使用这种方式，那么在您等待响应之前，GUI 不会冻结.一切都将负责，以便您可以与页面交互，您可以创建取消按钮等.

If you use this way then the GUI won't freeze until you are waiting for response. Everything will be responsible so you can interact with the page, you can create cancel button, etc.

我不推荐它，因为在 Chrome 中主线程上的同步 XMLHttpRequest 已被弃用"，但如果你真的想要，那么你可以尝试使用这个解决方案.所以一个 XMLHttpRequest 的 open 函数有 3 个参数:

I don't recommend it because "Synchronous XMLHttpRequest on the main thread is deprecated" in Chrome, but if you really want to then you can try to use this solution. So an XMLHttpRequest's open function has 3 arguments:

• METHOD:使用哪种 HTTP 方法
• URL:请求的 URL
• ASYNC:异步请求?如果为 false，那么它将是同步的，这意味着在您调用 .send() 之后，它将暂停执行，直到响应返回.

因此，如果您将第三个参数设置为 FALSE，那么您可以轻松做到……但您不应该这样做！

So if you set the third parameter to FALSE then you can easily do it... but you shouldn't!

这篇关于如何使用 2 个依赖于另一个的 XMLHttpRequest?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！