将CallbackFunction作为参数传递给Ajax请求

我想异步获取我网站的内容。现在，我有我的服务器的多个请求我认为这将是巨大的“conntection东西”单独成另一种功能：将CallbackFunction作为参数传递给Ajax请求

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（ ”类的功能......“， ”SVAL ..“，函数（）{...}” 直接到的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所以最初的错误是关于通过错误的方式传递函数，我不知道，因为我的情况是，我特别提出了自己的问题。回答:)

来源

2013-04-02 Hans123

您试图从回调中使用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-02 21:38:47 bfavaretto

或只使用'this' – Musa

作品完美:)感谢名单，让我晚上:) – Hans123

@Musa尼斯，改变了代码，允许这两种风格（当然不使用'this'的地方，我可以用它）。 – bfavaretto

在我执行的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-02 21:50:39

由于f您传递给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-02 22:16:53 Musa

将CallbackFunction作为参数传递给Ajax请求

回答

相关问题