AJAX the Great

scaredbaconΛογισμικό & κατασκευή λογ/κού

4 Ιουλ 2012 (πριν από 4 χρόνια και 5 μήνες)

268 εμφανίσεις

11.2.2007
Fran Fabrizio, UAB CIS
AJAX the Great
The Origins and Development
of the Dynamic Web
Introduction
What is the Dynamic Web?
Dynamic Web Defined
A web experience that provides for user
interaction with the web page and the
dynamic modification of the web page.
Types of Dynamic Web

Client-Side: Placing dynamic behavior
within the presentation of the page,
such as responses to mouse clicks or
text entry

Server-Side: Changing the information
being served as a result of parameters
that the user has provided
Goals of the DW

Lightweight Platform for Application Delivery

Mechanisms to Receive User Input

Ability to Interact with Remote Processes

Robust Presentation Layer

Programmatic Control of Interface

Asynchronous Data Transfer
In other words...
We want our web apps to
behave like our desktop apps.
How We Got Here
A Timeline of the Dynamic Web
1990: The Web is Born

Tim Berners-Lee
creates two
programs: a web
server and browser,
and launches
http://
info.cern.ch
/ at
CERN

December 1990: The
first client-server
web request over the
Internet

Berners-Lee was looking for a way to
make it easier for physicists to share
data without any common computers
or tools

He used a NeXT computer to make the
world’s first web server

His browser only ran on NeXT

Others created web
browsers that
would run on other
operating systems
(ViolaWWW
pictured here)

Text mode browsers
were popular (Lynx
pictured here)
1991-1992: Early Browsers

Early browser interfaces were clumsy.
Images opened in a separate window,
for example.

Early browsers only ran on certain
platforms (notably missing were
Windows and Mac browsers)

Multimedia support was lacking
1993: MOSAIC

1st popular graphical
web browser

Available for UNIX,
Windows, MAC

Rich multimedia
support
Date: Sat, 23 Jan 93 07:21:17 -0800
From: ma...@ncsa.uiuc.edu (Marc Andreessen)
By the power vested in me by nobody in particular, alpha/beta version
0.5 of NCSA's Motif-based networked information systems and World
Wide Web browser, X Mosaic, is hereby released:
file://ftp.ncsa.uiuc.edu/Web/xmosaic/xmosaic-0.5.tar.Z

Revolutionized information sharing and
the World Wide Web

Mosaic was licensed by Microsoft,
modified, and renamed Internet Explorer

Proliferation of online data produced
demand for a new killer app:
search

How do you provide search with only
static web pages?

The Common Gateway Interface: a
standard API for a web server to
interface with external applications

The FORM tag allowed users to submit
information to the web server

The combination of the two allowed
users to pass parameters to external
programs on the remote end
1993: CGI and FORM tag
Web
Server
Web
Browser
Search
Program
Internet
The CGI Model
CGI
STDIN
STDOUT
Web Server Machine
QUERY
PAGE

Server puts user
input in environment
variables

Server spawns
external process and
communicates via
CGI

Server marks up
results and returns
page

Stars of the 1st
Generation Web
Search Engines: WebCrawler (1994),
Lycos (1994), Yahoo (1995), AltaVista
(1995)
Early E-Commerce: Amazon (1995),
EBay (1995), Dell (1995)

Sandbox a Java VM
within browser

Allowed
rich client

functionality
1995: Java Applets

Cross-Browser Issues

JVM Compatibility Issues

Programming was difficult

Enter....

Netscape wanted to make Java more
accessible to non-programmers

Users decided there were better uses

The
Killer App
for JavaScript 1.0 was....
1996: JavaScript 1.0
function validate() {
if (document.forms[0].[“name”].value.length==0)
alert(“Please enter your name.”);
return false;
} else { return true; }
}
}

JavaScript enabled intra-page dynamic
behaviors for the first time

First major building block for A
J
AX

JavaScript 1.1 (Netscape 3) later in 1996

Opened access to more document
elements, particularly images

The
Killer App
for JavaScript 1.1 was...
1996:
JavaScript 1.1
function changeSrc() {
document.getElementById("myImage").src="img2.gif"
}

Microsoft released JScript, a JavaScript
clone, in the summer of 1996.

Differences between the two led to first
round of cross-browser workarounds

Meanwhile,
Microsoft becomes
1st browser to
support CSS

