Question

我正在开发一个项目，我有两个XMLHttpRequest（）对象，比如A和B.

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

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

我的代码如下：

            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
            }

此代码无效，因为我发现在A完成之前，evertime B会继续进行。我基本上不知道要使用哪个事件。

我如何实现目标？我可以使用哪些事件以便在完成A后立即同步处理B.

Answer 1

以下是另一种解决方案，使用the fetch API或promisify native XHR，此问题变得更加简单：

fetch(directory).then(function(response){
    // some processing
    return fetch(another_directory); // can change content type too, see the mdn docs
}).then(function(responseTwo){
      // all processing is done
}).catch(function(err){
      // handle errors from all the steps above at once
});

这与XHR一样原生，并且使用promises管理要简单得多。

Answer 2

（经过漫长的编辑）我强烈建议您花时间了解JavaScript中异步调用的本质。这里有一些推荐阅读。Asynchronous Programming in JavaScript我认为这很简单，可以理解发生了什么。注意：停止阅读＆＃34;进入Mobl＆＃34;。

在JavaScript中调用函数时，系统会将该函数放入“队列”中。用一个隐含的指令继续并尽快运行它。它为每个函数调用执行此操作。在你的情况下，你告诉系统运行A，然后运行B. A进入队列，B进入队列。它们作为单独的功能提交。 B恰好先运行。

对于普通函数，如果要控制序列，可以在B函数调用中嵌套A函数调用。但是哎呀。您正在使用XMLHttpRequest，因此限制了您自定义功能的能力。继续阅读。查看Ajax Patterns on the subject查看＆＃34; Asynchronous Calls＆＃34;的段落。看看你的代码......

A.onreadystatechange = function () {
    if (A.readyState === 4) {
         if (A.status === 200 || A.status == 0) {
             //does... something
             (RUN ALL THE B.methods right here...)
         }
    }
}

我认为这会让你到达目的地，假设你想要一个没有jQuery的解决方案。

对于只想要一个正常运行的系统，并且不想更好地理解语言的人来说，这里是一个jquery解决方案......注意B函数调用是如何嵌套在A函数调用中的。请注意，此嵌套的顺序基于jQuery成功标记的存在。如果不使用jQuery，您将手动必须嵌套适当的函数。

var special_value;
$("button").click(function(){
    $.ajax({url: "demo_testA.html", 
            type: 'GET',
            success: function(resultA){
               special_value = resultA;
               $.ajax({url: "demo_testB.html",
                      type: 'GET', 
                      data: special_value, 
                      success: function(resultB){
                            $("#div1").html(resultB);
               }});
    });
});

我会说，帮助您更好地使用更好的通信会更容易。如果你不喜欢某些东西，那就说明了。如果您不了解某些内容，请要求更多说明或编辑您的问题陈述。反馈是件好事。

如何使用2个依赖于另一个的XMLHttpRequest？

2 个答案: