Transcript INNOV-2: Build a Better Web Interface Using AJAX

INNOV-2:
Build a Better Web
Interface Using AJAX
Chris Morgan
Pandora Software Systems
[email protected]
Session Goals




Define and Explain AJAX
Demonstrate the benefits of AJAX in web
interfaces
Provide basic tools for adding AJAX to
web interfaces
Provide examples of AJAX web interfaces
INNOV-2: Build a Better Web Interface Using AJAX
2
Advantages of Web Interfaces



Thin Client
Easy Deployment
OS Independence
INNOV-2: Build a Better Web Interface Using AJAX
3
Disadvantages of Web Interfaces
JavaScript / DHTML


User Interface is not as rich
Web pages don’t interact with databases
AJAX
INNOV-2: Build a Better Web Interface Using AJAX
4
What is AJAX?


AJAX (Asynchronous JavaScript And XML) is an
emerging methodology for adding interactivity
between a web page and a server-side process.
AJAX is not a new technology, it is a method of
using several existing technologies together,
including
–
–
–
–
–
HTML/XHTML
CSS
JavaScript
DOM
XML*
INNOV-2: Build a Better Web Interface Using AJAX
5
Typical Web Application Architecture
Browser Client
Web Server
Database
Server
User
Http
OpenEdge®
Interface
Server
Database
•WebSpeed®
•PHP
•perl interface
•Etc
INNOV-2: Build a Better Web Interface Using AJAX
6
Typical Web Application Architecture
Client
User Activity
User Interface
User Activity
Time
Processing
Processing
Server
INNOV-2: Build a Better Web Interface Using AJAX
7
AJAX Application Architecture
Browser Client
Web Server
Database
Server
User
AJAX
Http
OpenEdge®
Interface
Engine
Server
Database
INNOV-2: Build a Better Web Interface Using AJAX
8
AJAX Application Architecture
Client
User Interface
AJAX Engine
Time
Server
INNOV-2: Build a Better Web Interface Using AJAX
9
Demo
INNOV-2: Build a Better Web Interface Using AJAX
10
Anatomy of an AJAX Engine
1
2
3
INNOV-2: Build a Better Web Interface Using AJAX
11
JavaScript XMLHttpRequest Object
<script>
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
</script>
INNOV-2: Build a Better Web Interface Using AJAX
12
XMLHttpRequest Browser Support





Firefox
Safari
Netscape
Opera
Mozilla
INNOV-2: Build a Better Web Interface Using AJAX
13
What about Microsoft?
Microsoft
Internet Explorer
still has a 85%
market share*
MSIE
Firefox
Safari
Netscape
Opera
Mozilla
*As of Feb 2006
INNOV-2: Build a Better Web Interface Using AJAX
14
Microsoft’s XMLHTTP ActiveX Object
<script>
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
</script>
INNOV-2: Build a Better Web Interface Using AJAX
15
Cross-Browser http request script
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
INNOV-2: Build a Better Web Interface Using AJAX
16
A simple processReqChange script
function processReqChange() {
// only if req shows complete
if (req.readyState == 4) {
// only if OK
if (req.status == 200 || req.status == 0) {
xmlResponse =
req.responseXML.documentElement;
if (xmlResponse.tagName == 'something')
{runSomething(xmlResponse);}
} else {
alert('There was a problem retrieving' +
'the XML data: ' +
req.statusText);
}
}
} // processReqChange()
INNOV-2: Build a Better Web Interface Using AJAX
17
Putting it all Together:
A Threadsafe AJAX Engine
function ajaxRequest(url) {
function processReqChange() {…}
var req = null;
// prevent browser caching...
url += ((url.indexOf('?') > -1) ? '&' : '?') +
'ajaxid=' + new Date().valueOf();
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
…
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
…
}
} // ajaxRequest( url )
INNOV-2: Build a Better Web Interface Using AJAX
18
Demo
INNOV-2: Build a Better Web Interface Using AJAX
19
AJAX Examples on the Internet



Google’s gmail interface
Google Suggest
Yahoo! maps
INNOV-2: Build a Better Web Interface Using AJAX
20
Pros and Cons of AJAX Interfaces





Adds Interactivity
Portability
Easy to implement
Many resources
available
Buzzword compliance



INNOV-2: Build a Better Web Interface Using AJAX
Increased server load
Need some JavaScript
knowledge
Requires JavaScript
or ActiveX
21
Summary



AJAX is an emerging methodology for
adding interactivity between web pages
and databases
AJAX is not difficult to implement!
AJAX Enabled web interfaces are the
future of web applications
INNOV-2: Build a Better Web Interface Using AJAX
22
More Resources

Exchange



INNOV-16: Rich User Interface for the Web????
AJAX to the Rescue (Ken Wilner)
Wednesday, 1:15pm
Exploring User Interfaces BOF
Tuesday, 2:15pm
Print


Manning Ajax In Action
O’Reilly JavaScript The Definitive Guide
INNOV-2: Build a Better Web Interface Using AJAX
23
More Resources

Internet






http://www.adaptivepath.com/publications/essa
ys/archives/000385.php
http://www.xml.com/
http://www.ajaxian.com/
http://script.aculo.us/
http://openrico.org/
http://www.openarchitect.com/pjx/pjax.html
INNOV-2: Build a Better Web Interface Using AJAX
24
Questions?
INNOV-2: Build a Better Web Interface Using AJAX
25
Thank you !
http://www.pandora-sys.com/innov-2/
INNOV-2: Build a Better Web Interface Using AJAX
26