Firefox擴展 - 每頁多個XMLHttpRequest調用

Question

我想創建一個Firefox擴展，每個頁面可以運行多個XMLHttpRequests。代碼如下（我的主函數在不同的URL上調用makeRequest）。我的問題是它總是返回（在「alert（'Found ...'）」用於調試目的）相同的URL而不是顯示不同的響應。我認爲問題在於我應該以某種方式將http_request實例傳遞給alertContents（）函數，而不是直接使用http_request，但不確定該方法是否正確。謝謝。

function makeRequest(url,parameters) { 
    http_request = false; 
    http_request = new XMLHttpRequest(); 
    if (http_request.overrideMimeType) { 
     http_request.overrideMimeType('text/xml'); 
    } 
    if (!http_request) { 
     alert('Cannot create XMLHTTP instance'); 
     return false; 
    } 
    http_request.onreadystatechange = alertContents; 
    http_request.open('GET', url + parameters, true); 
    http_request.send(null); 

} 

function alertContents() { 
    if (http_request.readyState == 4) { 
     if (http_request.status == 200) { 
      alert('Found: ' + http_request.responseText); 
     } else { 
     alert('There was a problem with the request.'); 
     } 
    } 
} 

Answer 1

你的問題是你只有一個http_request標識符在每次調用makeRequest函數時被重用。下面是一個簡單的調節： -

function makeRequest(url,parameters) { 
    var http_request = new XMLHttpRequest(); 
    if (http_request.overrideMimeType) { 
     http_request.overrideMimeType('text/xml'); 
    } 
    if (!http_request) { 
     alert('Cannot create XMLHTTP instance'); 
     return false; 
    } 
    http_request.onreadystatechange = function() { 
      alertContents(http_request) 
     }; 
    http_request.open('GET', url + parameters, true); 
    http_request.send(null); 
     return http_request; 
} 

function alertContents(http_request) { 
    if (http_request.readyState == 4) { 
     if (http_request.status == 200) { 
      alert('Found: ' + http_request.responseText); 
     } else { 
     alert('There was a problem with the request.'); 
     } 
       http_request.onreadystatechange = fnNull; 
    } 
} 

    function fnNull() { }; 

的HTTP_REQUEST標識符是本地的每個makeRequest的執行。然後，每次使用捕獲來觸發onreadystatechange時，將XHR的正確實例傳遞給alerrContents。

順便說一句，爲什麼從參數單獨的網址？由於調用者必須確保參數參數的URL編碼正確，因此它看起來不是非常有用的抽象。另外，調用者可以簡單地傳遞一個包含查詢字符串的URL。

Answer 2

是的，你應該使用相同的XMLHttpRequest。

逸岸，嘗試使用此代碼，看看它的工作原理：

function makeRequest(url,parameters) { 
    http_request = false; 
    http_request = new XMLHttpRequest(); 
    if (http_request.overrideMimeType) { 
      http_request.overrideMimeType('text/xml'); 
    } 
    if (!http_request) { 
      alert('Cannot create XMLHTTP instance'); 
      return false; 
    } 
    http_request.onreadystatechange = function() { 
     if (http_request.readyState == 4) { 
      if (http_request.status == 200) { 
         alert('Found: ' + http_request.responseText); 
      } else { 
       alert('There was a problem with the request.'); 
      } 
     } 
    }; 
    http_request.open('GET', url + parameters, true); 
    http_request.send(null); 
} 

在上面的代碼，我乾脆直接連接功能的onreadystatechange事件。

Answer 3

此功能可以跨瀏覽器的功能得到進一步改善：

function makeRequest(method, url, parameters) { 
    var http_request = false; 
    if (window.XMLHttpRequest) { // Mozilla, Safari,... 
     http_request = new XMLHttpRequest(); 
     if (http_request.overrideMimeType) { 
      // set type accordingly to anticipated content type 
      http_request.overrideMimeType('text/xml'); 
      //http_request.overrideMimeType('text/html'); 
     } 
    } else if (window.ActiveXObject) { // IE 
     try { 
      http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
     try { 
      http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (e) {} 
     } 
    } 
    if (!http_request) { 
     alert('Cannot create XMLHTTP instance'); 
     return false; 
    } 
    http_request.onreadystatechange = function() { 
     alertContents(http_request); 
    } 
    url += (method=="GET")?parameters:""; 
    http_request.open(method, url, true); 
    if (method == "POST") { 
     http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     http_request.setRequestHeader("Content-length", parameters.length); 
     http_request.setRequestHeader("Connection", "close"); 
    } 
    http_request.send((method=="GET")?null:parameters); 
}