Creating a website to make a client side AJAX request

For this part of the guide, we will be making a client side AJAX request to our server we are running. This will take a format similar to first experiment on Page 2:

var req = new XMLHttpRequest();
req.open("GET", URL, true);
req.addEventListener('load', function(){
	if(req.status>= 200 && req.status<400){
	var response = JSON.parse(req.responseText);
	console.log(JSON.parse(req.responseText));
	}
		else {
			console.log("Error in network request: " + request.statusText);
			}
	});
	req.send(null);

The key part of this code is the URL. This is the address of our server that will activate the corresponding route to signal the server to send its HTTP request to the Steam Web API. What we put in that URL will determine which route will be called. We will eventually create a page with text areas to input the corresponding AppId and/or PlayerId which will then run this request using the URL created with those text inputs.

To simplify things, we can make a website that has an input area for each API method we wish to call. We can then create a script for each of those input areas to make the correct GET requests to our server. Here is an example of what one of these functions could look like. In this example, the function is called upon a button click and it reads the number that has been entered into the text field. That number is appended to the base URL (in this case the URL that call our GetNews route), and the completed URL is used to make the GET request to our server.

function bindGetNewsButton(){
	document.getElementById('getNewsForApp').addEventListener('click', function(event) {
	var homeURL = "http://localhost:3000/getnews/?"
	var userInput = document.getElementById('getNewsInput').value;
	var newURL = homeURL+userInput;
	var req = new XMLHttpRequest();
	req.open("GET", newURL, true);
	req.addEventListener('load', function(){
		if(req.status>= 200 && req.status<400){
		var response = JSON.parse(req.responseText);
		console.log(JSON.parse(req.responseText));
		}
		else {
			console.log("Error in network request: " + request.statusText);
		}
	});
	req.send(null);
});
}

And here is an example of a request being made to a route that requires both a AppID and a SteamID. In this example, I have used two text entry boxes to obtain the AppID and SteamID, and then used these values to construct the URL that is sent in the GET request:

function bindUserStatsButton(){
	document.getElementById('getUserStatsForGame').addEventListener('click', function(event) {
	var homeURL = "http://localhost:3000/getuserstats/?"
	var userAppID = document.getElementById('getUserStatsAppID').value;
	var userPlayerID = document.getElementById('getUserStatsPlayerID').value;
	var newURL = homeURL+userAppID+'='+userPlayerID;
	var req = new XMLHttpRequest();
	req.open("GET", newURL, true);
	req.addEventListener('load', function(){
		if(req.status>= 200 && req.status<400){
		var response = JSON.parse(req.responseText);
		console.log(JSON.parse(req.responseText));
		}
		else {
			console.log("Error in network request: " + request.statusText);
		}
	});
	req.send(null);
	console.log("Egg");
	event.preventDefault();
});
}

So now with our functioning scripts, we can successfully make AJAX calls to our server. Let's give it a try on the next page!

Try it out! »