javascript - 如何在XMLHttprequest

Question

我试图实现一个从本地服务器读取JSON的vanilla javascript应用程序，并使用该JSON内容填充select。我遇到的问题是我试图将3个模块中的代码分开，我的想法是在模型上调用 XMLHttprequest，并且将json设置为私有模型变量（appData）。类别）即可。然后使用View上的Model变量中的数据将其显示在选择上。

var Model = (function () {

var appData = {
    categories: []
}

function initCategories() {
    var xobj = new XMLHttpRequest();        
    xobj.overrideMimeType("application/json");
    xobj.open("GET", "/services/categories/", true); 
    xobj.onload = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {                

            appData.categories = JSON.parse(xobj.responseText);             
        }
    };
    xobj.send(null);
}

function getCategories() {
    return appData.categories;
}

return {
    initCategories: initCategories,
    getCategories: getCategories
}
})();

查看

var View = (function () {    

function displayData(total) {
    console.log(total);
} 

return {
    displayData: displayData
}

})();

控制器

var Controller = (function (modelCtrl, uiCtrl) { 

function initCategories() {
    modelCtrl.initCategories(); // Call to async method
    var data = modelCtrl.getData(); // tries to get data 
    uiCtrl.displayData(data); // data is an empty array at this point
}

function init() {        
        initCategories();      
        console.log("app started");
}

return {
    init: init
}

})(ModelController, UIController);

调用init函数

Controller.init();

当我调用getCategories（）方法时，变量尚未填充，我可以在第一次从模型内部填充选择，但我认为必须有更好的方法。谢谢！