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); 
}