simplify ajax using jquery
TRANSCRIPT
Simplify AJAX using jQuery
Sivasubramaniam Arunachalam
December 24, 2012
@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
XMLHttpRequest
Google and AJAX
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
http://www.cs.uky.edu/~paulp/CS316F12/CS316AJAX_html_m79697898.png
AJAX in Javascript - Initialize
AJAX in Javascript - Callback
AJAX in Javascript - Send
HTTP Cache related Fields
• Expires
• Last-Modified
• Cache-Control
Expires
Last-Modified
Cache-Control
POST - n/a
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
The jQuery Way
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:
$(“selector”).load( URL, [data], [callback] );
GET / POST
Better AJAX request - GET
Syntax:
$(“selector”).load( URL, [data], [callback] ); ”company=yahoo&loc=india”
GET
Better AJAX request - GET
$(“selector”).load(
“ajax/getdata”,
”company=yahoo&loc=india”
);
Better AJAX request - POST
Syntax:
$(“selector”).load( URL, [data], [callback] ); { company: ‘yahoo’, loc: ‘india’ }
POST
Better AJAX request - POST
$(“selector”).load(
“ajax/getdata”,
{ company: ‘yahoo’, loc: ‘india’ }
);
Better AJAX request
Syntax:
$(“selector”).load( URL, [data], [callback] );
(responseText, textStatus, XMLHttpRequest)
AJAX, jQuery &
JSON
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”: {
“first”: “Sivasubramaniam”,
“last”: “Arunachalam”
},
“profession”: “developer”
}
json.id
JSON – Access (2) var json =
{
”id”: “23IT64”,
“name”: {
“first”: “Sivasubramaniam”,
“last”: “Arunachalam”
},
“profession”: “developer”
}
json.name.first
AJAX - JSON Request
Syntax:
$.getJSON( URL, [data], [success callback] );
AJAX - JSON Request
Syntax:
$.getJSON( URL, [data], [success callback] );
”company=yahoo&loc=india”
{ company: ‘yahoo’, loc: ‘india’ }
GET
No Post & GET only
AJAX - JSON Request
Syntax:
$.getJSON( URL, [data], [success callback] );
Success_callback( json_data, [textStatus], [jqXHR] )
AJAX - JSON Request - Example
$.getJSON ( “ajax/getjson”,
”company=yahoo&loc=india”,
function(json) { $("#mydiv01").html(json.id); $("#mydiv02").html(json.profession); }
);
AJAX, jQuery &
Remote Script
Let’s load a piece of Javascript from Server and execute it.
AJAX – Script Request
Syntax:
$.getScript(
URL,
[success callback]
);
AJAX – Script Request
Syntax:
$.getScript(
URL,
[success callback]
);
success_callback( [script_data], [textStatus], [jqXHR] )
AJAX – Script Request - Example
$.getScript( “ajax/getscript”,
function() { $("#mydiv").html(“Script Loaded..”);
}
); Script will be executed automatically!
A Simple GET AJAX Request
AJAX – GET Request
Syntax:
$.get( URL, [data], [success callback], [response data type] );
AJAX – GET Request Syntax:
$.get( URL, [data], [success callback], [response data type] );
{ company: ‘yahoo’, loc: ‘india’ }
AJAX – GET Request Syntax:
$.get( URL, [data], [success callback], [response data type] );
success_callback( data, [textStatus], [jqXHR] )
AJAX – GET Request Syntax:
$.get( URL, [data], [success callback], [response data type] );
• html • xml • json • script
AJAX – GET Request - Example
$.get(
“ajax/getdata”,
{ company: ‘yahoo’, loc: ‘india’ },
function(responseText) {
$("#content").html(responseText)
},
“html”
);
A Simple POST AJAX Request
AJAX – POST Request
Syntax:
$.post( URL, [data], [success callback], [response data type] );
AJAX – POST Request Syntax:
$.post( URL, [data], [success callback], [response data type] );
{ company: ‘yahoo’, loc: ‘india’ }
AJAX – POST Request Syntax:
$.post( URL, [data], [success callback], [response data type] );
success_callback( data, [textStatus], [jqXHR] )
AJAX – POST Request Syntax:
$.post( URL, [data], [success callback], [response data type] );
• html • xml • json • script
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
• cache
• timeout
• contentType
• dataType
• type
• url
• username
• password
• global
• beforeSend()
• complete()
• success()
• error()
Override is possible
Global AJAX Event Handlers
• .ajaxSend()
• .ajaxStart()
• .ajaxStop()
• .ajaxComplete()
• .ajaxSuccess ()
• .ajaxError()
• .done()
• .fail()
• .always()
• .ajaxComplete()
• .ajaxSuccess ()
• .ajaxError()
.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/
Demo
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