API Introduction

Note on Content

As stated before in the welcome homepage, this guide is not intended for developer's who have never utilized an API before. This guide is intended to show the specific details of getting the NASA API up and running while using standard AJAX requests in JavaScript without using JQUERY or other outside libraries. The documentation currently on the NASA API website simply gives one example of using the APOD API with JQUERY but gives no additional information on how to generally set up any of the NASA APIs. This module will supplement this missing information.

API Key

Before you begin setting up your JavaScript AJAX requests, you need to obtain a developer key for the NASA API. Even though the NASA API is mostly public domain (yay!) it still requires an API key to monitor the amount of usage a developer is demanding. Registration for the NASA API is currently well documented and can be accomplished at the following link:

NASA API Key Registration

After signing up, NASA will email you the key which can be used on EVERY API under the NASA API designation!

NASA AJAX Requests

In this guide, we will only be exploring specific NASA API's that require GET requests. The below code is an example of the AJAX request which will be modified for every API example going forward. After reviewing the code below, please continue for an explanation of the functionality of each of the parts.

					
					var exampleURL = 'Your API Query URL Goes Here';

					var apiKey = 'Your Key Goes Here'; 

					var request = new XMLHttpRequest(); 
					request.open('GET', exampleURL + '?api_key=' + apiKey, true);

					request.addEventListener('load',function(){

					if(request.status >= 200 && request.status < 400){
					var response = JSON.parse(request.responseText);
					console.log(response);
					} 
					else {
					     console.log("Error in network request: " + request.statusText);
					}});
					request.send(null);

NASA Query URL

Alright, let us break down this code line by line as a review for JavaScript AJAX requests and for explanation for the NASA API.

					
					var exampleURL = 'Your API Query URL Goes Here';

					var apiKey = 'Your Key Goes Here';

This code is the beginning of the AJAX request. The first line is a variable to hold the specific API URL you will be accessing. This will change based on the API you are using. As you will soon see with the specific API examples, this can be modified with specific information and variables to specify the type of information the user requests. The second line above holds the user's API key. This will be intentionally left blank in all examples going forward. API keys should remain private to ensure the developer's usage is properly reflected.

NASA GET Requests

					
					var request = new XMLHttpRequest(); 

					request.open('GET', exampleURL + 'api_key=' + apiKey, true);

The next two lines of code are crucial. This is where the actual AJAX requests takes place. As stated before, this guide is not an all-encompassing guide to AJAX requests and asynchronous requests. The key thing to remember is that for all API's in this guide will be of the 'GET' type. This means that you will be simply requesting information from the various NASA servers and not sending information to be posted on those servers. As you can see, the variables defined earlier will form a concatenated URL that will be sent to the NASA servers to request certain information and services. The last part of this request is the 'true' designation. This specifies that our request will be made asynchronously.

Returned JSON Objects

					
					request.addEventListener('load',function(){

					if(request.status >= 200 && request.status < 400){
					var response = JSON.parse(request.responseText);
					console.log(response);
					} 
					else {
					     console.log("Error in network request: " + request.statusText);
					}});

The next lines of code handle the request error handling and return the information that is at the heart of the API. The first line, "request.addEventListener('load',function()", is an event listener attached to our request variable. This listener essentially waits until the defined action 'load' is completed before executing the function encompassed by the listener. The 'load' action waits for the page to load before executing. The defined function contains a conditional statement that ensures the request made it to the server and a healthy status was returned. If the status is in the 200-400 range, you know the request was successfully made. If it is outside the range, an error is returned with the concatenated status text. If the request was made successfully, a new variable called 'response' is created containing the heart of our request, the JavaScript object converted from the JSON object containing the requested information. The above example displays the contents of this object to the console. The next page of this guide goes into detail regarding the JSON objects.

AJAX Send

					
					request.send(null);

The last line of code is the send method to our HTTP request object. This sends the request to the NASA servers with no additional information encoded. This is the 'null' value in the parenthesis. There is no additional information because all API's discussed in this guide are 'GET' requests.

API Introduction Recap

As stated before, the first two sections of this guide should be more a recap to the developer and not an all-encompassing guide to AJAX requests. At this point, the developer should understand the formatting of the requests you will be making in this guide and as they pertain to NASA API queries. Going forward, the next section will go through an example JSON object returned from the NASA EPIC API.

Previous Page Next Page