WordPress AJAX for Beginners

In recent projects I use AJAX more, and I think it’s time to share my knowledge. This tutorial is just a simple guide to understand the basic about using AJAX in WordPress. To follow this tutorial you will need to understand the basic of:
Simple jQuery / JavaScript
Simple PHP
How form works
Register and Enqueue Scripts in WordPress
Register WordPress shortcode (example plugin)
What Is AJAX?
With JavaScript/jQuery we can manipulate DOM/HTML elements. But we can only add data that available in the DOM or add the code within the JavaScript it-self.
AJAX is a bridge to get data from PHP to the DOM without having to reload the page. For example we can pull data from the server (using PHP) when user click a button or when user scroll, etc.
This will make the user interaction flow smoother and improve user experience drastically because we no longer need to refresh the page to display new content.
Example:
I create an empty div:

And I want to add some lorem-ipsum text inside that empty div. I can do this easily with jQuery:
jQuery( document ).ready( function($) {
    $( ‘#the-empty-div’ ).html( ‘Lorem ipsum dolor sit
Source: https://managewp.org/articles/13901/wordpress-ajax-for-beginners

source https://williechiu40.wordpress.com/2016/11/26/wordpress-ajax-for-beginners/