Post on 15-May-2015
2006 Adobe Systems Incorporated. All Rights Reserved.1
RIAjaxfied
Rakshith16 Dec 2007
2006 Adobe Systems Incorporated. All Rights Reserved.2
Agenda
Ajax Overview
Sample Mashup Application
Ajax Design Patterns
Ajax Security
Sneak peek into one of the popular Ajax frameworks
2006 Adobe Systems Incorporated. All Rights Reserved.3
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.
2006 Adobe Systems Incorporated. All Rights Reserved.4
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.
2006 Adobe Systems Incorporated. All Rights Reserved.5
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.
2006 Adobe Systems Incorporated. All Rights Reserved.6
Traditional Web Application Model
Web Server
Web Browser
HTTP
Request
HTML, Images, CSS, JavaScript
Query/ Data Request
Data
Database
2006 Adobe Systems Incorporated. All Rights Reserved.7
Ajax Web Application Model
Web Server
Web Browser
HTTP
Request
Data
Query/ Data Request
Data
DatabaseUser
InterfaceJavaScript
HTML, CSS
JavaScript Call
2006 Adobe Systems Incorporated. All Rights Reserved.8
AJAX Communication Techniques
Hidden Frame Technique
Hidden IFrame Technique
XMLHttp
2006 Adobe Systems Incorporated. All Rights Reserved.9
Hidden Frame Technique
Web Server
Web Browser
Request Query/ Data Request
Data
Database
Visible Frame
JavaScript Call
Hidden FrameWeb
Page
JavaScript Call
2006 Adobe Systems Incorporated. All Rights Reserved.10
Hidden Frame Technique
<frameset rows=“100%,0”
frameborder=“0”>
<frame name=“displayFrame”
src=“display.htm”
noresize=“noresize”
/>
<frame name=“hiddenFrame”
src=“about:blank”
noresize=“noresize”
/>
</frameset>
2006 Adobe Systems Incorporated. All Rights Reserved.11
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”>
2006 Adobe Systems Incorporated. All Rights Reserved.12
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.
2006 Adobe Systems Incorporated. All Rights Reserved.13
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();
2006 Adobe Systems Incorporated. All Rights Reserved.14
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
2006 Adobe Systems Incorporated. All Rights Reserved.15
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);
2006 Adobe Systems Incorporated. All Rights Reserved.16
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.
2006 Adobe Systems Incorporated. All Rights Reserved.17
JSON Data Format
2006 Adobe Systems Incorporated. All Rights Reserved.18
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.
2006 Adobe Systems Incorporated. All Rights Reserved.19
JavaScript Array and Object
JavaScript Array
Var
aNames
= [“Benjamin”, “Micheal”, “Scott”];
JavaScript Object
Var
aCar
= {
“color”
: “red”,
“doors”
: 4
};
2006 Adobe Systems Incorporated. All Rights Reserved.20
XML and JSON
<books>
<book isbn=“000230”/>
<book isbn=“000231”/>
</books>
{ books: [
{isbn:’000230’}
,{isbn:’000231’}
]
}
2006 Adobe Systems Incorporated. All Rights Reserved.21
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
2006 Adobe Systems Incorporated. All Rights Reserved.22
Ajax in Action
The Google Map Mashup Application
2006 Adobe Systems Incorporated. All Rights Reserved.23
Ajax Patterns
Predictive Fetch
Submission Throttling – Google suggest
Periodic Refresh – Gmail
Multi Stage Download
2006 Adobe Systems Incorporated. All Rights Reserved.24
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.
2006 Adobe Systems Incorporated. All Rights Reserved.25
The Same Origin Policy
Any page loaded from this origin may access, download, and interact with any other resource from the same origin.
2006 Adobe Systems Incorporated. All Rights Reserved.26
Ways to get around Same Origin Policy
Using the script tag
<script src=“someotherdomain.com”>
Using the image tag
<img
src=“sometotherdomain.com”>
2006 Adobe Systems Incorporated. All Rights Reserved.27
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/
2006 Adobe Systems Incorporated. All Rights Reserved.28
EXTJS
http://www.extjs.com
One of the cool Ajax Frameworks out there
2006 Adobe Systems Incorporated. All Rights Reserved.29