如何将回调添加到 AJAX 变量赋值

How to add callback to AJAX variable assignment

本文关键字：AJAX 变量 赋值 添加 回调      更新时间：2023-09-26

我有一个变量responce，它是通过 AJAX 函数send()分配的。当我做作业时...

responce = send();

发送前返回响应是否给我一个undefined如何添加回调以防止这种情况发生？

编辑：澄清我在问什么。

它仍然返回未定义。我正在使用函数分配变量 发送 发送返回 onreadystatechange但是当我的代码正在执行时。响应在 send（） 可以返回之前返回为未定义。如何阻止响应下的代码运行，直到为响应分配了发送值？

编辑2：

以下代码是我的发送函数...

 function send(uri)
{
    var xhr = new XMLHttpRequest();
    xhr.open("POST",uri,true);
    xhr.onreadystatechange = function (send){
        if(xhr.readyState == 4){
            return xhr.responseText;
        }   
    }
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
    xhr.send(null);
}

您正在以异步方式使用 Ajax，但您正在将其视为同步的。

异步调用将关闭以完成其工作，而初始发送调用执行后的其余代码。您正在未定义，因为代码未返回任何内容。

如果您查看 XMLHttpRequest 对象，则 open 方法中的第三个参数是异步标志。 

open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])

将其设置为 true [默认值为关闭] 将进行异步调用。将其设置为 false 将使其同步。

使用同步调用的问题在于它会锁定用户的浏览器，直到返回调用。这意味着动画 gif 的东西、浏览器计时器停止等等。如果服务器需要很长时间才能响应，则用户无法执行任何操作。

最好的解决方案是避免使用同步调用。使用回调继续代码执行流。

因此，根据您的编辑，我将使用基本解决方案编辑我的回复

function send(uri, callback)
{
    var xhr = new XMLHttpRequest();
    xhr.open("POST",uri,true);
    xhr.onreadystatechange = function (send){
        if(xhr.readyState == 4){  //You really should check for status here because you can get 400, 500, etc
            callback(xhr.responseText);
            //return 
        }   
    }
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
    xhr.send(null);
}

function myFunction(){
  var myUrl = "foo.php";
  //show a loading message or soemthing
  var someDiv = document.getElementById("loadingMessage");
  someDiv.style.display = "block";
  //Second half of your function that handles what you returned.
  function gotData( value ){
      someDiv.style.display = "none";
      alert(value);
  }
  send(myUrl, gotData);
}

如果您真的想进行同步并且不介意锁定用户的浏览器

function send(uri, callback)
{
    var xhr = new XMLHttpRequest();
    xhr.open("POST",uri,false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
    xhr.send(null);
    if(xhr.status==200){
        return xhr.responseText;
    }
    else{
        return null;
    }
}

我想你说的是XMLHTTPRequest.send()方法，而不是框架的包装器。

send不返回任何内容。 它将始终返回undefined .

要获得HTTP响应，您需要监视onreadystatechange，正如无数的StackOverflow答案和互联网教程（例如这个）所证明的那样。

您必须将

值分配给请求的 readystatechange 事件的响应，如下所示：

req.onreadystatechange = function(){
 if (req.readyState===4) { // checks if data is already loaded.
    callback(req.responseText,req.status);  //call your callback function with response and status as parameters.           
 }
};

试试这个：

function send(uri, callback)
{
    var xhr = new XMLHttpRequest();
    xhr.open("POST",uri,true);
    xhr.onreadystatechange = function (send){
        if(xhr.readyState == 4 and callback){
            callback();
        }   
    }
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
    xhr.send(null);
}
send("uri here", function(){
    //whatever needs to be done after request
})
相关文章：