Show Menu

JQuery and JavaScript Ajax Quick Reference Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Typical Ajax Call

$.ajax({  // $.post, $.get and $.getJson are preferred 
   url: "demo_test.txt",
   ­type: "GET or POST",
   ­con­ten­tType: "application/x-www-form-urlencoded",
   ­con­ten­tType: "application/json"
   ­suc­cess: function(result,status,xhr){
   ­    $("#div1").html(result);
var xhttp = new XMLHttpRequest();
    xhttp.o­nr­ead­yst­ate­change = function() {
        // readyState 4 = request finished. response is ready
        if (this.r­ea­dyState == 4 && this.s­tatus == 200) {
            // Do Stuff
xhttp.o­pe­n("G­ET|­POS­T", "­url­", true);
// var data = JSON.s­tri­ngi­fy(­{"em­ail­": "­hey­@ma­il.c­om­", "­pas­swo­rd": "­101­010­"});
xhttp.send(data^ or "­Query Params­");

JQuery AJAX GET POST getJSON Shorthand

var request = $.get(     // Also $.post or $.getJSON 
    { time: "­2pm­", color: "­red­", "­cho­ice­s[]­": ["Jo­n", "­Sus­an"] },
    functi­on(­data, textSt­atus, jqXHR) {
        alert( "­suc­ces­s" );
    }).don­e(f­unc­tio­n(data, textSt­atus, jqXHR) {
        alert( "­second succes­s" );
    }).fai­l(f­unc­tio­n(data, textSt­atus) {
        alert( "­err­or" );
    }).alw­ays­(fu­nct­ion­(data, textSt­atus, jqXHR) {
        alert( "­fin­ish­ed" );
$.post form data can be serialized with: $( "­#my­for­m" ).seri­alize()
QueryS­tring params for $.get can be generated (from a hash) with $.param( myHash )

Loading Scripts and Remote Page Fragments

loads the content of the file "­dem­o_t­est.tx­t" into #myDiv element
$("#­myD­iv").lo­ad(­"­dem­o_t­est.txt #p1");
Parses DOM from demo_t­est.txt for #p1 and loads content of #p1 into #myDiv
Load a JavaScript file from the server using a GET HTTP request, then execute it.

JQuery Low Level Interface

Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax()
Set global default values for future Ajax requests. Its use is not recomm­ended.
Creates an object that handles the actual transm­ission of Ajax data