將CallbackFunction作為參數傳遞給Ajax-Request

Question

我想異步獲取網站內容。 現在，我對服務器有多個請求，我認為將“連接材料”分離為另一種功能會很棒：

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所以，顯然錯誤是關於以錯誤的方式傳遞函數的，我不知道。 因為我的情況是，我對此提出了自己的問題。

謝謝您的回答:)

Answer 1

您正在嘗試從回調中使用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";
  });
}

Answer 2

在實現XMLHttp包裝器的過程中，我使用Function.prototype.call從XMLHttp Object范圍調用回調函數，因此您可以使用關鍵字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";
  });
}

Answer 3

由於傳遞給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";
    }
  });
}