adobe® corporate template 2005

2006 Adobe Systems Incorporated. All Rights Reserved.1

RIAjaxfied

Rakshith16 Dec 2007


Agenda

Ajax Overview

Sample Mashup Application

Ajax Design Patterns

Ajax Security

Sneak peek into one of the popular Ajax frameworks


Ajax

Ajax is a term surrounding the use of asynchronous HTTP requests

initiated by JavaScript for the purpose of retrieving information from the

server without unloading the page.


Pre Ajax Era

Google was the first to build web applications on the Ajax lines

Google Suggest and Google Maps involved only a single page that was never unloaded.


Ajax Is Here

“Ajax –

A New Approach to Web Applications”, James Garret, February 2005

Google Suggest and Google Maps are two examples of a new approach to web application that we at Adaptive Path have been calling Ajax. The

name is the shorthand for Asynchronous JavaScript + XML and it represents a fundamental shift in what’s possible on the web.


Traditional Web Application Model

Web Server

Web Browser

HTTP

Request

HTML, Images, CSS, JavaScript

Query/ Data Request

Data

Database


Ajax Web Application Model

Web Server

Web Browser

HTTP

Request

Data

Query/ Data Request

Data

DatabaseUser

InterfaceJavaScript

HTML, CSS

JavaScript Call


AJAX Communication Techniques

Hidden Frame Technique

Hidden IFrame Technique

XMLHttp



Web Server

Web Browser

Request Query/ Data Request

Data

Database

Visible Frame

JavaScript Call

Hidden FrameWeb

Page

JavaScript Call


Hidden IFrame

Technique

IFrames were introduced in HTML 4.0

IFrame is a frame that can be placed inside a non-frameset HTML page.

<iframe

src=“about:blank”

name=“hiddenFrame”

width=“0”

height=“0”

frameborder=“0”>


XMLHttp

Microsoft introduced an ActiveX library called MSXML to provide support for XML on IE.

XMLHttp

object in this library gained popularity.

XMLHttp

–

Enabled developers to initiate HTTP requests from anywhere in the application.

Firefox, safari and opera browsers soon duplicated the functionality of

XMLHttp

by enabling the creation of XMLHttpRequest

objects.


XMLHttp

Creation

On Internet Explorer

Var

xmlHttp

= new ActiveXObject(“Microsoft.XMLHttp”);

Versions:

MSXML2.XMLHttp

MSXML2.XMLHttp3.0

…

MSXML2.XMLHttp5.0

On other browsers

Var

xmlHttp

= new XMLHttpRequest();

zXML

Library (www.nczonline.net/downloads)

Var

xmlHttp

= zXmlHttp.createRequest();


XMLHttp

Usage

•

Open function

xmlHttp.open([httpmethod], [url], [async])

•

readyState

0 –

uninitlialized

4 –

complete

•

onreadystatechange

functionDefines the callback handler when the ready state changes.

•

Send function

sends the request by taking an optional request body parameter


XMLHttp

Usage

responseText

Contains the response returned from the server

StatusContains the http status code of the response

Var

xmlHttp

= zXmlHttp.createRequest();

xmlHttp.open(“GET”,”test.cfm”, true);

xmlHttp.onreadystatechange

= function ()

{

If(xmlHttp.readyState

== 4)

{

alert(“Got

the response, response is:”

xmlHttp.responseText);

}

};

xmlHttp.send(null);


Advantages and disadvantages of XMLHttp

The code is much cleaner and the intent of the code is more apparent.

No browser history record of the calls that were made.

Particular browser settings do not allow ActiveX controls.


JSON Data Format


JSON –

What?

JavaScript Object Notation – Douglas Crockford

JSON is a light weight data format based on the subset of the JavaScript syntax.

Based on array and object literals of JavaScript.


JavaScript Array and Object

JavaScript Array

Var

aNames

= [“Benjamin”, “Micheal”, “Scott”];

JavaScript Object

Var

aCar

= {

“color”

: “red”,

“doors”

: 4

};


XML and JSON

<books>

<book isbn=“000230”/>

<book isbn=“000231”/>

</books>

{ books: [

{isbn:’000230’}

,{isbn:’000231’}

]

}


Advantages of JSON

Light Weight though is less readable than XML

To transform JSON data into a javascript object, all that has to be done is:

var

carInfo

= eval(“(”

+ jsonData

+“)”);

Server side tools are available for each server side technology

Ex: JSON-PHP for PHP, CFJSON library for ColdFusion, json-py

for python, etc


Ajax in Action

The Google Map Mashup Application


Ajax Patterns

Predictive Fetch

Submission Throttling – Google suggest

Periodic Refresh – Gmail

Multi Stage Download


Ajax Security

No inherent weakness in Ajax

Ajax can consume XML, JSON or JavaScript by simple GET and POST without any middleware tier.

Incoming data is injected into the current DOM context dynamically.


The Same Origin Policy

Any page loaded from this origin may access, download, and interact with any other resource from the same origin.


Ways to get around Same Origin Policy

Using the script tag

<script src=“someotherdomain.com”>

Using the image tag

<img

src=“sometotherdomain.com”>


How to get around it?

JSON prefix

Attach a security token with each request

Check 3rd party scripts for malicious code

Google Caja

–

A source-source translator for securing JavaScript

http://code.google.com/p/google-caja/


EXTJS

http://www.extjs.com

One of the cool Ajax Frameworks out there

http://www.extjs.com/

adobe® corporate template 2005

Documents

adobe systems incorporated

xmlhttp object

xmlhttp msxml2

response var xmlhttp

xmlhttp versions

createrequest xmlhttp

true xmlhttp

disadvantages of xmlhttp