javascript - 为 AJAX 请求进行回调以将响应返回给调用者

Question

我查遍了所有地方，但找到的答案都无法帮助我解决这个问题。基本上我有一个函数调用一个单独的函数来创建 XMLHttpRequest。请求发送到服务器，服务器生成一个随机数并将其返回到页面。

问题在于，当请求获取数据时，调用者函数会继续执行其命令。我需要先获取请求中的数据，然后调用方才能继续操作。人们提到了回调和 promise ，但我无法通过网上提供的内容来理解这两者。我宁愿使用回调，因为并非所有浏览器都支持 promise 。有人可以帮助我了解如何使用它们吗？如果需要，我可以提供一些我拥有的代码。

这是我的调用函数:

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

Answer 1

这是您修改后的带有回调的 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
}