ajax the great: the origin and development of the dynamic web (2007)
TRANSCRIPT
![Page 1: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/1.jpg)
11.2.2007Fran Fabrizio, UAB CIS
AJAX the GreatThe Origins and Development
of the Dynamic Web
![Page 2: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/2.jpg)
IntroductionWhat is the Dynamic Web?
![Page 3: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/3.jpg)
Dynamic Web Defined
A web experience that provides for user interaction with the web page and the dynamic modification of the web page.
![Page 4: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/4.jpg)
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
![Page 5: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/5.jpg)
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
![Page 6: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/6.jpg)
In other words...
We want our web apps to behave like our desktop apps.
![Page 7: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/7.jpg)
How We Got HereA Timeline of the Dynamic Web
![Page 8: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/8.jpg)
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
![Page 9: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/9.jpg)
• 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
![Page 10: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/10.jpg)
• 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
![Page 11: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/11.jpg)
• 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
![Page 12: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/12.jpg)
1993: MOSAIC• 1st popular graphical
web browser
• Available for UNIX, Windows, MAC
• Rich multimedia support
Date: Sat, 23 Jan 93 07:21:17 -0800From: [email protected] (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
![Page 13: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/13.jpg)
• 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?
![Page 14: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/14.jpg)
• 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
![Page 15: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/15.jpg)
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
![Page 16: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/16.jpg)
Stars of the 1st Generation WebSearch Engines: WebCrawler (1994), Lycos (1994), Yahoo (1995), AltaVista (1995)
Early E-Commerce: Amazon (1995), EBay (1995), Dell (1995)
![Page 17: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/17.jpg)
• Sandbox a Java VM within browser
• Allowed rich client functionality
1995: Java Applets
![Page 18: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/18.jpg)
• Cross-Browser Issues
• JVM Compatibility Issues
• Programming was difficult
• Enter....
![Page 19: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/19.jpg)
• 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; }}}
![Page 20: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/20.jpg)
• JavaScript enabled intra-page dynamic behaviors for the first time
• First major building block for AJAX
![Page 21: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/21.jpg)
• 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"}
![Page 22: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/22.jpg)
• Microsoft released JScript, a JavaScript clone, in the summer of 1996.
• Differences between the two led to first round of cross-browser workarounds
![Page 23: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/23.jpg)
• 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;
![Page 24: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/24.jpg)
• CSS provided much better layout control than HTML
• Fonts, colors, margins, spacing, absolute positioning and visibility of elements could all be specified by CSS
![Page 25: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/25.jpg)
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
![Page 26: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/26.jpg)
• 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
![Page 27: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/27.jpg)
• 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
![Page 28: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/28.jpg)
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
![Page 29: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/29.jpg)
• 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
![Page 30: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/30.jpg)
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.
![Page 31: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/31.jpg)
Stars of the 2nd Generation WebSearch Engines: Google (1998)
E-Commerce: Expedia (1996), Travelocity (1996)
Other: Hotmail (1996), Mapquest (1996)
![Page 32: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/32.jpg)
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
![Page 33: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/33.jpg)
• 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
![Page 34: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/34.jpg)
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
![Page 35: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/35.jpg)
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
![Page 36: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/36.jpg)
• 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.
![Page 37: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/37.jpg)
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
![Page 38: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/38.jpg)
• Microsoft wins the browser wars
• XML rises to prominence
“Dark Age” Developments
![Page 39: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/39.jpg)
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.
![Page 40: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/40.jpg)
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.
![Page 41: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/41.jpg)
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
![Page 42: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/42.jpg)
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)
![Page 43: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/43.jpg)
2005: AJAX
![Page 44: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/44.jpg)
• By this time, many “AJAX-y” sites existed
• JJG gave the movement a name, and that gave the movement a lot of momentum
![Page 45: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/45.jpg)
AJAX FundamentalsThe Model
![Page 46: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/46.jpg)
The AJAX Model
Web Browser
Web Server
First Request
HTML + JS + CSS
AJAXENGINE
Subsequent Data Requests
XML, JSON, Plain Text
![Page 47: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/47.jpg)
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
![Page 48: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/48.jpg)
Common AJAX Techniques• Form Validation
• Dynamically Loading List Boxes
• Autorefreshing the Page
• Progress Bar
• Tooltips
• Autocomplete
![Page 49: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/49.jpg)
Sample AJAX WebsitesA Quick Tour
![Page 50: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/50.jpg)
Sample Sites
• Google Suggest
• Google Maps
• Netflix
• Kayak
• Zimbra
• UAB CIS HSPC
![Page 51: AJAX the Great: The Origin and Development of the Dynamic Web (2007)](https://reader033.vdocuments.us/reader033/viewer/2022042817/55a8ba211a28aba3418b4632/html5/thumbnails/51.jpg)
The End • My email is [email protected] 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!