Skip to main content

AJAX on toast

By August 16, 2018No Comments


work in progress
### Introduction

1. AJAX stands for async JS and XML.
2. Assists in communicating with a browser [receiving and sending data] after a page has loaded.
3. Remains a popular method of communicating with a server from the front end .
4. It enables the sending of data to the server, and receiving a response without the page reloading (think facebook feeds).
5. Fundamental to this async communication is the XMLHttpRequest object originally released by Microsoft in 1999

### Asyncrhonous

1. Async code works like this:
– Request made
– JS engine moves on to the next task before a response is received
– Rest of the script is executed
– That means the webpage does not freeze while waiting for a response

### XMLHttpRequest object

1. Working with async requests and responses revolves around using the XMLHttpRequest object.
2. This is a native object provided by the browser.
3. So the properties and methods of this object are what we use to communicate with the browser.

### Browser support

1.XMLHttpRequest 1.0 specification is supported in all mainstream browsers.
2. The newer XHR 2.0, is also very well supported with some exceptions (Opera mini and IE11).

### Same origin policy

1. When making AJAX requests to servers, we can only receive responses from a server from the same domain that we make a request to.

### The XMLHttpRequest Constructor

1.The XMLHttpRequest Constructor is used in order to create a XMLHttpRequest object which will in turn allow us to make AJAX requests and receive responses.

var xhr = new XMLHttpRequest();
2. var xhr now contains an instance of the XMLHttpRequest.
3. The ‘xhr’ object has different methods, properties and states.
4. A newly created ‘xhr’ object is in an unsent state.

### xhr [XMLHttpRequest] object states

| State | Numeric Value |Explanation |
| ————- |:————-:| —–:|
| UNSENT | 0 | Newly created XMLHttpRequest Object |
| OPENED | 1 | This means that the “open” method has been invoked on the object to open a connection to the server |
| HEADERS_RECEIVED | 2 | HTTP headers of the response have been received and redirects followed|
| LOADING | 3 | The body of the response is loading |
| DONE |4 | the response has been fully received or failed|

### Event handler for the XMLHttpRequest object

1. The readyState property of the XMLHttpRequest object holds the state of the object (0,1,2,3 or 4).
2. The onreadystatechange property defines a function which will run when the state changes.
3. The onreadystatechange event handler (like “onclick”) is an ‘on-event’ handler. They are usually added to DOM elements such as buttons and input elements to detect changes such as a click or keypresses. But they can also be used on XMLHttpRequest objects.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
// handle readystatechange event
3. Inside the event handler’s function we can check the readyState property of the object

xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
// do something with the response
4. A change in the readyState property will cause the event handler to be invoked.
5. The readyState property is updated with the number that represents the current state of the object.

### XMLHttpRequest 2.0 Event Handlers

1. Version 2.0 uses the onload event that will only load once the request succeeds.
2. A function is assigned to the onload property of the ‘xhr’ object.
3. The readyState property need not be checked.

xhr.onload = function() {


### Other XMLHttpRequest 2.0 Event Handlers

| Event | Numeric Value |
| ————- |:————-:|
| onabort | Aborted request|
| onerror | Failed request|
| onload | Successful request|
| onloadend | Request has finished|
| onloadstart |Request has started|
| onprogress |Request is transmitting data|
| ontimeout |Request time has elapsed|

### Connecting to a server

1. Initializing/opening a connection with a server is done with the ‘open’ method.
2. The ‘open’ method takes 2 arguments:
– A GET or POST request to either retrieve/GET data from a server or send/POST data to a server
– The resource that we want to GET or POST to.

“`‘GET’, ‘/response.json’);

### Sending a request to a server

1. After a connection has been opened by the ‘open’ method, data can be sent to the server with the ‘send’ method.

2. The ‘send’ method can take in the following types of data as an argument:
– FormData
– Blob
– Document
– DOMString
– ArrayBufferView

### Handling responses

1. The ‘xhr’ object’s properties are updated once a request is successful.
2. Usually the ‘response’ property is updated when using the ‘onload’ event event handler [ or the responseText property if using the onReadyStateChange event handler].
3.The data sent back from the server once the onload event is triggered, is available to the response property of the ‘xhr’ object.
4. Response propertt: contains data returned by the server
5. The ‘status’ property contains the numerical HTTP response code
xhr.onload = function () {
/* do something with the response
if the status property of the ‘xhr’ object is === 200
use JSON’s parse method to parse the JSON string into a JS object
then get the contents using .data */
if (xhr.status === 200) {
### Working with forms

1. For SPA’s [Single Page Applications] sending form data without re-loading the page provides for better UX.
2. Form data is sent using the **FormData object**.
3. A new formData object is created by using the FormData constructor.
4. A submit event can be used to trigger the creation of a new XMLHttpRequest.
5. The ‘append’ method is used to add data to the formData object.

var form = document.getElementById(‘login’);
form.addEventListener(‘submit’, function (event) {
var xhr = new XMLHttpRequest(),
formData = new FormData();
formData.append(‘username’, document.getElementById(‘username’).value);
formData.append(‘password’, document.getElementById(‘password’).value);‘POST’, ‘/signin’);


### Uploads

1. The upload property of the ‘xhr’ object allows you to track the progress of uploads

Leave a Reply