进行AJAX请求的回调以将响应返回给调用者 [英] Making a Callback for AJAX Requests to return the response to the caller

问题描述

我到处都是，到处都找不到答案可以帮助我解决这个问题。基本上，我有一个函数，该函数调用一个单独的函数来生成 XMLHttpRequest 。该请求转到服务器，该服务器生成一个随机数并将其返回到页面。

I've looked all over the place and none of the answers I've found have been able to help me out with this problem. Basically I have a function that calls a separate function to make an XMLHttpRequest. The request goes to a server, which generates a random number and returns it to the page.

问题在于，当请求正在获取数据时，调用者函数将继续执行其命令。我需要从请求中获得数据，然后调用者才能继续前进。人们提到了回调和承诺，但我无法利用在线提供的信息来了解它们。我宁愿使用回调，因为并非所有浏览器都支持诺言。有人可以帮我逐步介绍如何使用它们吗？我可以根据需要提供一些代码。

The problem is that while the request is fetching the data, the caller function continues through its commands. I need to have the data from the request before the caller can move forward. People have mentioned callbacks and promises, neither of which I have been able to grasp with what's available online. I'd rather use callbacks because promises aren't supported in all browsers. Can someone please help walk me through how to use them? I can provide some of the code that I have if needed.

这是我的调用方函数：

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();     
}

推荐答案

这是您修改的 getRequest 函数与回调，

Here is your modified getRequest function with the callback,

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
}

这篇关于进行AJAX请求的回调以将响应返回给调用者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！