javascript – 如何使用2 XMLHttpRequest一个依赖于另一个?

我在一个项目上工作,我有2个 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?

解决方法

好的,让我们开始你的代码.我已经添加了一些意见,所以现在你可以了解问题的根源:
var A = new XMLHttpRequest(); //You create an XMLHttpRequest object
var B = new XMLHttpRequest(); //And an another

A.open("GET",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",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种方式中选择.

从回调运行下一个请求(推荐)

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

(你可以没有数组来做 – 这只是一个例子)

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

同步AJAX(不推荐)

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

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

所以如果你把第三个参数设置为FALSE,那么你可以轻松地做到这一点…但是你不应该!

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...