複数の重複するXMLHttpRequestをどのように管理できますか？

Question

私は私の最初のAJAXのプロジェクトに取り組んでいる、と私は、次の機能を設定することによって開始しました：

function sendHTTPRequest(callback,filename,data) { 

    if (window.XMLHttpRequest) { 
     httpRequest = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
     httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    httpRequest.onreadystatechange = callback; 
    httpRequest.open('POST',rootAddress+filename, true); 
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    httpRequest.send(data); 

} 

function exampleCallback() { 

    if (httpRequest.readyState === XMLHttpRequest.DONE) { 
     if (httpRequest.status === 200) { 
      // successful, parse the XML data 
     } else { 
      // error 
     } 
    } else { 
     // not ready 
    } 
} 

は、これがうまく働いているが、私は今、私は1つ以上のものを持っているポイントに得ています同時のHTTP要求、そして私の単一のグローバルhttpRequest変数はそれを切断していません。私は配列を使用することができ、sendHTTPRequest()が呼び出されるたびに.push新しいXMLHttpRequestをスタックに追加できますが、スタック内のどのアイテムを解析するにはどのようにすればよいでしょうか？または、このプロセスを処理するためのより良い方法ですか？ （私は異なるページへのリクエストを処理するためにこれらを使用していますが、異なる結果を解析する必要があります）

ありがとう！

Answer 1

ローカル変数と要求ごとのコールバックを使用して、指定されたコールバックを呼び出します。必要な変更は驚くほど小さくなりました。あなたはそれがコールバックに（たとえば、filenameとdata引数）より多くの情報を与える可能性があり

function sendHTTPRequest(callback,filename,data) { 
    var httpRequest; // ** Local variable 

    if (window.XMLHttpRequest) { 
     httpRequest = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
     httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    // ** Callback specific to *this* request 
    httpRequest.onreadystatechange = function() { 
     if (httpRequest.readyState === XMLHttpRequest.DONE) { 
      if (httpRequest.status === 200) { 
       // successful, call the callback 
       callback(httpRequest); 
      } else { 
       // error, call the callback -- here we use null to indicate the error 
       callback(null); 
      } 
     } else { 
      // not ready 
     } 
    }; 
    httpRequest.open('POST',rootAddress+filename, true); 
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    httpRequest.send(data); 
} 

function exampleCallback(xhr) { 

    if (xhr) { 
     // successful, parse the XML data, for instance 
     var x = xhr.responseXML; 
    } else { 
     // not ready 
    } 
} 

：**行を参照してください。

約束を使用する場合、sendHTTPRequestはダイレクトコールバックを受け入れる代わりに約束を返すことができます。

Answer 2

httpRequest = new XMLHttpRequest(); 

グローバルを使用しないでください。ローカル変数を使用します。

if (httpRequest.readyState === XMLHttpRequest.DONE) { 

グローバルを使用しないでください。イベントハンドラは、それらが起動するオブジェクトのコンテキストで呼び出されます。 thisを使用してください。