0

我想异步获取我的网站的内容。现在我对我的服务器有多个请求，我认为将“连接东西”分离到另一个函数中会很棒：

function conToServerAsync( url, postParams, func )
{
   var xmlHttp;
   if( window.XMLHttpRequest )
   {
      xmlHttp = new XMLHttpRequest();
   }
   else
   {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlHttp.onreadystatechange = func;
   xmlHttp.open("POST", url, true);
   xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xmlHttp.setRequestHeader("Connection", "close");
   xmlHttp.send(postParams);
}

现在我有另一个执行“conToServerAsync”函数的函数，如下所示：

function findSearchResult(value)
{
  conToServerAsync( "Classes/Async/liveSearch.php", "sVal="+value, function()
  {
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
    {
    document.getElementById("searchResult").innerHTML = xmlHttp.responseText;
    document.getElementById("searchResult").style.border="1px solid #A5ACB2";
    }
  });
}

现在，我的案例真正有趣的是，我已经检查了所有内容，并且传入的每个参数都是有效的。然后我尝试将最后一个参数“conToServerAsync("Classes...", "sVal..", function(){...}" 中给出的函数直接分配给 onreadystatechange：

...
xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
            {
            document.getElementById("searchResult").innerHTML = xmlHttp.responseText;
            document.getElementById("searchResult").style.border="1px solid #A5ACB2";
            }
      }

...而且它工作得很好：S 所以肯定错误是关于以错误的方式传递函数，我不知道。因为我的情况是具体的，我对此提出了自己的问题。

谢谢你的回答:)

4

3 回答 3

2

您正在尝试xmlHttp从回调中使用，但它超出了范围。我建议采用以下方法：

function conToServerAsync( url, postParams, func )
{
   var xmlHttp;
   if( window.XMLHttpRequest )
   {
      xmlHttp = new XMLHttpRequest();
   }
   else
   {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlHttp.onreadystatechange = function() {
      if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
         func.call(xmlHttp, xmlHttp);
      }
   }
   xmlHttp.open("POST", url, true);
   xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xmlHttp.setRequestHeader("Connection", "close");
   xmlHttp.send(postParams);
}

function findSearchResult(value)
{
  conToServerAsync( "Classes/Async/liveSearch.php", "sVal="+value, function(xhr)
  {
    document.getElementById("searchResult").innerHTML = xhr.responseText;
    document.getElementById("searchResult").style.border="1px solid #A5ACB2";
  });
}
于 2013-04-02T21:38:47.710 回答
1

在 XMLHttp 包装器的实现中，我使用Function.prototype.call从 XMLHttp 对象范围调用回调函数，因此您可以使用关键字this访问属性，并且为了方便起见，我还将 responseText 作为参数传递。

if(typeof func=="function")
    func.call(xmlHttp, xmlHttp.responseText);

您可以轻松地在回调上打印响应

function callback(response){
    alert(response);
}

但是您仍然可以访问 XMLHttp 对象的所有属性

function callback(response){
    alert(this.status); //200
    alert(response);
}

完整代码：

function conToServerAsync( url, postParams, func ){

   var xmlHttp;
   if( window.XMLHttpRequest ){
      xmlHttp = new XMLHttpRequest();
   }
   else{
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlHttp.onreadystatechange = function() {
      if(xmlHttp.readyState==4 && xmlHttp.status==200){
        if(typeof func=="function")
            func.call(xmlHttp, xmlHttp.responseText);
      }
   }
   xmlHttp.open("POST", url, true);
   xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xmlHttp.setRequestHeader("Connection", "close");
   xmlHttp.send(postParams);
}

function findSearchResult(value){

  conToServerAsync( "Classes/Async/liveSearch.php", "sVal="+value, function(response){
    document.getElementById("searchResult").innerHTML = response;
    document.getElementById("searchResult").style.border="1px solid #A5ACB2";
  });
}
于 2013-04-02T21:50:39.697 回答
0

由于您传递给的函数xmlHttp.onreadystatechange是作为上下文调用的，xmlHttp因此您可以使用它this来引用该对象。

function findSearchResult(value)
{
  conToServerAsync( "Classes/Async/liveSearch.php", "sVal="+value, function()
  {
    if(this.readyState == 4 && this.status == 200)
    {
    document.getElementById("searchResult").innerHTML = this.responseText;
    document.getElementById("searchResult").style.border="1px solid #A5ACB2";
    }
  });
}
于 2013-04-02T22:16:53.310 回答