How to use Ajax in WORDPRESS

How AJAX Works In WordPress

What's AJAX?
AJAX stands for Asynchronous JavaScript And XML. It is the use of the XMLHttpRequest object to communicate with servers, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.

Step1: Define the Ajax URL.
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' );?>';

Step2: Define its action and perform with using POST method

var emailAddress = jQuery('#uemail').val();
var searchData = {
action: 'get_registered_email',
email_address:emailAddress,
}

Step 3: Perform ajax request
jQuery.ajax({
url: ajaxurl,
type: "POST",
data: searchData,
success: function(data){
  jQuery("div#divLoading").removeClass('show');
  jQuery('#memberResult').html(data);
  //alert(data);
},
error: function(errorThrown){
alert(errorThrown);
}
});

Step 4: Use Wordpress 2 ajax hooks i.e wp_ajax_your_action and wp_ajax_nopriv_your_action

Example: In Our ajax request we have defined action name as "get_registered_email" so our ajax action hook will be as follows:

add_action('wp_ajax_nopriv_get_registered_email', 'wpyog_get_registered_email'); // for not logged in users
add_action('wp_ajax_get_registered_email', 'wpyog_get_registered_email');

Step5: Ajax request callback function
function wpyog_get_registered_email(){
wp_die();
}

Full Example 1:
JavaScript: 
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' );?>';
var emailAddress = jQuery('#uemail').val();
var searchData = {
action: 'get_registered_email',
email_address:emailAddress,
}
jQuery.ajax({
url: ajaxurl,
type: "POST",
data: searchData,
success: function(data){
  jQuery("div#divLoading").removeClass('show');
  jQuery('#memberResult').html(data);
  //alert(data);
},
error: function(errorThrown){
alert(errorThrown);
} 
});

functions.php
add_action('wp_ajax_nopriv_get_registered_email', 'wpyog_get_registered_email'); // for not logged in users
add_action('wp_ajax_get_registered_email', 'wpyog_get_registered_email');
function wpyog_get_registered_email(){
echo "<pre>"; print_r($_REQUEST); exit;
wp_die();
}


Full Example 2:

// create nonce using php
//$nonce = wp_create_nonce("techsudhir_profile_update");
add_action( 'init', 'techsudhir_script_enqueuer' );

function techsudhir_script_enqueuer() {
   wp_register_script( "techsudhir_script", WP_PLUGIN_URL.'/my_plugin/techsudhir_script.js',array('jquery') );
   wp_localize_script( 'techsudhir_script','myAjax',array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'techsudhir_script' );

}

techsudhir_script.js
jQuery(document).ready( function() {

   jQuery(".user_action").click( function(e) {
      e.preventDefault(); 
      post_id = 12;
      nonce = 'techsudhir_profile_update';

      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {action: "save_techsudhir_profile", post_id : post_id, nonce: nonce},
         success: function(response) {
            if(response.type == "success") {
               console.log(response.view_count)
            }
            else {
               alert("Your vote could not be added")
            }
         }
      })   

   })

})

add_action("wp_ajax_save_techsudhir_profile", "save_techsudhir_profile");
add_action("wp_ajax_nopriv_save_techsudhir_profile", "save_techsudhir_profile");

function save_techsudhir_profile() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "techsudhir_profile_update")) {
      exit("No naughty business please");
   }   

   $result['type'] = "success";
   $result['view_count'] = 11;

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();


}