CSS describes the
presentation of the
content (whereas
HTML describes the
content)
1996: CSS
text-align: left;
}
LI
{
font-family : Verdana, Arial, Helvetica;
font-size : 14px;
font-weight: none;
text-decoration: none;
color: brown;
text-align: left;
}
.TableText
{
font-family : Verdana, Arial, Helvetica;
font-size : 12px;

CSS provided much better layout
control than HTML

Fonts, colors, margins, spacing,
absolute positioning and visibility of
elements could all be specified by CSS
1997: The Year of DHTML

DHTML arrives
with 4.0 browsers

DHTML = HTML +
JavaScript + CSS

For the first time,
web developers can
alter pages after
they are sent to the
browser

Dynamic HTML works by using
JavaScript
to modify the
style
properties
of
HTML
elements in the
browser
in response
to user events

Like JavaScript/JScript and CSS before
it, DHTML had different
implementations in the two major
browsers

Asynchronous-Like Effects Possible
for First Time

DHTML would update an invisible
frame’s src tag, which would load new
content from server periodically.
DHTML would then be used to update
data on the main window.

Second major component of
A
JAX
1997: The Rise of the DOM

In order to
manipulate HTML
elements, there
needed to be an API

Document Object
Model provides
access to page
elements and their
properties

The DOM had been around since the
introduction of JavaScript in Netscape
2.0

The Netscape and IE DOMs (the Level 0
DOMs) are incompatible - DHTML has
severe cross-browser issues

In 1997, the W3C begins work to
standardize the DOM
1996-97 The Big Picture

The Browser Wars had begun.

The incompatible implementations placed great
pressure on web developers.

The new technologies to enable the dynamic
web were spawning a new breed of web site.

The .com boom was underway.

Stars of the 2nd
Generation Web
Search Engines: Google (1998)
E-Commerce: Expedia (1996),
Travelocity (1996)
Other: Hotmail (1996), Mapquest
(1996)
1997-99: Preprocessors

This time period saw the rise of the
server-side preprocessor and
templating systems

ASP (1996), mod_perl (1996), Java
Servlets (1997), PHP (1998), JSP (1999)

To overcome programming limitations
in the browser, logic put on server-side
code, templates render to HTML

In some sense, these technologies
represented a “white flag” for client-
side dynamic web

Fed up with the limitations of the
client-side logic, server-side full-fledged
programming languages were being
used to generate static HTML
1998: MSRS

MS Remote Scripting embeds Java
Applet in browser that makes
asynchronous
data requests to server

Doesn’t gain much traction due to
applet requirement, but this is the
genesis of remote scripting
2000: XMLHTTP and JSRS

Microsoft replaces MSRS with
XMLHTTP, an ActiveX control which
supports
asynchronous HTTP requests
back to the server to retrieve
structured data.

JavaScript Remote Scripting uses
DHTML elements to do the same

Suddenly we have multiple
mechanisms for making calls back to
the server for structured (e.g. XML)
data

JSRS in particular does this in a
lightweight fashion, relying only on
HTTP, JavaScript and DHTML

The stage is now fully set for AJA
X
.
Friday, March 10, 2000
NASDAQ peaks at 5,132.32
Monday, March 13, 2000
*POP*
The selloff begins
By April 4, 2001 the NASDAQ
was at 1,638.80

Microsoft wins the browser wars

XML rises to prominence
“Dark Age” Developments
2002: XMLHTTPRequest

Mozilla finally releases 1.0, with
support for a JavaScript native object
called XMLHttpRequest

Meanwhile, IE still supports XMLHTTP

Functionally equivalent, but
XMLHTTP implemented as an ActiveX
object instead of a JavaScript native
object.
2003: “Inner-Browsing”

Netscape publishes a paper on a
concept called “inner-browsing” which
uses XMLHTTPRequest to
asynchronously receive XML-formatted
data from a server after the initial page
load.
2004: The Big Picture
“Web 2.0”

Tim O’Reilly coins the phrase “Web 2.0” to
describe the new boom on the Web
The Web as Software Delivery Platform
User Participation / Interaction / Networking
Syndication and Mashups
Rich User Interfaces

Stars of the 3rd
Generation Web
Amazon (1995)
Wikipedia (2001)
BitTorrent (2001)
Myspace (2003)
del.icio.us (2003)
Facebook (2004)
Flickr (2004)
GMail (2004)
Digg (2004)
Google Maps
(2005)
Zimbra (2005)
Youtube (2005)
Google Docs
(2006)
2005: AJAX

By this time, many “AJAX-y” sites
existed

JJG gave the movement a name, and
that gave the movement a lot of
momentum
AJAX Fundamentals
The Model
The AJAX Model
Web
Browser
Web
Server
First Request
HTML + JS + CSS
AJAX
ENGINE
Subsequent Data Requests
XML, JSON, Plain Text
The AJAX Engine
XMLHTTPRequest
Callback
readyState
responseText
1
5
4
3
2
6
1.
Browser makes request
2.
Register callback function
3.
Send request to server
4.
Receive request from
server
5.
Callback function detects
data ready and retrieves
data
6.
DOM is altered with new
data
Common AJAX Techniques

Form Validation

Dynamically Loading List Boxes

Autorefreshing the Page

Progress Bar

Tooltips

Autocomplete
Sample AJAX Websites
A Quick Tour
Sample Sites

Google Suggest

Google Maps

Netflix

Kayak

Zimbra

UAB CIS HSPC
The End

My email is
fran@cis.uab.edu
if you
have any followup questions

I will be posting a reference list on my
web site for more AJAX info. It will be
at
http://www.cis.uab.edu/fran/
Thank You!