What does AJAX stand for?
Asynchronous Javascript and XML
Why do we use AJAX requests?
AJAX requests allow us to make requests to the server after the initial page loads.
What is the XHR API?
XMLHttpRequest API allows us to make many types of requests to the server and accept different forms of data.
What does JSON stand for?
JavaScript Object Notation
How do we start the process of creating an XMLHttpRequest?
We define a variable and set it equal to a new XMLHttpRequest object
const xhr = new XMLHttpRequest( )
Generally, how do we store the url that will be used for an XHR API call?
We set the url string equal to a variable
const url = “http://www.api-to-call.com/endpoint”
How do we indicate the response type we expect from an XHR API request?
xhr.responseType = ‘json’
How do we indicate what needs to be done when an XHR API call is finished?
We write a function that monitors the readystate of the XHR API call and include a conditional statement within that function to run code on a state of DONE.
What does the readystate function look like for an XHR API call?
xhr.onreadystatechange = ( ) => {
if(xhr.readyState === XMLHttpRequest.DONE){
return xhr.response (or other code)
}
{
How do we access the response of an XHR API call?
We can return the xhr.response from the XHR API call within the xhr.onreadystatechange function.
After we have written our xhr code to send a XHR API call, how do we initiate the call?
xhr. open(‘GET’, url) = a GET request to the const url
xhr. send( ) = to send the request
When do we use JSON.stringify?
We use JSON.stringify to convert data to a JSON string so that it can be sent to a server or database.
How do we typically convert data to a JSON format to send to a server or database?
We can use the JSON.stringify( ) to turn our data into a JSON string.
const dataToSend = JSON.stringify({data: ‘value’});
When making an xhr ‘POST’ request, what is the primary difference in code from a ‘GET’ request?
There are three primary differences:
- We include data that must be converted to a type accepted by the server or database - JSON is often the type, so a JSON.stringify is needed
- The xhr.open( ) command contains ‘POST’ instead of ‘Get’ as the first parameter.
- The xhr.send( ) command now includes our converted data as a parameter, ‘GET’ requests do not include a parameter in the send method.
Can POST requests also request information?
Yes, a POST request can both introduce and request information from another source
What is one of the reasons that promises were introduced in ES6?
Promise were introduced to make asynchronous event handling easier.
What keyword do we use to simplify asynchronous requests using promises?
We use the fetch( ) keyword (along with asycn … await)
When will a fetch request reject?
A fetch request will only reject on a network error. It will not reject on an HTML error (‘404’, etc).
What do we need to do with a fetch request being aware that it will not reject on an HTML error?
We need to check the response from the endpoint with a .then( ) statement which looks at the response.ok or response.status value.
When using fetch as a ‘GET’ request, what do we include as a parameter?
We include the endpoint for our request
fetch(‘https://api-to-call.com/endpoint’)
After writing our fetch request, what do we need to chain on to continue with our request functionality?
We need to chain on a .then( ) to:
- check the response with a conditional
- return a successful response if received
- throw a new Error if !response.ok
- handle an error if received.
What does the first .then( ) look like for a fetch ‘GET’ request?
.then(response => {
if(response.ok){return response.json( ) }
throw new Error(‘Network Error’)},
networkError =>{console.log(networkError.message)} );
What is a more modern way to asynchronously request information from or to send information to a website or database?
Using async and await keywords, along with the try catch keywords is the more modern way of asynchronously interacting with websites or databases
What does a boilerplate GET request look like using async await keywords?
- We write a function using the async keyword - this can be an anonymous function
- Within this function, we use the keyword try to attempt to get data from another source
- We create a response variable equal to our await fetch command
- We write a conditional to see if the response is ok
- Within the conditional, if the response is ok, we await the response.json() and do something with this data
- Outside the conditional, we throw a new Error (since the response was not ok)
- Now, outside out try statement, we use the catch keyword to catch the error and do something with it
