ajax

Question 1

What is AJAX?

Answer 1

technique for loading data into part of a page without having to refresh the entire page - data usually sent in json format

allows you to request data from a server and load it w/o refresh

then returns data format in html, xml, json, etc

Question 2

What does the AJAX acronym stand for?

Answer 2

Asynchronous JavaScript and XML; programming practice of building complex, dynamic webpages using XMLHttpRequest

Question 3

Which object is built into the browser for making HTTP requests in JavaScript?

Answer 3

XMLHttpRequest

Question 4

What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?

Answer 4

load

Question 5

An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?

Answer 5

shared object in their prototypal chain

Question 6

asynchronous processing model?

Answer 6

the user can do other things while the web browser is waiting for the data to load, speeding up the user experience; the browser can request some data from a server and - once that data has been requested - continue to load the rest of the page and process the user’s interactions with the page

Question 7

ajax with event listeners?

Answer 7

the browser does not wait for the third party data in order to show the page. When the server responds with the data, an event is fired (like the load event that fires when a page has loaded). This event can then call a function that processes the data

Question 8

XMLHttpRequest process

Answer 8

generally:

1. create an XMLHttpRequest object
2. open url
3. send request

specifically:
1. use the XMLHttpRequest() constructor creates a new XMLHttpRequest; no params; return is new XMLHttpRequest object

i.e., 
const request = new XMLHttpRequest();

2. set the XMLHttpRequest.open() method; initializes a newly-created request, or re-initializes an existing one; params: request method, URL string, async (optional), usr (optional), pss (optional)

i.e.,
XMLHttpRequest.open(method, url, async, user, password)

3. use the XMLHttpRequest property responseType; an enumerated string value specifying the type of data contained in the response

i.e., 
var type = XMLHttpRequest.responseType;
XMLHttpRequest.responseType = type;

4. use an event listener to execute a function when the response is eventually loaded

i.e.,
XMLHttpRequest.addEventListener(‘load’, func () { … }

5. user the XMLHttpRequest method send(); sends the request at the URL in open() to the server; params: body of data (optional); return: undefined

If the request is asynchronous (which is the default), this method returns as soon as the request is sent and the result is delivered using events. If the request is synchronous, this method doesn’t return until the response has arrived

i.e.,
XMLHttpRequest.send(body)

6. use the read-only XMLHttpRequest.status property; returns the numerical HTTP status code of the XMLHttpRequest’s response; read the HTTP status code of the response message

Before the request completes, the value of status is 0. Browsers also report a status of 0 in case of XMLHttpRequest errors

i.e.,
XMLHttpRequest.status

7. use the XMLHttpRequest.response property; returns the response’s body content as an ArrayBuffer, Blob, Document, JavaScript Object, or DOMString, depending on the value of the request’s responseType property; get the body of the HTTP response once it has been converted from a JSON string to JavaScript objects

i.e.,
XMLHttpRequest.response;

Question 9

two ways of fetching data w/ XMLHttpRequest

Answer 9

asynchronously or synchronously

the type of request is dictated by the optional async argument (the third argument) that is set on the XMLHttpRequest.open() method; if this argument is true or not specified, the XMLHttpRequest is processed asynchronously, otherwise the process is handled synchronously