What is AJAX?

`Asynchronous JavaScript and XML` (AJAX) is a set of techniques that use various web technologies on the client-side to create asynchronous web applications.

With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behaviour of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly utilize JSON instead of XML.

Ajax is not a technology, but rather a programming concept. HTML and CSS can be used in combination to mark up and style information. The webpage can be modified by JavaScript to dynamically display—and allow the user to interact with the new information. The built-in XMLHttpRequest object is used to execute Ajax on webpages, allowing websites to load content onto the screen without refreshing the page. Ajax is not a new technology, nor is it a new language. Instead, it is existing technologies used in a new way.

Example:

get-ajax-data.js:

<script>

// This is the client-side script.

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

// Track the state changes of the request.
xhr.onreadystatechange = function () {
	const DONE = 4; // readyState 4 means the request is done.
	const 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);

</script>

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.";

?>

$.ajax({
   url: "http://www.phpcodebooster.com/sample/url", 			
   method: "POST|GET|PUT|DELETE",      // The HTTP method to use for the request
   dataType: "xml|json|script|html",   // The type of data that you're exerciseecting back 	
   data: {                             // Data to be sent to the server.
      key1: value1,
      key2: value2		
   },
   error: function() {
   
	  // A function to be called if the request fails.					
   },
   beforeSend: function() {
   	  
   	  // A function to be called if before the request is made.
   },
   success: function(response) {
	      				
   	  // A function to be called if the request succeeds.
   },
   complete: function(response) {
	      				
   	  // A function to be called when the request finishes
   }
});​