javascript - 为什么 XMLHttpRequest 实例只能发送一个请求？

Question

我正在尝试从 XMLHttpRequest 对象的单个实例发送多个请求，如下所示:

GC3D.Application.prototype.setMapTiles = function() {
    var ajaxInstance = new GC3D.Ajax();
    for ( var i = 0, j = 0; i < 10; i++ ) {
        var urlFinal = this.prepareRequestForTileDownload( i, j );
        ajaxInstance.sendRequest({
            id: { i: i, j: j },
            HttpMethod: 'GET',
            UrlEndpoint: urlFinal
        }).then( function( item ) {
                   //...
                });
       }

};

它不起作用并且仅发送一个请求。但!如果将源代码更改为下一个:

for ( var i = 0, j = 0; i < 10; i++ ) {
    var ajaxInstance = new GC3D.Ajax();
...

它开始发送与 for 循环迭代总数一样多的请求，并且一切正常。我更喜欢了解一些功能。就像我过去在 C# 开发中一样，如果我想异步创建某个 TCP 套接字的新实例，我从不创建循环中的某个 TCP 套接字的新实例 - 我会创建一个带有异步函数委托(delegate)的单个实例，并且如果 C# 项目中存在类似情况，例如JavaScript 代码位于问题的内容中，因为它不会在 for 循环中生成新对象，因此占用的内存更少，并且就架构而言，它表示为更干净和更好的解决方案。

GC3D.Ajax 定义为下一个原型(prototype):

GC3D.Ajax = function() {
    this.httpRequest = undefined;
    this.listExceptions = undefined;
    this.init();
};
GC3D.Ajax.prototype.init = function() {
    this.listExceptions = [];

    if ( window.XMLHttpRequest ) this.httpRequest = new XMLHttpRequest();
    else if ( window.ActiveXObject ) {
        try {
            this.httpRequest = new ActiveXObject( 'Microsoft.XMLHTTP' );
        }
        catch ( exception ) {
            this.listExceptions.push( exception );

            try {
                this.httpRequest = new ActiveXObject( 'Msxml2.XMLHTTP' );
            } 
            catch ( exception ) {
                this.listExceptions.push( exception );

                try {
                    this.httpRequest = new ActiveXObject( 'Microsoft.XMLHTTP' );
                } 
                catch ( exception ) {
                    this.listExceptions.push( exception );
                }
            }
        }
    }

    if ( !this.httpRequest ) {
        console.error( 'Can\'t create a HTTP Request instance for AJAX! Possible problems:' );
        console.error( this.listExceptions );
    }
};
GC3D.Ajax.prototype.sendRequest = function( properties ) {
    var defer = new GC3D.Defer();
    if ( this.httpRequest !== undefined ) {
        this.httpRequest.onreadystatechange = function() {
            if ( this.httpRequest.readyState === 4 && this.httpRequest.status === 200 ) {
                var objectOutput = {};
                objectOutput.id = properties.id;
                objectOutput.content = this.httpRequest.responseText;
                defer.resolve( objectOutput );
            }
            else {
                var message = 'There was a problem with the request in GC3D.Ajax.';
                defer.reject( message );
            }
        }.bind( this );
        this.httpRequest.open( properties.HttpMethod, properties.UrlEndpoint );
        this.httpRequest.send();
    }
    else console.error( 'HTTP Request instance isn\'t defined!' );
    return defer.promise;
};
GC3D.Ajax.prototype.get = function() {
    return this.httpRequest;
};

Answer 1

XMLHttpRequest API 的定义非常明确，这种行为毫无疑问。

open() 方法的定义第 13 步指出该方法应该:

Terminate the request. 

http://www.w3.org/TR/XMLHttpRequest/#the-open()-method

在浏览器中打开调试器并查看网络流量，发现实际上有多个请求正在异步发送，除了最后一个请求之外的每个请求都被下一个请求取消。

在本例中，在 ajaxInstance 的 sendRequest 方法内的 XMLHttpRequest 的同一实例上重复调用 open() 方法.