Javascript Ajax

Ajax allows web pages to request small chunks of data (such as HTML, XML, JSON, or plain text) and use them as required

It was known as Asynchronous JavaScript and XML (Ajax), due to usage of XMLHttpRequest to request XML data

It web API as proxy to request data and update parts of a web page rather than just having browser reload entire page

Any of following Apis is used to make Ajax calls

• XMLHttpRequest
• fetch()

Working of Ajax

• An event occurs in a web page (the page is loaded, a button is clicked)
• An XMLHttpRequest object is created by JavaScript, which sends a request to a web server
• Server processes request and sends a response back to web page
• JavaScript reads response, and performs some action(like page update) if required

XMLHttpRequest

XMLHttpRequest (which is frequently abbreviated to XHR) was introduced by Microsoft in the late '90s, and has been standardized across browsers

function showIp() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert("Ip address is " + this.responseText);
        }
    };
    xhttp.open("GET", "https://api6.ipify.org/?format=text");
    xhttp.send();
}

Above example prints ip address of system by calling a public rest api which returns ip address of the caller

As in the example, to send an XMLHttpRequest

• Initialize a new XMLHttpRequest object and assign to a variable

  var xhttp = new XMLHttpRequest();

• Assign a function to onreadystatechange attribute of the object, which is an EventHandler that is called whenever the readyState attribute changes

  xhttp.onreadystatechange = function() {
  	if (this.readyState === XMLHttpRequest.DONE && this.status == 200) {
  		alert("Ip address is " + this.responseText);
  	}
  };

  Use readyState and status attributes to check if response is valid and display alert message with text of response

• Use open() method to set url and request type

  xhttp.open("GET", "https://api6.ipify.org/?format=text");

• Send request with xhttp.send();

Fetch

Fetch API is basically a modern replacement for XHR; it was introduced in browsers to make asynchronous HTTP requests easier to do in JavaScript, both for developers and other APIs that are build on top of Fetch

Let's convert the last example to use Fetch instead

Replace XHR code with:

fetch("https://api6.ipify.org/?format=text")
.then(function(response) {
	return response.text();
})
.then(function(text) {
	alert(text);
});

This results in same behaviour of the function to alert user with ip address

• The fetch() method is invoked by passing it the URL of the resource to be fetched which is equivalent of XHR's request.open() and .send() together

• The .then() method chained onto the end of fetch() is a part of Promises, a JavaScript feature for performing asynchronous operations fetch() returns a promise, which resolves to the response sent back from the server

  .then() is used to run some follow-up code after the promise resolves, which is the function defined inside it

• This function is automatically given the response from the server as a parameter when the fetch() promise resolves

• The function invokes and returns result of text() method, which basically returns the response as raw text

• text() also returns a promise,so it is chained to another .then() which alerts the text received from Promise

Choosing between fetch or XHR

This depends on project specifics

XHR has been around for some time now and has considerable cross-browser support

If not supporting older browsers isn't an issue, then Fetch could be a good choice