JQuery AJAX

Introduction

The standard jQuery AJAX call looks like

$.ajax( {
   url            : './Index-be.php',
   type           : 'POST',
   async          : true,
   beforeSend  : function (request) {
            request.setRequestHeader(lbhguilanguage, userData.GuiLang);
   },
   data: {
       action      : '<?php echo ajaxXmlWeekDeath ?>',
       location    : 'COVID-19',
       regex       : JSON.stringify(regexp),
   },
   datatype       : 'xml'
}).done( function( textXML ) {
      // Handler for the success
}).fail( function( jqXHR, status, errorThrown) {
     // Handler for the failure
}).always( function( jqXHR, status ) {
     // Handler for the completion of the AJAX call for both done and fail
})

Important Notes

• Basic structure consists on:
  • $.ajax is the universal way to make an ajax call. Please note $.post and $.get are shortcuts/wrappers for $.ajax.
  • .done is the success handler of an ajax call. Previous and deprecated is .success
  • .fail is the failure handler of an ajax call. Previous and deprecated is .error
  • .always is the always executed after done/fail and handles the ending of an ajax call. Previous and deprecated is .complete
• Basic API settings (See https://api.jquery.com/jquery.ajax for all details):
  • url String: A string containing the URL to which the request is sent.
  • async Bool: For POST true. To be short, always use true.
  • method String: The HTTP method to use for the request (e.g. "POST", "GET", "PUT"). (version added: 1.9.0)
  • type String: An alias for method. You should use type if you're using versions of jQuery prior to 1.9.0.
  • beforeSend function( jqXHR jqXHR, PlainObject settings ): A pre-request callback function that can be used to modify the jqXHR.
  • data String or array. Data to be sent to the server. If the HTTP method is one that cannot have an entity body, such as GET, the data is appended to the URL.
  • dataType String: The type of data that you're expecting back from the server.

Some rules of thumb

• Async AJAX should be avoided.
• The most common types of an Ajax Call are POST. The GET type are useful for REST calls. So when you do not want to share your backend with another use POST.
• Always implement the .done and .fail.
• Make use of http response status codes (https://developer.mozilla.org/en-US/docs/Web/HTTP/Status).

Javascript

AJAX stands for Asynchronous JAvascipt and Xml. So the calling client is written in JavaScript.
Make use of JavaScript trick static private variables.

var doAjax = <<Some-hind-of-event-handler>>.on( <<event>>, function( e ) {
   // Initializes the private var isBusy.
   if ( typeof doAjax.isBusy == 'undefined' ) {
       doAjax.isBusy = false
   }

   if ( doAjax.isBusy ) {
      return
   }

   doAjax.isBusy
   
   // Enter the AJAX handler
   ....

Please do not forget to reset the isBusy properly in the ajax.always

   .always( function( jqXHR, status ) {
      graphWeek.isBusy = false
   })