Javascript 对AJAX请求进行回调以将响应返回给调用方

我找遍了所有地方，没有一个答案能帮我解决这个问题。基本上，我有一个函数，它调用一个单独的函数来生成

XMLHttpRequest

。该请求发送到服务器，服务器生成一个随机数并将其返回到页面

问题在于，当请求获取数据时，调用方函数通过其命令继续执行。我需要从请求中获得数据，然后调用方才能继续。人们提到了回电和承诺，但我无法从网上了解到。我宁愿使用回调，因为承诺在所有浏览器中都不受支持。有人能帮我介绍一下如何使用它们吗？如果需要，我可以提供一些代码

以下是我的调用者函数：

function plotData(dataSet) 
{   
var x = xScale+20; // 20 = margin length
var y = 260;    //origin of graph

getRequest();
console.log("x = "+x);  
console.log("dataSet = "+dataSet[0]+", "+dataSet[1]); 
... //rest of the function commands
}

以下是我的XML请求：

function getRequest()
{
var request;

if (window.XMLHttpRequest) 
{ // Mozilla, Safari, IE7+ ...
    request = new XMLHttpRequest();
} 
else if (window.ActiveXObject) 
{ // IE 6 and older
    request = new ActiveXObject("Microsoft.XMLHTTP");
}   
    request.onreadystatechange = function()
    {   
        console.log('onReady');
        if (request.readyState === XMLHttpRequest.DONE)
        {
            if (request.status === 200)
            {
                random = request.responseText;
                random = parseInt(random);
                random = random/100;
                random = random.toFixed(2);
                console.log("random = " +random);
                data[1] = random;
                console.log("data = "+data[0]+", "+data[1]);
            }
        else
        {
            alert ('There was a problem with the request');
        }

        }
}   
request.open("GET", "lak1010_hw05.php", true);
request.send();     
}

---

承诺是实现这一目标的途径。您可以使用Promise polyfill来帮助处理不受支持的浏览器

var myPromise = (function() {
    return new Promise(function(resolve, reject) {
        $.ajax({
            url:'/page.php?id=123',
            type:'POST',
            success: function(data) {
                resolve(data);
            }
        });
    });
})();
myPromise.then(function(data) {
  // Continue code here
});

基本上，您创建了一个承诺，该承诺通过AJAX调用返回的数据得到解决

myPromise.then（）

在承诺得到解决时被激发，您将使用在承诺解决中传递的数据继续在那里执行代码。如果AJAX出现错误或数据无效等，您还可以

reject（）

承诺

您的代码如下所示：

function plotData(dataSet) 
{   
var x = xScale+20; // 20 = margin length
var y = 260;    //origin of graph
var myPromise = new Promise(function(resolve, reject) {
    $.ajax({
        url:'/page.php?id=123',
        type:'POST',
        success: function(dataSet) {
            resolve(dataSet);
        }
    });
});

myPromise.then(function(dataSet) {
    console.log("x = "+x);  
    console.log("dataSet = "+dataSet[0]+", "+dataSet[1]); 
    ... //rest of the function commands
});


}

只需回调就更简单了：

function plotData(dataSet) 
{   
var x = xScale+20; // 20 = margin length
var y = 260;    //origin of graph

    $.ajax({
        url:'/page.php?id=123',
        type:'POST',
        success: function(dataSet) {
            console.log("x = "+x);  
            console.log("dataSet = "+dataSet[0]+", "+dataSet[1]); 
            ... //rest of the function commands
        }
    });

}

---

承诺是实现这一目标的途径。您可以使用Promise polyfill来帮助处理不受支持的浏览器

var myPromise = (function() {
    return new Promise(function(resolve, reject) {
        $.ajax({
            url:'/page.php?id=123',
            type:'POST',
            success: function(data) {
                resolve(data);
            }
        });
    });
})();
myPromise.then(function(data) {
  // Continue code here
});

基本上，您创建了一个承诺，该承诺通过AJAX调用返回的数据得到解决

myPromise.then（）

在承诺得到解决时被激发，您将使用在承诺解决中传递的数据继续在那里执行代码。如果AJAX出现错误或数据无效等，您还可以

reject（）

承诺

您的代码如下所示：

function plotData(dataSet) 
{   
var x = xScale+20; // 20 = margin length
var y = 260;    //origin of graph
var myPromise = new Promise(function(resolve, reject) {
    $.ajax({
        url:'/page.php?id=123',
        type:'POST',
        success: function(dataSet) {
            resolve(dataSet);
        }
    });
});

myPromise.then(function(dataSet) {
    console.log("x = "+x);  
    console.log("dataSet = "+dataSet[0]+", "+dataSet[1]); 
    ... //rest of the function commands
});


}

只需回调就更简单了：

function plotData(dataSet) 
{   
var x = xScale+20; // 20 = margin length
var y = 260;    //origin of graph

    $.ajax({
        url:'/page.php?id=123',
        type:'POST',
        success: function(dataSet) {
            console.log("x = "+x);  
            console.log("dataSet = "+dataSet[0]+", "+dataSet[1]); 
            ... //rest of the function commands
        }
    });

}

---

编辑：妈的，我错过了你的编辑，还以为这只是一个一般性的承诺问题

这是一个带参数的函数：

test=功能（参数）{
if（参数）{
返回真值
}否则{
返回错误
}
}

