Asynchronous Javascript

The AJAX Workflow

A client event occurs on the webpage Javscript will create the XMLHttpRequest object The XHR makes an async request to the server The server processes the request The server create a response and send the data back to the client The browser processes the returned data using Javascript The page content is updated with the data using Javascript

The basic steps of the event loop

Asynchronous code gets added to the call stack JS decides to hand it off to the web api where it processes Other functions can be added and executing on the call stack while the web api does its work Once the web api has a response, it gets added to the queue The event loop checks the queue when the call stack is empty to see if there is something to add back to the stack Our response/callback is added to the call stack and processed as normal

There are 4 steps to creating an AJAX Request

Create the XHR object with new XMLHttpRequest() Set the readystatechange callback function Use the .open(method, url, async) method of the XHR object to open the connection to the servermethod is a string specifying the type of request (POST, GET, PUT,...) Use the .send() method to send the request to the server to be processed

What does asynchronous programming mean

Functions running in parallel with other functions operations take place in a non-sequential fashion Your program does not need to wait for that response to continue working

How does asynchronous javascript work?

Javascript also implements a stack where the function calls are stored It uses a single thread to add, and call functions on the stack one at a time, until the stack is empty Javascript also has a queue built into it, along with this queue, the browser/runtime environment also has apis, that allow us to offload lengthy functions to them After the webapi is done running the function, it puts a callback into that queue we mentioned above, and when javascript has emptied the callstack, it will look in this queue for any returned responses from the webapi

How do you send and parse JSON objects from AJAX requests?

The XHR object can only send string in a request, however, we can still send JSON thanks to Javascripts functionality Convert Json to a string with JSON.stringify() Convert the string response to a javascript object with JSON.parse()

How is asynchronous programming useful?

This is useful for API calls and other process that could hold up or block the execution of the main thread

Fetch API

fetch is a more modern way to send http requests from your browser via JS It is provided by the window object and it provides the .fetch() method

response.json()

read the response and return as json

response.text()

read the response and return as text

response.arrayBuffer()

return the response as an arrayBuffer (low level representation of binary data

response.blob()

return the response as binary data with type

response.formData()

return the response as form data

What is AJAX?

the process of exchaning data from a webserver asynchronously with the help of HTML, CSS, and Javascript We use it to load data from a server, and selectively update some part of our webpage without reloading Uses the browsers built in XMLHttpRequest Object (XHR) to send and receive data from webservices asynchonously

How do you use the fetch API?

.fetch() is used to send requests and returns a promise that is retrieved from the response Successful requests get resolved, and the returned promise will have the response body Requests that return an error status code will be rejected

What are the 5 readyStates?

0: it is not initialized 1: the connection has been established 2: request was received by the server 3: server is processing the request 4: request is finished, and response is ready