Cloud Computing Lecture #7
Introduction to Ajax
Jimmy Lin
The iSchool
University of Maryland
Wednesday, October 15, 2008
Material adopted from slides by Ian Graham: http://www.iangraham.org/talks/
The United
This work is licensed under a Creative Commons Attribution -Noncommercial-Share Alike 3.0 iSchool States
See http://creativecommons.org/licenses/by-nc-sa/3.0/us/ for details University of Maryland
What is Cloud Computing?
1. Web-scale problems
2. Large data centers
3. Different models of computing
4. Highly-interactive Web applications
The iSchool
University of Maryland
Interactive Web applications need AJAX
The iSchool
University of Maryland
Ajax
• Asynchronous JavaScript and XML: an approach
for building interactive Web applications
• Ajax refers to a number of technologies:
– XHTML/CSS for presentation
– XML for data exchange (or JSON – Java script object
notation)
– XMLHttpRequest object for asynchronous
communication
– JavaScript to tie everything together
From “old-school” Web applications to Ajax…
The iSchool
University of Maryland
“Old-School” Web Applications
browser sends server generates
user does something request to server Web page as a
response to the
request
1 3
browser server-side systems
2
HTTP request
Interface
Web backend
server database
HTTP response
4
5
data is returned
browser replaces view in response to
with data sent from server the request
The iSchool
University of Maryland
Characteristics
• User-driven: Things only happen when the user
does something (e.g., clicks on a link or button)
• Views defined by URLs: You can bookmark
something and come back to it; use the
forward/backward button
• Simple user interaction model: Not that many
things you can do in browser
• Synchronous Interaction: System responses are
synchronized with user-driven events
The iSchool
University of Maryland
Synchronous Interactions
browser user activity user activity user activity
1 5
2
Time
4
server-side
3
server processing server processing
1
HTTP request 2
browser server-side systems
4 HTTP response 3
5
The iSchool
University of Maryland
So what do you run on the server side?
L Linux
A Apache
M MySQL
P PHP/Python/Perl
The iSchool
University of Maryland
From “Old-School” to Ajax
Ajax intermediates between the interface and the server.
browser server-side systems
request
Interface
Ajax Web backend
“engine” server database
response
data
management
interaction management
The iSchool
University of Maryland
Inside the Browser
browser
HTTP request
Rendering Engine
Interface
HTML / CSS
data
other data HTTP response
(e.g. images)
The iSchool
University of Maryland
Enter JavaScript
browser
JavaScript Engine HTTP request
Rendering Engine
Interface
HTML / CSS JavaScript
data code
other data HTTP response
(e.g. images)
The iSchool
University of Maryland
Enter Ajax
HTTP request
browser
XMLHttpRequest
JavaScript Engine HTTP request
Rendering Engine
Interface
HTML / CSS XML JavaScript
data data code
other data HTTP response
(e.g. images)
The iSchool
University of Maryland
From Synchronous Interactions…
browser user activity user activity user activity
Time
server-side
server processing server processing
The iSchool
University of Maryland
To asynchronous Interactions
browser
user activity
client-side processing
Time
server-side
server processing server processing
The iSchool
University of Maryland
Components of an Ajax Interaction
1. A client event occurs (captured by JavaScript
event handlers)
2. An XMLHttpRequest object is created and
configured
3. An asynchronous request is made to the server
via the XMLHttpRequest object
4. Server processes request and returns data,
executing a callback in the XMLHttpRequest
object
5. The HTML DOM is updated based on response
data
The iSchool
University of Maryland
XMLHttpRequest Object
• The XMLHttpRequest object implements
an interface exposed by a scripting engine
– allows scripts to perform HTTP client
functionality
• submitting form data
• loading data from a server
– ECMAScript HTTP API (ECMA is standard scripting
languate – for of dialects JavaScript, ActionScript,
Jscript)
The iSchool
University of Maryland
XMLHttpRequest Object
• Named XMLHttpRequest for compatibility with the
Web, each component of name potentially misleading.
– First, object supports any text based format,
including XML.
– Second, used to make requests over both HTTP and
HTTPS (some implementations support protocols in
addition to HTTP and HTTPS, but that functionality
is not covered by this specification).
– Finally, supports "requests" in a broad sense of the
term as it pertains to HTTP; namely all activity
involved with HTTP requests or responses for the
defined HTTP methods.
The iSchool
University of Maryland
XMLHttpRequest Object
• XMLHttpRequest XHR is a DOM API used inside a web browser
scripting language to send an HTTP or HTTPS request directly to a
web server and load the server response data directly back into the
scripting language
• Once the data is within the scripting language, available as both
XML and plain
• XML data can be used to manipulate active document in browser
window without client loading a new web page document
• Plain data can be evaluated with scripting language (formatted as
JSON, evaluated to create object for use on DOM)
– JSON is JavaScipt Object Notation – lightweight data-interchange
format
The iSchool
University of Maryland
DOM
• Document Object Model: platform- and
language-independent way to represent XML
– Adopts a tree-based representation
– W3C standard, supported by modern browsers
• JavaScript uses DOM to manipulate content
– To process user events
– To process server responses (via XMLHttpRequest)
The iSchool
University of Maryland
Ajax: Things to watch out for!
• Hype
– Best thing since sliced bread?
• Application development/maintenance cost
– Brower incompatibilities
– Many different approaches and tools
– For many things, lack of agreed-on best practices
• Behavior is not ‘Web-like’
– Standard things often don’t work correctly (e.g., browser
‘back’ button, bookmarks)
– Usability issues for users with disabilities
• Security issues
– Whole new class of cross-site scripting (XSS) exploits
The iSchool
University of Maryland
Making your life easier…
• Dojo: really cool set of interface widgets
http://www.dojotoolkit.org/
• Direct Web Remoting: RPC library for calling
server-side Java from client-side JavaScript.
http://directwebremoting.org/
• jQuery: supports chaining of expressions for
more concise code.
http://jquery.com/
• Prototype: provides support for more traditional
object-oriented programming
http://www.prototypejs.org/
The iSchool
University of Maryland
Learning Ajax
• Bewildering options:
– PHP vs. Python vs. Perl vs. ASP vs. JSP …
– XML vs. JSON
– Countless toolkits, frameworks, libraries, etc.
• Amazing amount of information online:
– Numerous Web tutorials
– Learn by example
– Learn by building
The iSchool
University of Maryland
The next frontier?
Interactive Web applications
browser server-side systems
HTTP request
Interface
Apache MySQL
HTTP response
Hadoop cluster
MapReduce HDFS
Backend batch processing The iSchool
University of Maryland
• Ajax project
• Demo 2
• Demo 3
The iSchool
University of Maryland
Caching servers: 15 million requests per second, 95%
handled by memcache (15 TB of RAM)
Database layer: 800 eight-core Linux servers running
MySQL (40 TB user data)
The iSchool
University of Maryland
Source: Technology Review (July/August, 2008)