AJAX

##Overview

Asynchronous Javascript, and XML (AJAX), is an approach that allows client-side code to interact with server side logic, without changing the layout and design of webpage (i.e. reloading the page).

Though, the X in AJAX generally stands for XML, JSON is most often preferred. JSON has the advantage of being both lighter, and an existing component of javascript.

###Examples

$(document).ready(function() {
  $('form').on('submit', function(event) {
    event.preventDefault();

  // Serialize Form
    var data_formatted = $('form').serializeArray();

  // AJAX Request
    $.ajax({
      url: $(this).attr('action'),
      type: 'POST',
      data : data_formatted,
      dataType : 'json',
      beforeSend: function() {

    // AJAX overlay, and jQuery Validation
      [...]

      }
    }).done(function(data) {
  // Server Response
      [...]

  // Remove AJAX overlay
      $('form .ajax_overlay').fadeOut(200, function(){ $(this).remove() });
    }).fail(function(jqXHR, textStatus, errorThrown) {
  // Error Message
    });

  });
});