introduction to ajax
DESCRIPTION
A short introduction to AJAX technology with an emphasis on the use with jQuery library & ASP.net platformTRANSCRIPT
Introduction to AJAXNir Elbaz
Intro
du
ction
to A
JAX
NirElbaz
Introduction to AJAX
• Index
• What is AJAX?
• Making AJAX requests with raw JavaScript
• Making AJAX requests with jQuery
• AJAX & ASP.net
• AJAX security
Intro
du
ction
to A
JAX
NirElbaz
What is AJAX
• AJAX stands for Asynchronous JavaScript And XML
• Allows web pages or parts of them to be updated asynchronously
• Based on XML HTTP request object (AKA XHR)
• Requires basic understanding of:
• (X)HTML – displaying the data
• CSS – styling the data
• JavaScript – manipulating the DOM
• XML / JSON – received / sent data format (also HTML & text)
Also refers dynamic content
Intro
du
ction
to A
JAX
NirElbaz
What is AJAX
Browser
User Interface
Web Server
Databases, backend processes
HTTP(S) TransportHTTP request
HTML/CSS/JS/* response
Classic web application model
Browser
User Interface
Web Server
Databases, backend processes
HTTP(S) TransportHTTP request
HTML/CSS/JS/* response
AJAX web application model
AJAX engine
JS call
Valid
respo
nse can
be an
y textual d
ata: htm
l, css, js, csv, xml…
Intro
du
ction
to A
JAX
NirElbaz
What is AJAX
Classic web application model AJAX web application model
User
Front end
Back end
Intro
du
ction
to A
JAX
NirElbaz
What is AJAX
• Usage samples
• Autocomplete search textboxes (sample)
• Cascading dropdown list boxes (sample)
• Real-time - Continuous data refresh (long polling, chat systems…)
• Immediate forms validation feedback (sample)
• Conditional display / dynamic content (sample)
• Auto save user information (Google Docs, Facebook)
• Ratings, voting & other instant actions (sample)
Intro
du
ction
to A
JAX
NirElbaz
What is AJAX
• Browser support
• Mozilla Firefox 1.0 and above
• Google Chrome
• Apple Safari 1.2 and above
• Microsoft Internet Exporer 5 and above (ActiveXObject for lte IE6)
• Opera 7.6 and above
Intro
du
ction
to A
JAX
NirElbaz
What is AJAX
• Pros
• Better interactivity & responsiveness
• Impressive UX
• Reduced connections to the web server (partial rendering)
• Reduced bandwidth
• Its “cool”
Intro
du
ction
to A
JAX
NirElbaz
What is AJAX
• Cons
• The back and refresh button are rendered useless
• Bookmarking is useless (HTML 5 History API to the rescue)
• Requires JavaScript to be enabled on browsers
• SEO & analytics unfriendly
• Screen readers unfriendly – affects accessibility
• Callbacks can lead to complex code
• Network latency may break usability
Intro
du
ction
to A
JAX
NirElbaz
Making AJAX requests with raw JavaScript
• Basic steps
• A client event occurs (button click, setTimeout fired…)
• An XMLHttpRequest object is created
• The XMLHttpRequest object is configured
• The XMLHttpRequest object makes an asynchronous request to the Webserver
• Webserver returns the result
• The XMLHttpRequest object calls the callback() function and processes the result
Intro
du
ction
to A
JAX
NirElbaz
Makin
g A
JAX
requ
ests with
raw JavaS
cript
readyState codes:0: object created but uninitialized1: loading (opened, not sent)2: loaded (send but no response)3: interactive (partial response)4: complete (full response)
status (HTTP) codes:1xx: (Provisional response) 2xx: (Successful)3xx: (Redirected)4xx: (Request error)5xx: (Server error)
Samples:200 - the server successfully returned the page404 - the requested page doesn't exist503 - the server is temporarily unavailable
Methods:open(method, url, async)send(string)setRequestHeader(header, value)
Intro
du
ction
to A
JAX
NirElbaz
Making AJAX requests with raw JavaScript
• GET or POST?
• GET is faster and simpler than POST
• Use POST in these cases:
• A cached file is not an option (update a file or database on the server)
• Sending a large amount of data to the server (POST has no size limitations)
• Sending user input (which can contain unknown characters)
Intro
du
ction
to A
JAX
NirElbaz
Making AJAX requests with raw JavaScript
• Usage samplesGET request (-params, +cache)xmlhttp.open(“GET”, “myWS.asp”, true);xmlhttp.send(“”);
GET request (-params, -cache)xmlhttp.open(“GET”, “myWS.asp?t=” + Math.random(), true);xmlhttp.send(“”);
GET request (+params, +cache)xmlhttp.open(“GET”, “myWS.asp?fname=Nir&lname=Elbaz”, true);xmlhttp.send(“”);
POST request (+params, -cache)xmlhttp.open(“POST”, “myWS.asp”, true);xmlhttp.send(“fname=Nir&lname=Elbaz”); // sending params now
Intro
du
ction
to A
JAX
NirElbaz
Making AJAX requests with raw JavaScript
• Callback sample
• Can get either free text (e.g. HTML, JS…) or XML document
• Can get response header value with getResponseHeader(‘HEADER’)
Intro
du
ction
to A
JAX
NirElbaz
Making AJAX requests with raw JavaScript
• Debugging XHR
• Developer Tools (Chrome, FireBug….)
• Fiddler
• …
XHR requests logs in Chrome Developer Tools
Intro
du
ction
to A
JAX
NirElbaz
Making AJAX requests with jQuery
• jQuery provides great support for AJAX & simplify usage:
• load(url, data, callback): Load a piece of html into a container DOM
• $.getJSON(url, data, callback): Load a JSON with GET method
• $.getScript(url, callback): Load a JavaScript
• $.get(url, data, callback, type): Generic AJAX GET request
• $.post(url, data, callback, type): Generic AJAX GET request
• $.ajax(options): All purpose AJAX request (higher level abstractions)
Syn
tactic sug
ar of $.ajax
GET, POST
GET
GET
POST
GET, POST
Intro
du
ction
to A
JAX
NirElbaz
Making AJAX requests with jQuery
• Usage samplesLoad (part of a) remote file$("#result").load(loadUrl);$("#result").load(loadUrl + " #picture"); // Best practice: Use HTML(‘<img src=“loader.gif” />’)
before calling the load function
Load remote file w/ parameters$("#result").load(loadUrl, “fname=Nir&lname=Elbaz”); // GET$("#result").load(loadUrl, {fname:“Nir”, lname:“Elbaz”}); // POST// Best practice: Use HTML(‘<img src=“loader.gif” />’)
before calling the load function
Intro
du
ction
to A
JAX
NirElbaz
Making AJAX requests with jQuery
• Usage samplesGet JSON file (GET only), generate HTML fragment and append to HTML$.getJSON(“http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?”, {
tags: “Israel”,tagmode: “any”,format: “json”
}).done(function (data) {
$.each(data.items, function(index, item ) {$(“<img/>”).attr(“src”, item.media.m).appendTo(“#images”);
});});
JSONP
Intro
du
ction
to A
JAX
NirElbaz
Making AJAX requests with jQuery
• Usage samples
Full documentation of the $.ajax method
Send id as data to the server and notify the user once it’s complete or fail$.ajax({
url: “someWS.ashx”,type: “POST”,data: {id : 3},dataType: "html"
}).done(function (msg) {$("#log").html(msg);
}).fail(function (jqXHR, textStatus) {alert("Request failed: " + textStatus);
});
Intro
du
ction
to A
JAX
NirElbaz
Making AJAX requests with jQuery
• More jQuery AJAX aid methods
• $.ajaxSetup(): Sets the default values for future AJAX requests
• $.param(): Creates a serialized representation of an array or object
• ajaxStart(): Specifies a function to run when the first AJAX request begins
• ajaxError(): Specifies a function to run when AJAX request completes with an error
• serialize(): Encodes a set of form elements as a string for submission
• …
Intro
du
ction
to A
JAX
NirElbaz
AJAX & ASP.net
• Formerly known as project ATLAS
• Released on 2007 as part of ASP.net v.2
• AJAX is even more crucial on ASP.netweb applications (LC, ViewState…)
• Provides few server side controls tosimplify AJAX development but consideredinsufficient
Intro
du
ction
to A
JAX
NirElbaz
AJAX & ASP.net
• AJAX built-in server side controls
• ScriptManager - Manages script resources for client components
• UpdatePanel * - enables you to refresh selected parts of the page
• UpdateProgress * - Provides status information about partial-page updates in UpdatePanel controls
• Timer * - Performs postbacks at defined intervals (w or w/o UpdatePanel)
• AJAX Controls Toolkit
• Set of additional server controls which provide highly responsive and interactive Ajax-enabled Web applications (link)
* ScriptManager control is required in order to use the UpdatePanel, UpdateProgress, and Timer controls
Intro
du
ction
to A
JAX
NirElbaz
AJA
X &
AS
P.net
Very in
efficient -C
auses a co
mp
lete p
ostb
ack
Intro
du
ction
to A
JAX
NirElbaz
AJA
X &
AS
P.net
Intro
du
ction
to A
JAX
NirElbaz
AJAX Security
• Server side:
• Same as regular web applications in all aspects
• Client side:
• JS code is visible to a user/hacker, which can use it to search for exploits
Intro
du
ction
to A
JAX
NirElbaz
Behind The Scenes (In a Nutshell)
• A web service is any piece of SW that makes itself available over the internet
• Could be based on various technologies server pages (php, asp|m|hx, sc…)
asmx ashx wcf
Intro
du
ction
to A
JAX
NirElbaz
Resources
• http://www.w3schools.com/ajax/
• http://www.tutorialspoint.com/ajax/
• http://en.wikipedia.org/wiki/Ajax_(programming)
• http://net.tutsplus.com/
• http://www.w3schools.com/jquery/jquery_ref_ajax.asp
• http://api.jquery.com/jQuery.ajax/
• http://msdn.microsoft.com/en-us/library/bb398874(v=vs.100).aspx