Use your knowledge of HTTP requests and XHR to get star wars film information from an API and render to the DOM.
- Basic knowledge of HTTP requests.
- Basic understanding of API's.
- Basic understanding of JSON.
- Fork Repo
- Clone repo to local machine.
- Link up index.html and app.js
Make a GET
request using XHR to each endpoint. Grab and append the respective values
requested onto the DOM.
- Create a new XHR object
var oReq = new XMLHttpRequest();
- Declare a function to be used as the event listener.
function reqListener () {
console.log(this.responseText);
}
- Attach the event listener to an event
oReq.addEventListener("load", reqListener);
- Set the destination and send the request!
oReq.open("GET", "http://www.google.com");
oReq.send();
- The code
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.com/api");
oReq.send();
-
People
- Luke Skywalker
- Height
- Mass
- Birth year
- Gender
- Leah
- Height
- Mass
- Birth year
- Gender
- Darth Vader
- Height
- Mass
- Birth year
- Gender
- Luke Skywalker
-
Planets
- Alderaan
- Yavin IV
- Hoth
- Dagobah
- Bespin
- Endor
- Naboo
- Coruscant
- Kamino
- Geonosis
-
Films
- A New Hope
- Episode ID
- Director
- Attack of the Clones
- Episode ID
- Director
- The Phantom Menace
- Episode ID
- Director
- Revenge of the Sith
- Episode ID
- Director
- Return of the Jedi
- Episode ID
- Director
- The Empire Strikes Back
- Episode ID
- Director
- The Force Awakens
- Episode ID
- Director
- A New Hope
Using XMLHttpRequest - Web APIs | MDN