# Week 10 - APIs & Fetch
# AJAX
AJAX is a term coined back in 2005 by Jesse James Garrett. The actual technology has been in use since around 1999. The term stands for Asynchronous JavaScript and XML and was first available in Internet Explorer version 5.5 with the XMLHttpRequest object.
Basically, when we say AJAX, we are talking about the ability of the browser to request a new resource (XML, JSON, image, HTML, text, etc) and handle its receipt without having to replace the currently displayed webpage.
# Fetch
By 2014, and after a couple iterations of the XMLHttpRequest object, security problems were found and it became difficult to do all the things that developers wanted to do with AJAX technology.
So, a new approach was developed - the Fetch API. It included a single method called fetch() and a standardized collection of other Objects like Request, Response, Body, and Headers.
The process of making AJAX requests is now much easier and since support first rolled out in 2015 it is broadly supported now.
# JSON object
JavaScript has an object called JSON that helps us to convert back and forth between Strings and JS Objects.
let myObj = {
ref: 23434,
names: ['Cara', 'Alex', 'Cole', 'Devon', 'Bree', 'Riley'],
valid: true,
};
let stringVersion = JSON.stringify(myObj);
//this turns the JS object into a JSON string.
let objCopy = JSON.parse(stringVersion);
//this creates a brand new object from a JSON string.
2
3
4
5
6
7
8
9
When we use fetch to retrieve a JSON file from a server, the contents of that file are a String. We need to turn the String into an Object or Array so we can work with it.
The Response object that we get back from the fetch also has a json() method which does the same thing as JSON.parse().
# JSONP
There is a variation of JSON called JSON-P which was used to circumvent some of the restrictions imposed on fetching of JSON files. While not as common as it was five years ago, you may still come across it.
# Bitwise Operators
JavaScript has a number of operators that allow us to work with data directly at the binary level. We can actually manipulate the ones and zeros that make up the bits in every value.
Learn more about the bitwise operators
# APIs
An API is an Application Programming Interface. Which is a fancy way of saying - here is a list of commands that you can call when talking to a web server, a program, a framework, a library, etc.
There are HTML5 APIs that we will be using. There are online APIs that we will be using too. Most of the time, as web developers, when we talk about an API, we are referring to a web server that has specific URLs which we can use to retrieve data or files.
# CORS
CORS stands for Cross-Origin Resource Sharing. It is the mechanism through which the browser determines whether a resource from a different web server is allowed to be used on your webpage. This is built into the browser. You need to work with the process, not try to find ways to avoid it.
# Passing Data to APIs
The two Request methods that we use the most are POST and GET. The different request methods determine how data is bundled and sent to the server along with your resource request.
When you need to pass data there are actually several ways to do this - headers, querystring, and formdata.
Learn more about uploading data
# The Movie DataBase (TMDB)
The Movie DataBase (TMDB) is similar to IMDB in the information that it holds. It is an API that provides information about movies and TV shows.
# DarkSky
DarkSky is a weather data API. It gathers information from a number of different sources, does analysis on the data and provides a best estimation of the weather through its API.
Unfortunately, Apple purchased this company and is shutting down access to the API next year.
# City of Ottawa Open Data
Many cities around the world are starting to provide information about the City and its infrastructure to the public as Open Data. This is data available free of charge to the general public which most people believe should be public domain information.
Ottawa, Calgary, Toronto, Vancouver and Edmonton all provide Open data.
Learn more about OpenData in Ottawa
# CURL - client url
ClientURL (CURL) is a command line tool that lets you make HTTP requests from the command line. It comes preinstalled on MacOS but can be installed on any OS. It can be very useful for testing APIs and avoiding CORS issues when planning your fetch code.
# TODO
TODO Before next week
- If you have not read all these notes and watched the videos from this week, do that first.
- Finish reading the notes for week 10 and watch all the videos in the notes for week 11.
Hybrid 10 - Event Targetingdue Monday this week.- Finish and submit the exercises
Exercise 17 - fetch 1andExercise 18 - fetch 2before 5pm on this Tuesday. Assignment 2 - DOMis due this Friday.- Finish and submit
Hybrid 11 - alert, confirm, promptby next Monday.