Transcript Introduction to Ajax

Introduction to AJAX
Sue Brandreth
What is Ajax?
What is Ajax?
What is Ajax?
• Asynchronous
• JavaScript
• And
• XmlHttpRequest (XHR)
– Some use XML, but that is misleading
What is AJAX ?
• Asynchronous Javascript and XML.
• Not a stand-alone language or
technology.
• It is a technique that combines a set of
known technologies in order to create
faster and more user friendly web
pages.
• It is a client side technology.
Purpose of AJAX
• Prevents unnecessary reloading of a page.
• When we submit a form, although most of
the page remains the same, whole page is
reloaded from the server.
• This causes very long waiting times and
waste of bandwidth.
• AJAX aims at loading only the necessary
innformation, and making only the necessary
changes on the current page without
reloading the whole page.
Technologies Used
• AJAX uses:
– Javascript (for altering the page)
– XML (for information exchange)
– Server-side technology
Simple Processing
• AJAX is based on Javascript, and the main
functionality is to access the web server
inside the Javascript code.
• We access to the server using special objects;
we send data and retrieve data.
• When user initiates an event, a Javascript
function is called which accesses server using
the objects.
• The received information is shown to the user
by means of the Javascript’s functions.
Example
• We want to input data into a textbox.
• We want the textbox to have
intellisense property; guess entries
according to input.
• http://www.w3schools.com/ajax/ajax_exampl
e.asp
• Only the ‘span’ part of the html code is
changed.
Data Exchange in AJAX
• In AJAX:
What is AJAX?
• Asynchronous Javascript and XML
– Not all AJAX apps involve XML
• Combination of technologies
– XHTML, CSS, DOM
– XML, XSLT, XMLHttp, JavaScript
– Some server scripting language
• A method for building more responsive
and interactive applications
AJAX Components
XHTML and CSS
Ajax applies these familiar Web standards for styling the look and feel
of a page and to markup those areas on a page that will be targeted for
data updates.
DOM (document object model)
Ajax uses the DOM to manipulate dynamic page views for data and to
walkthrough documents to “cherrypick” data. The DOM enables certain
pieces of an Ajax page to be transformed and updated with data.
XML, JSON (Javascript Object Notation), HTML, or plain text
Ajax can use any of these standards to provide structure to the data it
passes to and from a page.
XMLHttpRequest object
The heavy lifter for Ajax: It’s a javascript object embedded in most
modern browsers that sets up data request/response pipelines between
client and server.
Javascript
Lightweight programming language that Ajax uses for instructions to
bind all of the components together.
Why AJAX?
• Want to make your applications
more interactive
• Want to incorporate data from
external Web Services
• Don’t want your users to have to
download a plugin
Client vs. Server Scripting
• Client scripting
– Web browser does all the work
• Server Scripting
– Web server does all the work
• AJAX leverages both client and
server side scripting
How AJAX Works
AJAX Web Interaction
• What you don’t see
• Data reload happens in the
background
• JavaScript queries the server to get
the proper data without you
knowing it
• Page updates without a screen
“reload”
Potential Problems
•
•
•
•
Javascript MUST be enabled
Back button doesn’t always work
Pages can be difficult to bookmark
Search engines may not be able to
index all portions of an AJAX site
• Cross browser differences in how
XML is dealt with
Some AJAX examples
•
•
•
•
•
Google Calendar
Flickr
Rojo
Meebo
Backpack
Basic AJAX Components
• Server-side Component
– Communicates with the database, or web
service
– Can be written in any server-side language
(PHP, ASP, Coldfusion, etc)
• Client-side Component
– Written in Javascript, often uses XMLHttp
– Accesses the server side page in the
background
Hidden Frame Method
• Communication with server takes
place in a frame that user can’t see
• Back and Forward buttons still work
• If something goes wrong user
receives no notification
XMLHttp Method
• Code is cleaner and easier to read
• Able to determine if there is a failure
• No browser history, Back and
Forward buttons break
Potential Uses for AJAX
•
•
•
•
Error checking in Forms
AutoSuggest
Drag and Drop objects functionality
Dynamically move view around on image
or map
• Preload content you want to show later
• Apply limits to search results and get new
results quickly
Why Ajax?
• XHR Support across all browsers
– Based on DOM, CSS, XHTML
• Emergence of broadband
– AJAX-based JavaScript can take considerable
bandwidth to download
• The “Killer App” - Google Maps
• A Catchy Acronym
– Coined by Jesse James Garrett of Adaptive Path
(February 2005)
Source: Garrett(2005)
Why Ajax?
Source: Garrett(2005)
AJAX Alternatives
• Adobe Flash
– Requires a plug-in
• So what? It comes already with almost every browser
• Java Web Start/Applets
• .NET – No Touch Deployment
– Both need a runtime preinstalled
• Handheld device browsers generally do not
support the full range of Ajax technologies.
Implementing AJAX
• To implement AJAX we need to answer three
questions:
– What triggers the AJAX request?
• Usually a JavaScript event (onblur, onclick, etc.)
– What is the server process that handles the AJAX
request and issues the response?
• Some kind of URL (use a Service Locator)
– What processes the response from the
server(what is the callback method)?
• A JavaScript function that gets the response and
manipulates the DOM, based on the text returned.
XmlHttpRequest Object (XHR)
• The ‘heart’ of AJAX
• First implemented in IE in 1997 as part of the
new DHTML standard
• Response comes in one of two properties:
– responseXML – Returns a DOM document (can use
functions such as, getElementById())
– responseText – A text string (can be HTML, or
even JavaScript code)
XHR : Creating
XHR : Sending the Request
true = asynchronous
XHR : Using a callback handler
Handling the Response
• Response can be one of the following:
– Formatted data (XML, other custom format)
• XMLHttpRequest.responseXML
• Decouples the server from presentation issues
• Could perform XSLT transformation on returned XML
– HTML
• XMLHttpRequest.responseText
• Server generates HTML, script “injects” HTML via
innerHTML
• Server is now concerned with presentation
– JavaScript
• XMLHttpRequest.responseText
• Use the eval() JavaScript command
• Again, our server code is concerned with presentation
AJAX Concerns
•
•
•
•
•
Security
Browser Compatibility
Accessibility
The Back Button
What if JavaScript is Turned Off?
AJAX and the Back Button
• Huge usability issue
• Returning to the previous state may not be
possible when a page is updated dynamically
• Difficult to bookmark on a particular page
state
• Really Simple History (RSH) framework
addresses these issues
– http://codinginparadise.org/projects/dhtml_history/README.html
AJAX Security – Server of Origin Policy
AJAX Security
• Browsers impose security restrictions
– Cannot make requests via the XHR outside
of the domain the web page came from
• Can set security on IE to get around this (but
you really don’t want to)
• Mozilla-based browsers require digitally signing
your script
– User must approve going to site.
• Firefox requires additional code
AJAX Security
• Calling third-party web-services
– Application Proxies – Call the web-service
from a servlet
– Apache Proxy – Configure Apache to
invisibly reroute from the server to the
target web service domain
Problems with JavaScript
• Most Java developers know enough
JavaScript to be dangerous.
– If you don’t know what you are doing, you
could cause memory leaks on the client
machine.
• Most JavaScript functionality can be
factored out and encapsulated
Ajax Without the J
It would be nice to encapsulate all of the
JavaScript within our components, so
we don’t have to write any JavaScript.
JavaServer Faces (JSF) provides a way to
accomplish this.