Ajax and toast 
Tags: ajax, webdev
Published: 2018-08-05 16:43:07

---
title: Ajax and toast 
published: true
description: My notes on AJAX
tags: ajax, web development
---

![AJAX on toast](https://thepracticaldev.s3.amazonaws.com/i/mys8fskfj0nhl0jj9f9q.png)
My notes on AJAX. Nothing less, nothing more. Why toast? Because.
 
--------/----------
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.

```
xhr.open('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.

```
xhr.send();
```
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) {
        console.log(JSON.parse(xhr.response).data);
    }
};
```
### 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.
6.

```
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);
xhr.open('POST', '/signin');
xhr.send(formData);
event.preventDefault();    
});

```

### Uploads

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