Ajax Basics

The steps for an ajax request

1- Create request object

2- create a callback function

3- open a request

4- send the request

A simple example

	//1 creating the requet object
	let xhr = new XMLHttpRequest();

	//creating callback
	xhr.onreadystatechange = function(){
		 if(xhr.readyState===4){

		 		document.getElementById('ajax').innerHTML = xhr.responseText;
		 }
	};

	// 3 opening a request
	xhr.open('GET','ajax-content.html');

	// 4 sending the request
	xhr.send();

Using A button to trigger the ajax request

//getting the button element	
let loadButton = document.getElementById("load");

// attaching a click event to the button
	loadButton.addEventListener('click',function(){
			//1 creating the requet object
	let xhr = new XMLHttpRequest();

	//creating callback
	xhr.onreadystatechange = function(){
		 if(xhr.readyState===4){

		 		document.getElementById('ajax').innerHTML = xhr.responseText;
		 }
	};

	//3 opening a request
	xhr.open('GET','ajax-content.html');

	// 4 sending the request
	xhr.send();
	})

Using Jquery for making request

	$('#ajax').load('ajax-content.html')

the 4 steps of making an ajax request using jquery

$.get(url,data,callback)

- url: represents to make url to
- data: the data being passed
- callback: the callback function

an example

const url = '/employees.php';
let data = {
    firstName: 'kofi',
    lastName: 'ramos'
};
const callback = function(response){}
$.get(url,data,callback)

another example

	$('#load').click(function(){
		$.get('ajax-content.html',function(response){
			$("#ajax").html(response)
		})

		$("#ajax").toggle();
	})