Simplify AJAX using jQuery

Simplify AJAX using
jQuery
December 24, 2012

Sivasubramaniam Arunachalam
@sivaa_in
http://www.meetup.com/Online-Technology-User-Group/events/87541132/

It’s me!

• Application Developer
• Technical Consultant
• Process Mentor

It’s about you!

Web(Application) Developer &
Tasted jQuery

Expectations
• Introduction
• No Server Specific
• Not a tutorial
• Not a reference guide

Introduction to AJAX
Asynchronous
- No refresh
- No redirection
- Same Lifeline
JavaScript
And XML

AJAX – The Flow

http://www.cs.uky.edu/~paulp/CS316F12/CS316AJAX_html_m79697898.png

http://www.cs.uky.edu/~paulp/CS316F12/CS316AJAX_html_m79697898.png

AJAX in Javascript - Initialize

HTTP Cache related Fields

• Expires
• Last-Modified
• Cache-Control

Caching and AJAX
• Caching is always good
• Same as HTTP Caching
• Static Content
• Lookup Data
• Images
• Not good for AJAX
• Mostly used with Dynamic Content

IE always Caches AJAX requests
by Default

Simple Hack

Just add random number to
request URL

Simple AJAX request

load()

Simple AJAX request

Syntax:

$(“selector”).load(URL);

Simple AJAX request

Example:

$(“#myDiv”).load(“/get.html”);

Event are Important

Example:
$(“#myButton”).click(function(event){
$(“#myDiv”).load(“/get.html”);
});

Process a Part
url = ajax/load_basic
url = ajax/load_basic #image
<dom id=“image”>…</dom>

Example:
<a href=“url" id="image">
<img src=“img.jpg”>
</a>

Better AJAX request
Syntax:
$(“selector”).load(
URL,
[data],
[callback]
);

Better AJAX request - Methods
Syntax:
URL,
[data], GET / POST

[callback]
);

Better AJAX request - GET
Syntax:
URL,
[data], GET
[callback]
);
”company=yahoo&loc=india”

Better AJAX request - GET

“ajax/getdata”,
);

Better AJAX request - POST
Syntax:
URL,
[data],
POST
[callback]
);
{ company: ‘yahoo’,
loc: ‘india’ }

Better AJAX request - POST

“ajax/getdata”,
{ company: ‘yahoo’, loc: ‘india’ }
);

Better AJAX request
Syntax:
URL,
[data],
[callback]
); (responseText, textStatus, XMLHttpRequest)

JSON
JavaScript Object Notation
• data-interchange format
• Light weight
• Human readable
• And better than XML
• Now language independent

JSON - Example
var json =
{
“id”: “23IT64”,
“name”: {
“first”: “Sivasubramaniam”,
“last”: “Arunachalam”
},
“profession”: “developer”
}

JSON – Access (1)
var json =
{

“id”: “23IT64”,
“name”: {
},
“profession”: “developer” json.id
}

JSON – Access (2)
var json =
{ json.name.first
”id”: “23IT64”,
“name”: {
},
“profession”: “developer”
}

AJAX - JSON Request
Syntax:
$.getJSON(
URL,
[data],
[success callback]
);

AJAX - JSON Request
Syntax:
GET
$.getJSON( { company: ‘yahoo’, loc: ‘india’ }

URL, No Post & GET only

[data],
[success callback]
);

AJAX - JSON Request
Syntax: Success_callback(
json_data,
$.getJSON( [textStatus],
URL, [jqXHR]
)
[data],
[success callback]
);

AJAX - JSON Request - Example
$.getJSON (
“ajax/getjson”,
”company=yahoo&loc=india”,

function(json) {
$("#mydiv01").html(json.id);
$("#mydiv02").html(json.profession);
}
);

Let’s load a piece of
Javascript from Server
and execute it.

AJAX – Script Request
Syntax:

$.getScript(
URL,
[success callback]
);

AJAX – Script Request
Syntax: success_callback(
[script_data],
$.getScript( [textStatus],
[jqXHR]
URL, )
[success callback]
);

AJAX – Script Request - Example

$.getScript(
“ajax/getscript”,
function() {
$("#mydiv").html(“Script Loaded..”);
}
); Script will be executed automatically!

AJAX – GET Request
Syntax:
$.get(
URL,
[data],
[success callback],
[response data type]
);

Syntax:
$.get(
URL,
[data],
[success callback],
);

$.get( data,
[textStatus],
URL, [jqXHR]
[data], )
[success callback],
);

Syntax: • html
$.get( • xml
• json
URL, • script
[data],
[success callback],
);

AJAX – GET Request - Example
$.get(
“ajax/getdata”,
{ company: ‘yahoo’, loc: ‘india’ },
function(responseText) {
$("#content").html(responseText)
},
“html”
);

AJAX – POST Request
Syntax:
$.post(
URL,
[data],
[success callback],
);

Syntax:
$.post(
URL,
[data],
[success callback],
);

$.post( data,
[textStatus],
URL, [jqXHR]
[data], )
[success callback],
);

Syntax: • html
$.post( • xml
• json
URL, • script
[data],
[success callback],
);

AJAX – POST Request - Example
$.post(
“ajax/postdata”,
{ company: ‘yahoo’, loc: ‘india’ },
function(responseText) {
$("#content").html(responseText)
},
“html”
);

And we are done with the
“basics”

And what happens when AJAX
requests are
“failed”?
Lets do advanced AJAX 

Global Setup
$.ajaxSetup()
• async
• type • global
• cache •
• url beforeSend()
• username • timeout • complete()
• password • contentType • success()
• dataType • error()
Override is possible

Global AJAX Event Handlers
• .ajaxSend() • .ajaxComplete()
• .ajaxStart() • .ajaxSuccess ()
• .ajaxStop() • .ajaxError()
• .done()
• .fail()
• .always()

.ajaxStart() & .ajaxStop()
var ajax_load = “<img src=“loading.gif”/>

$("*").ajaxStart(function(){
$("#loading").html(ajax_load);
});

$("*").ajaxStop(function(){
$("#loading").html("");
});

.ajax() - Examples
$.ajax ( {
url: “ajax/load“,
success: function(data) {
$(‘#result').html(data);
}
});

.ajax() - Examples
$.ajax ( {
url: “ajax/get“,
type: “GET“,
cache: true
}).done(function( data) {
$("#results").html(data);
});

.ajax() - Examples
$.ajax ( {
url: “ajax/post“,
type: “POST“,
data: { company: “yahoo", loc: “india" }
}).done(function( data) {
$("#results").html(data);
});

.ajax() - Examples

$.ajax ( {
url: “ajax/js“,
type: “GET“,
dataType: “script”,
});

.ajax() - Examples

$.ajax ( “ajax/load" )
.done (function() { alert("success"); })
.fail (function() { alert("error"); })
.always (function() { alert("complete") });

Summary

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

Thank You!
siva@sivaa.in
https://www.facebook.com/sivasubramaniam.arun

References
• http://www.clickonf5.org/2902/schedule-meeting-send-invitation-gmail/
• http://explainafide.com.au/rss-feed-reader/
• http://squash2020.com/squash-tops-google-search/google-map-logo/
• http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
• http://stevesouders.com/hpws/rule-ajax.php
• http://blog.httpwatch.com/2009/08/07/ajax-caching-two-important-facts/
• http://viralpatel.net/blogs/ajax-cache-problem-in-ie/
• http://www.tutorialspoint.com/jquery/jquery-ajax.htm

Simplify AJAX using jQuery

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Simplify AJAX using jQuery (20)

More from Siva Arunachalam (17)

Recently uploaded (20)

Simplify AJAX using jQuery