Question

首先，我想确认这个问题与stackoverflow上的其他类似问题没有重复，因为我的问题仅基于javascript，没有jquery。

我写了网站https://www.emojionline.org。因为这个网站很小，所以我不想使用JQuery。我试着用Jquery来测试解决这个问题没问题，但我只想要没有jquery的javascript。我的问题是从ajax回调函数返回值的问题。我写道如下：

function loadJSON(callback) {   
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'emoji.json', true);
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
        }
    };
    xobj.send(null);  
}

function returnJSON(){
    var jn = '';
    loadJSON(function(response){
        jn = JSON.parse(response);
    });
    return jn;
}

var json = returnJSON();

但是，当我使用console.log写时， json 为空？这是什么问题？请帮我解决一下！

Answer 1

同步请求示例：

＆＃13;

function loadJSON(url) {
    var request = new XMLHttpRequest();

    request.overrideMimeType("application/json");
    request.open('GET', url, false);
    request.send();

    if (request.readyState === 4 && request.status === 200)
        return request.responseText;
}

// An example using ipify api (An IP Address API)
var json = loadJSON('https://api.ipify.org?format=json');
console.log(json);

＆＃13;

或异步请求示例，使用Promise API和错误事件处理程序：

＆＃13;

function loadJSON(url) {
    return new Promise(function (resolve, reject) {
        var request = new XMLHttpRequest();

        request.overrideMimeType("application/json");
        request.open('GET', url, true);
        request.onreadystatechange = function () {
            if (this.readyState === 4) {
                if (this.status === 200) {
                    resolve({status: this.status, body: JSON.parse(this.responseText)});
                } else {
                    reject({status: this.status, body: this.responseText});
                }
            }
        };

        request.send();
    });
}

// An example using ipify api (An IP Address API)
loadJSON('https://api.ipify.org?format=json')
    .then(function (response) {
        console.log(response);
    })
    .catch(function (errorResponse) {
        console.log(errorResponse);
    });

＆＃13;

Answer 2

xobj.open（方法，网址，异步，用户，密码）;

xobj.send（空）;

参考：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open

通过javascript从AJAX回调返回数据

2 个答案: