What's an AJAX??

AJAX, short for Asynchronous Javascript And XML is a set of web development techniques that allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This is simply a modification of a web page, without reloading it. In modern implementations, developers commonly utilize JSON instead of XML due to the advantage of JSON being native to javascript. AJAX is not a programming language, but a combination of browser build in XMLHttpRequest object, Javascript and HTML. 

So in this word AJAX, as i previously mentioned, it means "Asynchronous Javascript And XML". In here,

• Asynchronous means, in the background or not requiring a page refresh.
• You all know what's "Javascript" means 😅.
• XML is a data format that very similar to JSON. 

So, as i mentioned earlier, modern development is using JSON rather than XML when it comes to AJAXs. So I guess we can call this as AJAJ - Asynchronous Javascript And Jason, because here, JSON has replaced XML as the more popular data format. But XML was very important for a very long time, and overall XML was very important to the history of modern web development. So that's why the AJAX name sticks even though most of us are using JSON instead of XML. We are technically using XMLHttpRequest tool to download JSON data but not XML data, but again because of the previous reason, the name XML kinda stays around even if that's not exactly what we are doing.

The flow of an Ajax

• First, assume that an event has been occurred in the browser.
• Then the browser creates an XMLHttpRequest object and send it via internet to the server.
• The server process the HTTPRequest, create a response and send data back to the client or the browser via internet.
• Browser process the returned data using javascript, and update the page content. 

simple as that. 😉 no page refreshing.

(Above is a simple graph to get an idea about AJAX message passing) 

    

According to Wikipedia, there are many ways to perform an ajax request.

1. Using Javascript.
2. Using JQuery 
3. Using fetch 

JavaScript Example

Following is an example for a JavaScript AJAX.

// This is the client-side script.

// Initialize the HTTP request.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');

// Track the state changes of the request.
xhr.onreadystatechange = function () {
 var DONE = 4; // readyState 4 means the request is done.
 var OK = 200; // status 200 is a successful return.
 if (xhr.readyState === DONE) {
  if (xhr.status === OK) {
   console.log(xhr.responseText); // 'This is the output.'
  } else {
   console.log('Error: ' + xhr.status); // An error occurred during the request.
  }
 }
};

// Send the request to send-ajax-data.php
xhr.send(null);

send-ajax-data.php:

<?php
// This is the server-side script.

// Set the content type.
header('Content-Type: text/plain');

// Send the data back.
echo "This is the output.";
?>

JQuery Example 

The popular JavaScript library JQuery has implemented abstractions which enable developers to use ajax calls more conveniently. But still use XMLHttpRequest behind the scenes.

Following is an example for a JQuery AJAX.

var uri = 'http://localhost:8080/CSRFSyncT/token';
$(document).ready(function() {

$.ajax({
	type : "GET",
	url : uri,
	dataType : "json",
	cache : false,
	crossDomain : true,
	processData : true,
	success : function(data) {
	$('#csrf').val(data['token']);
	},
	error : function(XMLHttpRequest, textStatus, errorThrown) {
	alert("error");
	}
	});
	});

Fetch Example

Fetch is a new native Javascript API. Although not yet supported by all browsers, it is gaining reputation as a more popular way to execute AJAX.



Following is an example for a Fetch AJAX.

fetch('send-ajax-data.php').then(function(response) {
 return response.text();
}).then(function(data) {
 console.log(data);
}).catch(function(error) {
 console.log('Error: ' + error);
});

// Async/await example:

try {
  const res = await fetch('send-ajax-data.php');
  const data = await res.text();
  console.log(data);
} catch(error) {
  console.log(error);
}

So, the idea you want to get here is basically, an Ajax call is a request that modifies the page content of a web page behind the scene without interfering, or in simple terms, "without refreshing".