[英]Passing CallbackFunction as Parameter for Ajax-Request
I want to get content for my website asynchronously. 我想异步获取网站内容。 Now that I have more than one requests for my server I thought it would be great to seperate the "conntection Stuff" into another function: 现在,我对服务器有多个请求,我认为将“连接材料”分离为另一种功能会很棒:
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);
}
Now I have this other function which is executing the "conToServerAsync" function like this: 现在,我有另一个函数正在执行“ 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";
}
});
}
Now whats actually interesting about my case is that I've checked everything and every parameter that is passed in is valid. 现在,我的案例真正有趣的是,我检查了所有内容,并且传入的每个参数均有效。 Then I tried to allocate the function that is given in the last parameter "conToServerAsync( "Classes...", "sVal..", function(){...}" directly to the onreadystatechange: 然后,我尝试将最后一个参数“ 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";
}
}
... and it works perfectly :S So definitly the error is about passing the function on a wrong way and I have no idea. ...并且它可以完美地工作:S所以,显然错误是关于以错误的方式传递函数的,我不知道。 Cos my case is that specific I made a own question about it. 因为我的情况是,我对此提出了自己的问题。
Thank you for answering :) 谢谢您的回答:)
You're trying to use xmlHttp
from the callback, but it's out of scope. 您正在尝试从回调中使用xmlHttp
,但超出范围。 I suggest the following approach: 我建议采用以下方法:
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";
});
}
On my implementation of the XMLHttp wrapper I use the Function.prototype.call to call the callback function from the XMLHttp Object scope, So you can use the keyword this
to access properties and I also pass the responseText as a parameter for convenience. 在实现XMLHttp包装器的过程中,我使用Function.prototype.call从XMLHttp Object范围调用回调函数,因此您可以使用关键字this
来访问属性,并且为了方便起见,我还将responseText作为参数传递。
if(typeof func=="function")
func.call(xmlHttp, xmlHttp.responseText);
You can easily print the response on the callback 您可以轻松在回调上打印响应
function callback(response){
alert(response);
}
But you can still have access to all properties of the XMLHttp Object 但是您仍然可以访问XMLHttp对象的所有属性。
function callback(response){
alert(this.status); //200
alert(response);
}
Full code: 完整代码:
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";
});
}
Since the function you passed to xmlHttp.onreadystatechange
is called with xmlHttp
as the context you can use this
to refer to that object. 由于传递给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";
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.