jqueryを使用しない複数のAjax呼び出しのオーバーライド値

Question

複数のajax呼び出しを同時に呼び出す際に問題があります。私はsetXValuesを使ってドームの値を変更して3つの値のセットを設定するために、ページロード時に次の3つのgetXValues関数を呼び出します。

この条件では、1つの関数だけが実行され、3つのフィールドすべてで同じ値が設定されます。

以前のsetXValuesの値でそれぞれの関数を呼び出すと、すべて正常に動作し、前の関数が完了しなければならない場合には、setXValuesを呼び出します。

function getIValues(){ 
    var url = "./Servlet?ajaxAction=getIDetail&id="+id; 
    ajaxRequestForChange(url,"I"); 
} 

function getFValues(){ 
    var url = "./Servlet?ajaxAction=getFDetail&id="+id; 
    ajaxRequestForChange(url,"F"); 
} 

function getCValues(){ 
    var url = "./Servlet?ajaxAction=getCDetail&id="+id; 
    ajaxRequestForChange(url,"C"); 
} 

var ajaxRequestForChange = function(url,fun) { 
     var strURL = url; 
     var xmlHttpRequest = false; 
     var self = this; 
     // Mozilla, Safari 
     if (window.XMLHttpRequest) { 
      self.xmlHttpRequest = new XMLHttpRequest(); 
     } else if (window.ActiveXObject) { // IE 
      self.xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     self.xmlHttpRequest.open("POST", strURL, true); 
     self.xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
     self.xmlHttpRequest.onreadystatechange = function() { 
      if (self.xmlHttpRequest.readyState == 4) { 
       if (self.xmlHttpRequest.status == 200) { 
        var htmlString = self.xmlHttpRequest.responseText; 

        if(fun == 'I'){ 
         setIValues(htmlString); 
        } 
        if(fun == 'F'){ 
         setFValues(htmlString); 
        } 
        if(fun == 'C'){ 
         setCValues(htmlString); 
        } 

       } else { 
        ajaxFailedCount++; 
        // Try for 1 min (temp fix for racing condition) 
        if (ajaxFailedCount < 1200) {window.setTimeout(function() {ajaxRequest(url)}, 50);} 
        else {alert("Refresh failed!")}; 
       } 
      } 
     } 
     self.xmlHttpRequest.send(null); 
    } 

私の問題を解決する方法を提示することができれば、それは十分に役立つでしょう。

注：また、私はUIコンポーネント（私はそれが、選択の余地が嫌い...）あなたの助けを事前に

おかげで、その一部ではないので、jQueryのを使用することはできませんのでご注意ください。

Answer 1

問題は範囲とコンテキストのうちの1つですthisです。あなたの関数では：機能ajaxRequestForChangeは常にグローバルスコープで実行されているが

var ajaxRequestForChange = function(url,fun) { 
    var strURL = url; 
    var xmlHttpRequest = false; 
    var self = this; 
... 

あなたはvar self = this;を割り当てます。だから、後であなたが行うときに：

if (window.XMLHttpRequest) { 
    self.xmlHttpRequest = new XMLHttpRequest(); 
} else if (window.ActiveXObject) { // IE 
    self.xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
self.xmlHttpRequest.open("POST", strURL, true); 
... 

あなたはajaxRequestForChangeに各呼び出しで同じOBJ selfを使用し、プロパティxmlHttpRequestたびに上書きされます。 var self = this;を削除し、それを使用するすべての行からself.を削除すると、問題が解決するはずです。したがって、上記のようになります。

var ajaxRequestForChange = function(url,fun) { 
    var strURL = url; 
    var xmlHttpRequest = false; 
... 

と

if (window.XMLHttpRequest) { 
    xmlHttpRequest = new XMLHttpRequest(); 
} else if (window.ActiveXObject) { // IE 
    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlHttpRequest.open("POST", strURL, true); 
...