Question

这是我的javascript文件

var callAjax = function(relative_path){
        var Ajax =  new XMLHttpRequest();
            Ajax.onreadystatechange = function() {

                //Since what we are calling a local file. we cannot get a 200 OK Status.
                //So We check only the readystate
                if(Ajax.readyState==4){
                    serialized = Ajax.responseText;
                    alert(serialized); 
                    // ^^ alerts fine.
                    return serialized;
                }

            }

            Ajax.open("GET",relative_path, true);
            Ajax.send();    
};


var readSettings = function(){
    var data = callAjax('settings.json');
    obj  = JSON.parse(data);
    alert(obj);
}

现在当我在html中的某个地方调用readSettings()时，第一个警报（在callAjax函数中正确地警告JSON。但第二个没有。当我看到控制台时，错误是：

[21：04：02.233] SyntaxError：JSON.parse：意外字符@ file：///home/cipher/Codes/looma-f5/js/looma.js:23

我的settings.json是：

{

    "classes": 8,
    "config": "classConfig",
    "locale": {
        "en": "localeEn"
    },
    "defaultLocale": "en"
}

我通过在线工具运行JSON，看起来不错。为什么firefox没有解析这些？

Answer 1

您没有从callAjax函数返回任何值。您需要将使用结果的代码放在onreadystatchange处理程序中。

你做有一个return语句，但它在回调中，返回回调的内部调用者，并在你callAjax返回后调用。

由于callAjax似乎相当通用，一个好的方法是让该函数接受一个回调作为参数，然后调用它，传入响应。

//                  receive a callback----vv
var callAjax = function(relative_path, callback){
        var Ajax =  new XMLHttpRequest();

        Ajax.onreadystatechange = function() {
            if(Ajax.readyState==4){
                serialized = Ajax.responseText;
                alert(serialized); 

                // vv---invoke the callback
                callback(serialized);
            }
        }
        Ajax.open("GET",relative_path, true);
        Ajax.send(); 
};

var readSettings = function(){
    // pass a callback ----------------------vv
    var data = callAjax('settings.json', function(data) {
        var obj  = JSON.parse(data);
        alert(obj);
    });
}

如果readSettings的调用者需要使用响应，那么您可以让readSettings也接收回调，然后直接传递它，或者将其包装在另一个函数中以便它可以先做解析。

我将举一个例子，假设它需要被包装。

// receive a callback----------vv
var readSettings = function(callback){
    // pass a callback that wraps the first---vv
    var data = callAjax('settings.json', function(data) {
        // parse the response data
        var obj  = JSON.parse(data);

        // invoke the callback, passing it the parsed object
        callback(obj);
    });
}

readSettings(function(settings_obj) {
    alert(settings_obj);
});

Answer 2

问题是您可以在JSON.parse返回后立即callAjax。在执行onreadystate回调之前。由于操作的异步性，您应该从回调中触发解析。

Answer 3

AJAX中的“A”用于异步。提交XMLHttpRequest后，callAjax函数将立即返回，而不等待请求完成。因此，JSON.parse将使用返回值callAjax（这不是您要查找的JSON）调用，从而生成错误。

一段时间后，XMLHttpRequest将完成，并且将运行onreadystatechange回调。你从这个函数返回JSON，但JSON不会去任何地方，因为它是从回调返回的，而不是从callAjax返回的。

您必须执行onreadystatechange事件后的JSON解析和后续活动。

无法解析JSON？

3 个答案: