将callback函数作为Ajax-Request的参数传递
Passing CallbackFunction as Parameter for Ajax-Request
我想为我的网站异步获取内容。现在我对服务器有多个请求,我认为将"连接内容"分离到另一个函数中会很好:
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所以错误是关于传递函数的错误方式,我不知道。因为我的情况很具体,所以我提出了一个关于它的问题。
谢谢你的回答
您正试图从回调中使用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";
});
}
在我的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";
});
}
由于您传递给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";
}
});
}
相关文章:
- Javascript ajax request
- 原型Ajax请求参数为嵌套json
- Ajax中参数后缺少括号
- Ajax-Request:将动态内容传递给模态
- 发送数组 ajax.request 原型
- rails jquery ajax request not executing
- 带有 ClojureScript 的 AJAX Request 有时在 Chrome 上将 nil 作为参数
- ExtJS使用控制器中的View Form Data作为Ajax请求参数
- jQuery AJAX数据参数
- Ajax request Post Params
- Ajax request Codeigniter
- 使用Ext.Ajax.request使ExtJS单例返回对象
- 我可以使用javascript但不使用jquery或ajax将参数发送到php控制器吗
- jQuery to Javascript Conversion for AJAX request
- jQuery - AJAX Request
- 使用 HTML、javascript 和 jQuery 使用 Ajax Request 将图像上传到 Amazon s3
- jQuery POST Ajax request
- Ajax 数据参数到外部域上的 php 文件
- 如何在jQuery中使用Ajax.request传递参数
- 将callback函数作为Ajax-Request的参数传递