编辑：妈的，我错过了你的编辑，以为这只是一个一般性的承诺问题

这是一个带参数的函数：

test=功能（参数）{
if（参数）{
返回真值
}否则{
返回错误
}
}

尝试新的获取API。jQuery的承诺已经被打破了：/

=>

---

尝试新的fetchapi。jQuery的承诺已经被打破了：/

=>

---

这是您修改的带有回调的

getRequest

函数

function getRequest(callback)
{
var request;

if (window.XMLHttpRequest) 
{ // Mozilla, Safari, IE7+ ...
    request = new XMLHttpRequest();
} 
else if (window.ActiveXObject) 
{ // IE 6 and older
    request = new ActiveXObject("Microsoft.XMLHTTP");
}   
    request.onreadystatechange = function()
    {   
        console.log('onReady');
        if (request.readyState === XMLHttpRequest.DONE)
        {
            if (request.status === 200)
            {
                random = request.responseText;
                random = parseInt(random);
                random = random/100;
                random = random.toFixed(2);
                console.log("random = " +random);
                data[1] = random;
                console.log("data = "+data[0]+", "+data[1]);
                // here call your callback
                callback(random);
            }
        else
        {
            alert ('There was a problem with the request');
        }

        }
}   
request.open("GET", "lak1010_hw05.php", true);
request.send();     
}

您的呼叫方式

function plotData(dataSet) 
{   
var x = xScale+20; // 20 = margin length
var y = 260;    //origin of graph

getRequest(function(random){
   console.log('Random number received:');
   console.log(random);
});
console.log("x = "+x);  
console.log("dataSet = "+dataSet[0]+", "+dataSet[1]); 
... //rest of the function commands
}

---

这是您修改的带有回调的

getRequest

函数

function getRequest(callback)
{
var request;

if (window.XMLHttpRequest) 
{ // Mozilla, Safari, IE7+ ...
    request = new XMLHttpRequest();
} 
else if (window.ActiveXObject) 
{ // IE 6 and older
    request = new ActiveXObject("Microsoft.XMLHTTP");
}   
    request.onreadystatechange = function()
    {   
        console.log('onReady');
        if (request.readyState === XMLHttpRequest.DONE)
        {
            if (request.status === 200)
            {
                random = request.responseText;
                random = parseInt(random);
                random = random/100;
                random = random.toFixed(2);
                console.log("random = " +random);
                data[1] = random;
                console.log("data = "+data[0]+", "+data[1]);
                // here call your callback
                callback(random);
            }
        else
        {
            alert ('There was a problem with the request');
        }

        }
}   
request.open("GET", "lak1010_hw05.php", true);
request.send();     
}

您的呼叫方式

function plotData(dataSet) 
{   
var x = xScale+20; // 20 = margin length
var y = 260;    //origin of graph

getRequest(function(random){
   console.log('Random number received:');
   console.log(random);
});
console.log("x = "+x);  
console.log("dataSet = "+dataSet[0]+", "+dataSet[1]); 
... //rest of the function commands
}

---

---

您必须使用回调。你能发布你尝试过的代码吗？我可以告诉你关于回调的情况吗？@Aruna刚刚添加了它。你能发布

getRequest

函数代码吗？我会修复它，因为它看起来很简单。@Aruna发布了整个函数我发布了修改过的代码，请尝试一下。你必须使用回调。你能发布你尝试过的代码吗？我可以告诉你关于回调的情况吗？@Aruna刚刚添加了它。你能发布

getRequest

函数代码吗？我会修复它，因为它看起来很简单。@Aruna发布了整个函数我发布了修改过的代码，请尝试一下。这与我发现的很多东西类似在线，你能试着把它放在我提供的代码的上下文中吗？（不是要求你为我编写程序，我只是对模糊的函数名感到困惑。）我找到了答案，但我感谢你的帮助。我会更深入地研究它们，希望能更好地理解它们。你需要为它们使用jQuery吗？不需要jQuery只是为了简洁地显示Ajax请求而使用它。这与我在网上找到的很多东西类似，你能试着将它放在我提供的代码的上下文中吗？（不是要求你为我编写程序，我只是对模糊的函数名感到困惑。）我找到了答案，但我感谢你的帮助。我会更深入地研究它们，希望能更好地理解它们。你需要为它们使用jQuery吗？不需要jQuery只是为了简单地显示Ajax请求而已。昨晚睡觉前我在想这个问题。代码起作用了，但我不知道为什么或者如何。你能解释一下这是怎么回事吗？如果从未定义

回调

函数，为什么它可以工作？在

getRequest

调用

plotData

中到底发生了什么？当您从

plotData

调用

getRequest

函数时，您将整个函数

函数（随机）{…}

作为名为

callback

的参数传递给

getRequest

的函数实现。一旦ajax响应在

getRequest

函数中得到，那么作为参数

callback

引用的相同函数将作为

callback（random）

调用。因此，将执行所提供函数中的代码。就这样！反复阅读此内容，直到您理解此内容，或者在google中搜索术语callback以获得更多理解。因此，

callback

实际上是在

plotData

中定义的，

getRequest

在其自身中执行此函数，完成，然后继续调用。

callback

是否必须位于

getRequest

命令的末尾？是的，您是对的。正如您所说，

callback

是在调用者中定义的，异步（ajax）操作结束后，从

getRequest

返回调用者的方法。这就是为什么它被称为

callback

<代码>回调