Ajax: An Introduction and Issues for Web Developers

1
Ajax An Introduction and Issues for Web
Developers

• Rance Harmon

2
Talk Will Cover

• What is Ajax and why use it
• Examples from the web
• Technologies involved in Ajax
• Code samples for simple Ajax app
• Survey results regarding development platforms,
  tools, and challenges
• MVC design pattern
• Eclipse IDE tools

3
What is Ajax?

• Asynchronous JavaScript And XML
• A technique for creating interactive web
  applications
• Not a language or specific technology
• AJAX is a term that refers to a way of using a
  group of technologies together

4
Why Use Ajax

• Enhance user experience
• Increases usability, speed, interactivity
• Makes it possible to update portions of a web
  page without reloading the entire page
• Asynchronoususer does not have to wait for
  server to respond

5
Ajax Example Google Suggest

• http//labs.google.com/suggest/
• Uses data about the overall popularity of various
  searches to help rankings
• Does not base suggestions on an individuals
  personal search history

Source http//labs.google.com/suggestfaq.htm l
6
Why Use Ajax?

• Ajax applications usable on many different
• Operating systems
• Browsers
• Computer architectures
• The web standards that Ajax uses (XHTML, CSS,
  JavaScript, XML) are well defined, and supported
  by all major browsers.

7
AJAX job trends
Sources http//courses.coreservlets.com/Course-Ma
terials/pdf/ajax/Ajax-Basics-1.pdf
http//www.indeed.com
8
How Does Ajax Work

• JavaScript communicates directly with the server,
  using the XMLHttpRequest object (or
  ActiveXObject, IE 5 6)
• Data retrieved from the server can be in a
  variety of formats XML, HTML, text files

9
HTTP Requests Traditional Model

• Traditional JavaScript
• Make html form
• use GET or POST to communicate with the server
• User clicks Submit button to send or receive
  information
• User waits
• for the server to respond
• for a new page to load with the results

Source http//www.w3schools.com/ajax/ajax_httpreq
uest.asp
10
Traditional Model
Source http//www.openajax.org/member/wiki/Techn
ical_Overview_Whitepaper
11
Source http//www.adaptivepath.com/ideas/essays/a
rchives/000385.php
12
Ajax Examples

• http//instantdomainsearch.com/
• http//www.netflix.com/Top100
• https//us.etrade.com/e/t/

Source Eric Holter. AJAX Website Examples Web
Smart Newsletter Originally published November
2005 - Updated July 2006. http//www.newfangled.c
om/ajax_website_examples
13
Map Sites

• http//maps.google.com/
• http//www.topozone.com/

14
HTTP Requests Using Ajax

• JavaScript communicates directly with the server,
  via the JavaScript XMLHttpRequest object (or
  ActiveXObject, IE 5 6)
• With XMLHttpRequest, the web page can make a
  request/get a response from web server without
  reloading
• The user can remain on the same page, not
  noticing that scripts request pages or send data
  to a server in the background

Source http//www.w3schools.com/ajax/ajax_httpreq
uest.asp
15
XMLHttpRequest

• API that JavaScript and other web browser
  scripting languages use to transfer XML and other
  data between a web pages client and server side
• Data returned from XMLHttpRequest calls is often
  provided by back-end databases.

http//en.wikipedia.org/wiki/XMLHttpReques t
16
XMLHttpRequest Object History

• Microsoft Internet Explorer version 5
• ActiveX object
• Mozilla 1.0 added it as a native object with a
  compatible API.
• Apple added it to Safari in version 1.2

Source http//www.onlamp.com/pub/a/onlamp/2005/05
/19/xmlhttprequest.html
17
Get a Request Object with JavaScript

• function getRequestObject()
• // Version for IE 5 and 6
• if (window.ActiveXObject)
• return(new ActiveXObject("Microsoft.XMLHTTP"))
• // Version for Firefox, Netscape 5, Opera,
  Safari, Mozilla, and IE 7
• else if (window.XMLHttpRequest)
• return(new XMLHttpRequest())
• //Fails on older and nonstandard browsers
• else
• return(null)

Source http//courses.coreservlets.com
18
What Technologies Does Ajax Use?

• a combination of
• XHTML (or HTML)
• Cascading Style Sheets (CSS)
• Document Object Model manipulated using
  JavaScript to display and interact dynamically
  with the information presented
• The XMLHttpRequest object to exchange data
  asynchronously with the web server

19
HTML

• Use XHTML so you can manipulate DOM
• Load the JavaScript file
• ltscript src"relative-url-of-JavaScript-file
  type"text/javascript"gtlt/scriptgt
• Designate control to initiate request
• ltformgtltinput type"button" value"button label
  onclicksendRequest()"/gtlt/formgt

http//courses.coreservlets.com
20
Cascading Style Sheets (CSS)

• manipulate how content appears on web page

21
JavaScript

• Define an object for sending HTTP requests
• Initiate request
• get request object
• designate a response handler function
• initiate a GET or POST request
• send data
• Handle response
• wait for readyState of 4 and HTTP status of 200
• extract return text with responseText or
  responseXML
• do something with result
• E.g., use innerHTML to insert result into
  designated element

Source http//courses.coreservlets.com
22
JavaScript Define a Request Object

