I am writing a tile based platformer in JavaScript. I was thinking about storing the level data in a JSON file and then using XMLHttpRequest to grab the file and then load it using XMLHttpRequest.onreadystatechange like this:

TileMap.prototype.loadFile = function(pathToFile) {
	'use strict';
	var xhr = new XMLHttpRequest();
	var that = this;
	xhr.onreadystatechange = function() {
		if(xhr.readyState === 4 && xhr.status === 200) {
                // parse json file and load tilemap stuff
                }
};

PlayState.prototype.init = function() {
	this.tileMap = new TileMap();
	this.tileMap.loadFile('level-1.json');
	this.camera = new Camera(0, 0, this.tileMap.mapLayers[0].width * 
							 this.tileMap.mapLayers[0].tileWidth, canvasWidth,
							 this.tileMap.mapLayers[0].height * 
							 this.tileMap.mapLayers[0].tileHeight, canvasHeight);
};

However, I'm not sure if this is the best way of going about this. Would other parts of my game be running while this is loading? Would it be better if I hardcoded the data into my game? What do you guys think?

Thanks for the responses! I am loading the level like this:

TileMap.prototype.loadFile = function(pathToFile) {
	'use strict';
	var xhr = new XMLHttpRequest();
	var that = this;
	xhr.onreadystatechange = function() {
		if(xhr.readyState === 4 && xhr.status === 200) {
			console.log('reading file in');
			
			var levelData = JSON.parse(xhr.responseText);
			
			var layers = levelData.layers;
			
                        // a test to see if it's loaded
			console.log(layers[0].height);
			
			Game.levelLoaded = true; 
		}
	};
	xhr.open('GET', pathToFile, true);
	xhr.send(null);
};

PlayState.prototype.init = function() {
	this.tileMap = new TileMap();
	this.tileMap.loadFile('platformer/res/maps/level-1.json');
	
	while(!Game.levelLoaded) {
		clear('#ffffff');
	}
	
	console.log('camera is being created');
	
	this.camera = new Camera(0, 0, this.tileMap.mapLayers[0].width * 
							 this.tileMap.mapLayers[0].tileWidth, canvasWidth,
							 this.tileMap.mapLayers[0].height * 
							 this.tileMap.mapLayers[0].tileHeight, canvasHeight);
};

However, whenever I try to load the PlayState which then loads the TileMap, the page freezes, and I get the option to stop the script from Firefox. It doesn't reach the 'console.log(layers[0].height)'. What's wrong here?

For the resources, I was just planning to grab those using something like this:

this.dotImg = new Image(this.dotHeight, this.dotWidth);
this.dotImg.src = '/platformer/res/grey_dot.png';

Is that a good way to load resources?

And thanks again for the help.

Thanks for the all the replies! I got the level loading working using a callback, but I have another problem. I also set up a camera to help me render what's supposed to be on screen and what's not. However, when I call the callback to set up the camera, I get this error message: Uncaught TypeError: Cannot read property 'setProperties' of undefined. Here's my code:

function Camera(camX, camY, camWidth, camHeight) {
	this.positionX = camX;
	this.positionY = camY;
	this.xBounds = 0;
	this.yBounds = 0;
	this.width = camWidth;
	this.height = camHeight;
}

Camera.prototype.setBounds = function(camXBounds, camYBounds) {
	 this.xBounds = camXBounds;
	 this.yBounds = camYBounds;
};

TileMap.prototype.loadFile = function(pathToFile, callback) {
	'use strict';
	 var xhr = new XMLHttpRequest();
	 var that = this;
	 xhr.onreadystatechange = function() {
		if(xhr.readyState === 4 && xhr.status === 200) {
			 // parse json and load tilemap ...
			 Game.levelLoaded = true;
			
			 callback();
			
		 }
	};
	 xhr.overrideMimeType("application/json");
	 xhr.open('GET', pathToFile, true);
	 xhr.send(null);
};

function PlayState() {
    'use strict';
    GameState.call();
	
	clear('#ffffff');
	this.camera = new Camera(0, 0, canvasWidth, canvasHeight);
	this.camera.setHeight(canvasHeight);
	this.camera.setWidth(canvasWidth);
	console.log(this.camera);
	
	this.tileMap = new TileMap();
	
	this.tileMap = new TileMap();
	this.tileMap.loadFile('/platformer/res/maps/level-1.json', this.continueLoadingLevel);
		
}

PlayState.prototype.continueLoadingLevel = function() {
        // this.camera is undefined
	this.camera.setBounds(this.tileMap.mapLayers[0].width, this.tileMap.mapLayers[0].height);
};

I don't know why it's undefined. It's defined in the PlayState constructor, and continueLoadingLevel() is a part of the PlayState prototype, so this shouldn't be happening. I also created this.camera with the new keyword. Why is it undefined?