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