• function getRequestObject()
• // Version for IE 5 and 6
• if (window.ActiveXObject)
• return(new ActiveXObject("Microsoft.XMLHTTP"))
• // Version for Firefox, Netscape 5, Opera,
  Safari, Mozilla, and IE 7
• else if (window.XMLHttpRequest)
• return(new XMLHttpRequest())
• //Fails on older and nonstandard browsers
• else
• return(null)

Source http//courses.coreservlets.com
23
JavaScipt Initiate Request and Handle Response

• function sendRequest(resourceLocation)
• var request getRequestObject()
• //define an anonymous function to avoid race
  condition
• request.onreadystatechange function()
• handleResponse(request)
• request.open("GET", resourceLocation, true)
• request.send(null)
• function handleResponse(request)
• if ((request.readyState 4) (request.status
  200))
• //define what to do when server responds
• //request.responseXML is what the server
  returns
• alert(request.responseXML)

Adapted from http//courses.coreservlets.com
24
Simple Ajax Code Example
25
AJAX Potential Drawbacks

• "Back" function of browser might not work as
  expected
• Bookmarking a particular state of the application
  
• Navigation may be difficult
• User might not notice when small parts of the
  page change
• Search engine tracking
• If user disables JavaScript
• Many web analytics programs may not track Ajax
  actions as they do page reloads

Source http//en.wikipedia.org/wiki/AJAX
26
2008 Web Design and Development Tools and
Technologies Survey

• Conducted by Nitobi
• Company that makes enterprise Ajax components
• http//www.nitobi.com/survey/

http//www.nitobi.com/survey/
27
2007 Ajaxian.com Reader Survey

• Results 826 Responses
• Multiple responses allowed
• Source
• http//ajaxian.com/wp-content/images/AjaxianReader
  SurveyResults_2007.pdf

28
Languages/platforms You Use (percent)
Source http//ajaxian.com/wp-content/images/Ajaxi
anReaderSurveyResults_2007.pdf
29
Frameworks That You Have Used or Considered Using
(percent)

Source http//ajaxian.com/wp-content/images/Ajaxi
anReaderSurveyResults_2007.pdf
30
Ajax Toolkits and Libraries

• What is interesting about the Ajax market is
  that its more diversified in 2007 than it was in
  2005 - the number of toolkits keep growing and
  jostling position in terms of usage.
• 2005 36
• 2006 170
• 2007 241
• What is astonishing is the nearly complete lack
  of commercial Ajax frameworks.
• -- Richard Monson-Haefel and the Burton Group
  2007 Ajaxian.com survey

Source http//ajaxian.com/by/topic/survey/
31
Biggest Ajax Development Concerns (percent)
Source http//ajaxian.com/wp-content/images/Ajaxi
anReaderSurveyResults_2007.pdf
32
Web Application Definition

• an application running on a server a user
  accesses through a thin, general-purpose client1
• Clients include
• web browser on a PC or workstation
• wireless PDAs, cell phones, etc.

1Bergsten, Hans. JavaServer Pages 3rd edition.
Cambridge OReilly. page 11.
33
Web Application Design Issues

• Webapps contain different types of code
• data access code
• business logic code
• presentation and user interaction code
• Maintenance issues when code types are mixed
• interdependencies between components result in
  ripple effects (when a change is made to part of
  code have to changes in other parts of code)
• Coupling classes are difficult or impossible to
  reuse because they depend on so many other
  classes.

Source http//java.sun.com/blueprints/patterns/MV
C.html
34
Model-View-Controller Design Pattern

• enforces the separation of presentation logic and
  business logic in an application
• http//pclc.pace.edu/bergin/mvc/temperature.html

35
MVC Components

• Model gateway to enterprise data and the
  business rules that govern how data is accessed
  and updated
• View presentation layer that renders the
  content of a model and provides user interaction
  tools
• Controller - bridge between the Model and the
  View, interpreting requests from the user and
  commanding the Model and/or View to change as
  appropriate

Sources http//java.sun.com/blueprints/patterns/M
VC-detailed.html http//msdn2.microsoft
.com/en-us/library/aa478961.aspx
36
Webapp with MVC architecture
http//www.ibm.com/developerworks/websphere/librar
y/bestpractices/enterprise_javabean.html
37
The Eclipse Web Tools Platform (WTP)

• Extends the Eclipse platform with tools for
  developing Web and Java EE applications.
• Includes source and graphical editors for a
  variety of languages,
• wizards and built-in applications to simplify
  development,
• tools and APIs to support deploying, running, and
  testing apps.
• built in CVS support

Source http//www.eclipse.org/webtools/
38
AJAX Toolkit Framework (ATF)

• Currently developmental
• Goal build extensible frameworks containing
  features for developing, deploying, debugging and
  testing AJAX applications.
• Tools will include
• enhanced JavaScript editing features such as
  edit-time syntax checking
• an embedded Mozilla web browser
• an embedded DOM browser
• an embedded JavaScript debugger
• additional AJAX development tooling

Source http//www.eclipse.org/atf/
39
ATF System Architecture
Source http//www.eclipse.org/atf/
40
ATF and WTP

• ATF will use the WTP Server facilities to manage
  and configure Web Servers.
• The integration between the AJAX Toolkit
  Framework and WTP will provide AJAX developers
  with a comprehensive solution for Web
  development.

Source http//www.eclipse.org/atf/