A few weeks ago, my students started learning how to make HTTP requests with JavaScript using AJAX. As a developer with plenty of experience interacting with REST API’s on the Web, I wanted to make it easier for my students to ramp up on AJAX. As a result, I devised a five-step method and for the next few sections, walked them through how to use it. Then, I decided to take my own medicine and try my method. It turns out that this structured, detailed plan works out fairly well in a lot of situations!<\/p>\n
I thus present to you, Geoffrey’s Five-Step Method for (mostly) Painless API Consumption. Each step is accompanied by an example of how the step can be applied.<\/p>\n
<\/p>\n
Here is where you ask most of the questions about the API you are using. What are the URIs of the API endpoints that you need? What output does the endpoint produce, if any? What request method does the endpoint accept? Do you need to pass any parameters? If so, what are the names of the parameters, and their accepted values?<\/p>\n
If you need to send any headers, what are they? Does the endpoint require any authentication? If so, what are the credentials? Last but not least, is there any additional data required by the endpoint?<\/p>\n
Example<\/strong>:<\/strong> I am using Forecast.io<\/a> to get weather data for my application. I’ll need the forecast at my current location for yesterday. Reading the Dark Sky Forecast API documentation<\/a>, I see that the URI I need to hit is of the form:<\/p>\n This is a GET request, requiring no parameters (but also accepting some optional parameters), no headers, and requiring no authentication (besides an API key in the URI). Reading the documentation for accepted values of Of course, the latitude and longitude in this situation will eventually depend on the user’s real-world physical location. This is handled in Step 5.<\/p>\n Now that you have identified the necessary endpoint(s), it’s time to actually see how the endpoint(s) respond.<\/p>\n To test REST APIs, I like to use a REST client whenever possible. A REST client is like a browser, but with extra features tailored for web development. Two of my favorite REST clients are Insomnia<\/a> and Advanced Rest Client<\/a>. Using your browser will also work for simple GET requests, as your browser is inherently a GET client.<\/p>\n For each endpoint, make sure it works as expected. If you expect an XML response, for example, and you receive something in plain text, then either the API is wrong or your assumption was wrong. In this case, you should revisit Step 1 and revise your assumptions about that specific API call.<\/p>\n If there is ever a chance that the API endpoint can fail, see if you can reproduce the failure case. This will be important in a later step, as good application design requires you to effectively communicate any errors to the user in a non-technical manner.<\/p>\n Example:<\/strong> Hitting the endpoint above, in my browser, yields the following What could go wrong here? First of all, some of the forecast data may not be available. The In the previous step, you used your browser or a REST client to check the API response. Now it’s time to write some JavaScript to make the request. I like to start with this basic skeleton for an AJAX request for pure JavaScript:<\/p>\n There are some replacements you will definitely want to make. First of all, substitute your API endpoint’s URI and request method in place of the Depending on the complexity of the API with which you are interacting, you may need to send additional parameters, headers, or authentication. Feel free to add to the skeleton as necessary.<\/p>\n At this point, I don’t yet recommend writing any additional code in the If you’re using a library or framework such as jQuery or Angular, there should be documentation that explains how to write a basic Ajax request. Use that, instead of the skeleton code provided above.<\/p>\n Example:<\/strong> I will replace You may wonder “but what about substituting the user’s actual lat\/long?” This is handled in Step 5; have patience young grasshopper.<\/p>\n It is now time to fill in the function stubs for the Exmaple:<\/strong> For the response above, I need to display the low temperature, high temperature, and the difference between the forecasted high\/low and the temperature at the requested time. My first attempt to do that might look like this:<\/p>\n However, I soon realize after some testing and perusing through the documentation that certain errors must be handled. For instance, there may be a “temporary error (such as a radar station being down for maintenance)” or the daily forecast data might not be available at all. I make the following amendments to my Step 1 was all about coming up with an example, representative request to the API endpoint. Step 3 was all about coding up the request. Now it is time to remove the hard-coded values in the API call, and replace them with the appropriate internally- or externally-dependent values. Any details of the request that may change between different requests should be handled in this step. This includes parameters sent to the server, authentication usernames and passwords, and headers.<\/p>\n If the sending of your request depends on an event, such as a button click, handle the event in this step as well. This may be as simple as wrapping the AJAX code in a function, then assigning that function to the appropriate event.<\/p>\n Example:<\/strong> I need to get the actual location of the user and the current Unix time minus a day, instead of hard-coding the aforementioned parameters. After reading the JavaScript documentation on the Geolocation API<\/a> and the Date object<\/a>, my AJAX code looks like this:<\/p>\n As any respectable developer should do, clean up and optimize your code after you are done verifying your code!<\/p>\n In order for this method to work for you, you must constantly check that each step is working and correct, before moving on to the next one. If something fails, go back a step and fix it before moving on.<\/p>\n Why mostly<\/em> painless? There’s only so much you can control, even if you are writing both the client and server code. Servers can be tricky beasts to handle, as they can go offline, throw rare but confusing errors, take forever to respond, and exhibit a wonderful spectrum of undocumented, migraine-inducing problems.<\/p>\n","protected":false},"excerpt":{"rendered":" A few weeks ago, my students started learning how to make HTTP requests with JavaScript using AJAX. As a developer with plenty of experience interacting with REST API’s on the Web, I wanted to make it easier for my students to ramp up on AJAX. As a result, I devised a five-step method and for the next few sections, walked them through …<\/p>\n","protected":false},"author":2,"featured_media":5773,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"A strategy for consuming REST API's in #JavaScript #ajax","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[830],"tags":[],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/g-liu.com\/blog\/wp-content\/uploads\/2016\/07\/Giant_Panda_Eating.jpg","jetpack_shortlink":"https:\/\/wp.me\/p2Zt3y-1tw","_links":{"self":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts\/5674"}],"collection":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/comments?post=5674"}],"version-history":[{"count":10,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts\/5674\/revisions"}],"predecessor-version":[{"id":5777,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/posts\/5674\/revisions\/5777"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/media\/5773"}],"wp:attachment":[{"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/media?parent=5674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/categories?post=5674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/g-liu.com\/blog\/wp-json\/wp\/v2\/tags?post=5674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}https:\/\/api.forecast.io\/forecast\/APIKEY\/LATITUDE,LONGITUDE,TIME\n<\/pre>\n
APIKEY<\/code>, LATITUDE<\/code>, LONGITUDE<\/code>, and TIME<\/code>, I form a request with an arbitrarily chosen latitude, longitude, time, and include two optional GET parameters whose names and values I read from the documentation:<\/p>\nhttps:\/\/api.forecast.io\/forecast\/354f6cf4139dec73e7400d2949cc2ba5\/78.2253966,15.4178498,1468713382?units=ca&exclude=minutely,hourly\n<\/pre>\n
2. Check the API endpoint(s) in a browser or REST client<\/h1>\n
application\/json<\/code> response:<\/p>\n\r\n{\r\n "latitude": 78.2253966,\r\n "longitude": 15.4178498,\r\n "timezone": "Arctic\/Longyearbyen",\r\n "offset": 2,\r\n "currently": {\r\n "time": 1468713382,\r\n "summary": "Partly Cloudy",\r\n "icon": "partly-cloudy-day",\r\n "precipIntensity": 0.0305,\r\n "precipProbability": 0.02,\r\n "precipType": "rain",\r\n "temperature": 6.4,\r\n "apparentTemperature": 5.5,\r\n "dewPoint": 6.18,\r\n "humidity": 0.99,\r\n "windSpeed": 5.52,\r\n "windBearing": 236,\r\n "visibility": 8.42,\r\n "cloudCover": 0.54,\r\n "pressure": 1009.01,\r\n "ozone": 317.37\r\n },\r\n "daily": {\r\n "data": [{\r\n "time": 1468706400,\r\n "summary": "Partly cloudy throughout the day.",\r\n "icon": "partly-cloudy-day",\r\n "moonPhase": 0.41,\r\n "precipIntensity": 0.0279,\r\n "precipIntensityMax": 0.0762,\r\n "precipIntensityMaxTime": 1468724400,\r\n "precipProbability": 0.09,\r\n "precipType": "rain",\r\n "temperatureMin": 6.11,\r\n "temperatureMinTime": 1468724400,\r\n "temperatureMax": 9.52,\r\n "temperatureMaxTime": 1468778400,\r\n "apparentTemperatureMin": 5.49,\r\n "apparentTemperatureMinTime": 1468713600,\r\n "apparentTemperatureMax": 8.16,\r\n "apparentTemperatureMaxTime": 1468778400,\r\n "dewPoint": 7.55,\r\n "humidity": 0.99,\r\n "windSpeed": 3.25,\r\n "windBearing": 105,\r\n "visibility": 9.29,\r\n "cloudCover": 0.48,\r\n "pressure": 1009.26,\r\n "ozone": 311.25\r\n }]\r\n },\r\n "flags": {\r\n "sources": ["gfs", "cmc", "fnmoc", "metno_ne", "isd", "madis"],\r\n "metno-license": "Based on data from the Norwegian Meteorological Institute. (http:\/\/api.met.no\/)",\r\n "isd-stations": ["010050-99999", "010070-99999", "010080-99999", "010170-99999", "201070-99999"],\r\n "madis-stations": ["ENSB"],\r\n "units": "ca"\r\n }\r\n}\r\n<\/pre>\ncurrently<\/code> object in the response may not exist, and daily.data<\/code> could be an empty array. Secondly, the weather station might be offline, in which case a darksky-unavailable<\/code> key will appear in flags<\/code> (this is gleaned from the documentation). Last but not least, if your API key is on the free plan, you only get one thousand API calls per day. According to the developer dashboard<\/a>, your access to the Forecast API will be “cut off” after the one thousandth call. This is a hint that you’ll have to handle this edge case in a later step!<\/p>\n3. Hit the API endpoint(s) in JavaScript<\/h1>\n
\r\nvar ajax = new XMLHttpRequest();\r\najax.onload = functionName;\r\najax.onerror = errorFunctionName;\r\najax.open("GET", "url", true);\r\najax.send();\r\n\r\nfunction functionName() {\r\n console.log(this); \/\/ log the response\r\n if (this.status == 200) { \/\/ request succeeded\r\n \/\/ do something with this.responseText;\r\n } else {\r\n \/\/ handle more HTTP response codes here;\r\n }\r\n}\r\n\r\nfunction errorFunctionName(e) {\r\n console.log(this);\r\n console.error(e);\r\n \/\/ do something with this.status, this.statusText\r\n}\r\n<\/pre>\n\"GET\"<\/code> and \"url\"<\/code> placeholder strings. You should also give the onload<\/code> and onerror<\/code> handlers more descriptive names.<\/p>\nonload<\/code> and onerror<\/code> handlers. Instead, notice the three console.*<\/code> statements. Open up your browser, and see what is logged to the JavaScript console. Barring any AJAX errors, it should look like the response you received in Step 2. If not, go back a step, and check again.<\/p>\nURL<\/code> with the mock URI from Step 1. I will also rename the event handler functions. Other than that, there is nothing else to do but to run the code!<\/p>\n4. Write the server response to the page<\/h1>\n
onload<\/code> and onerror<\/code> events. You will replace all of the console.*<\/code> statements with code to display the relevant data to the user. This step is very open-ended, and includes but is not limited to<\/p>\n\n
\r\nfunction functionName() {\r\n var json = JSON.parse(this.responseText);\r\n var currentTemp = json.currently.temperature;\r\n var forecastHi = json.daily.data[0].temperatureMin;\r\n var forecastLo = json.daily.data[0].temperatureMax;\r\n\r\n var diffHi = currentTemp - forecastHi;\r\n var diffLo = currentTemp - forecastLo;\r\n\r\n document.getElementById("hi-diff").innerHTML = diffHi + "°";\r\n document.getElementById("lo-diff").innerHTML = diffLo + "°";\r\n}\r\n\r\nfunction errorFunctionName(e) {\r\n window.alert("Could not retrieve yesterday's forecast. Please try again later.");\r\n}\r\n<\/pre>\nonload<\/code> handler:<\/p>\n\r\nif (this.status === 200) {\r\n var json = JSON.parse(this.responseText);\r\n if (json.flags.hasOwnProperty("darksky-unavailable")) {\r\n document.getElementById("error-flash").classList.add("shown");\r\n document.getElementById("error-flash").innerHTML = "The weather station is malfunctioning, please contact your local news channel for more info.";\r\n } else if (!json.hasOwnProperty("daily") || !json.daily.hasOwnProperty("data") || !(json.daily.data instanceof Array) || !json.daily.data.length) {\r\n document.getElementById("error-flash").classList.add("shown");\r\n document.getElementById("error-flash").innerHTML = "Could not get forecast data for yesterday.";\r\n } else {\r\n document.getElementById("error-flash").classList.remove("shown");\r\n \/\/ rest of code is as follows\r\n }\r\n} else if (this.status === 400 || this.status === 403) {\r\n document.getElementById("error-flash").classList.add("shown");\r\n document.getElementById("error-flash").innerHTML = "Oh no, this service is too popular and is no longer available for the day!";\r\n} else {\r\n document.getElementById("error-flash").classList.add("shown");\r\n document.getElementById("error-flash").innerHTML = "The weather service is down, blame the weatherman not me.";\r\n}\r\n<\/pre>\n5. Attach all necessary request data<\/h1>\n
\r\nif ("geolocation" in navigator) {\r\n navigator.geolocation.getCurrentPosition(function(position) {\r\n var yesterdayTime = Math.round((new Date()).getTime() \/ 1000) - 86400;\r\n var lat = position.coords.latitude;\r\n var long = position.coords.longitude;\r\n\r\n var ajax = new XMLHttpRequest();\r\n ajax.onload = functionName;\r\n ajax.onerror = errorFunctionName;\r\n ajax.open("GET", "https:\/\/api.forecast.io\/forecast\/354f6cf4139dec73e7400d2949cc2ba5\/" + lat + "," + long + "," + yesterdayTime + "?units=ca&exclude=minutely,hourly", true);\r\n ajax.send();\r\n }, function() {\r\n alert("You must enable geolocation for the application to work!");\r\n });\r\n} else {\r\n alert("Sorry, your system does not support geolocation.");\r\n}\r\n<\/pre>\n“Step 6”<\/h1>\n
Some disclaimers<\/h1>\n