11.2.2007Fran Fabrizio, UAB CIS

AJAX the GreatThe Origins and Development

of the Dynamic Web

IntroductionWhat 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 HereA 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 -0800From: ma...@ncsa.uiuc.edu (Marc Andreessen)

By the power vested in me by nobody in particular, alpha/beta version0.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

WebServer

Web Browser

Search Program

Internet

The CGI Model

CGISTDIN

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 WebSearch 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 AJAX

• 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 AJAX

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 WebSearch 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 AJAX.

Friday, March 10, 2000NASDAQ peaks at 5,132.32

Monday, March 13, 2000*POP*

The selloff begins

By April 4, 2001 the NASDAQwas 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

Key Characteristics of Web 2.0The Web as Software Delivery Platform

User Participation / Interaction / Networking

Syndication and Mashups

Rich User Interfaces

Stars of the 3rd Generation WebAmazon (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 FundamentalsThe Model

The AJAX Model

Web Browser

Web Server

First Request

HTML + JS + CSS

AJAXENGINE

Subsequent Data Requests

XML, JSON, Plain Text

The AJAX Engine

XMLHTTPRequest

Callback

readyState responseText

1

5

4

32

61. Browser makes request2. Register callback function 3. Send request to server4. Receive request from

server5. 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 WebsitesA 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!