Example: Add extra headers to an Ajax request using beforeSend

$.ajax({
  type: "POST",
  url: "/files/add/",
  beforeSend: function(xhr) {
    xhr.setRequestHeader( "Content-type", "text/plain" );
  },
  data: "This is the contents of my text file."
});

Example: Perform a synchronous Ajax request.

// Get the HTML of a web page and save it
// to a variable (the browser will freeze until the
// entire request is completed).
var html = $.ajax({
  type: "GET",
  url: "test.html",
  async: false
}).responseText;

// Add the HTML into the page
$("#list").html( html );

Example: Sending a JavaScript object using processData.

// The data to send to the server
var params = {
  name: "John",
  city: "Boston"
};

$.ajax({
  type: "POST",
  url: "/user/add/",
  processData: params
});

Example: Aborting an Ajax request after a specific delay in time.

// Perform a simple Ajax request
var req = $.ajax({
  type: "GET",
  url: "/user/list/",
  success: function(data) {
    // Do something with the data...
    // Then remove the request.
    req = null;
  }
});

// Wait for 5 seconds
setTimeout(function(){
  // If the request is still running, abort it.
  if ( req ) req.abort();
}, 5000);

Example: Add extra headers to all Ajax requests using the ajaxSend event.

$(document).ajaxSend(function(xhr){
  xhr.setRequestHeader("X-Web-Request", "MySite.com");
});

Example: Prevent any POST requests that are sending too much data.

$(document).ajaxSend(function(xhr,options){
  if ( options.type == "POST" && options.data.length > 1024 )
    xhr.abort();
});

Example: Show a special message for requests submitted using an Ajax POST.

$("#dataSent").ajaxSend(function(xhr,options){
  if ( options.type == "POST" )
    $(this).show();
});

Example: Have a tooltip follow a user’s mouse around the page.

$(document).mousemove(function(e){
  $("#mousetip").css({
    top: e.pageY + "px",
    left: e.pageX + "px"
  });
});