Introduction to Ajax with Bob Cozzi What is AJAX? Asynchronous JavaScript and XML A J a X Asynchronous data retrieval using the XMLHttpRequest object from JavaScript Data is retrieved from the server as XML, HTML, or JavaScript or plain text. Dynamically updating the existing web page Using JavaScript to bring everything together AJAX is a collection of Techniques Techniques that leverage existing/available technology
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Introduction to Ajax
with Bob Cozzi
What is AJAX?
Asynchronous JavaScript and XMLA J a X
Asynchronous data retrieval using the XMLHttpRequest object from JavaScript
Data is retrieved from the server as XML, HTML, or JavaScript or plain text.
Dynamically updating the existing web page
Using JavaScript to bring everything together
AJAX is a collection of TechniquesTechniques that leverage existing/available technology
What AJAX isn't
AJAX is NOT a programming language
AJAX is not an add-on or plug-in
AJAX is not based on JAVA
AJAX is not owned by any Vendor
You can't but some AJAX
Ajax History
AJAX techniques were first used as early as 1998Sometimes formerly called Dynamic HTMLAlthough some people put iFrame back to 1995
February 2005, Jesse James Garrett of Adaptive PathHis now infamous article where he coined the term AJAX
AJAX technology came into vogue as a result ofGarrett's articleGoogle's use of AJAX in everything they do and their huge success with itBroadband bandwidth usage has increased beyond dial-up
Without Broadband, AJAX would be possible, but not practical nor pervasiveWithout AJAX, Google could not have been as successful
You'd never see Google Maps if only dial-up speeds existed
Traditional Web Applications
A traditional web application works like this: A web page is displayedThe user enters some data
Whether this means clicking here and there or physically typing in the data—it's all the same
The user presses Enter or clicks the SUBMIT buttonThe server does some processing
Validating the user's dataSearching the databaseCalling legacy programsGenerating an HTML page
The browser is routed to a new HTML pageThe user continues their experience
Web page 1
Server Req 1
Server Req 2
Web page 2
Web page 3
Traditional Web App Flow
…
Server Req
Page 2
Time Between Host Server Calls and New Pages
…
Server Req
Page 1 Page 3
Wait
Server Request
AJAX Eliminates Page Lag
AJAX applications are more like 5250 applicationsA single screen or "page" is used and updated for user interaction
Asynchronous calls mean users continue with what they are doing
AJAX requests can leverage RPG routinesThese routines are often small because they are responding to a single or simple request
Give me a list of customers that being with the letter "G"Give me the price for this item number
Handling multiple/different AJAX requests in the same RPG program is common and acceptable
Calling a back-end routine, or a legacy app is also okay.AJAX requests are Asynchronous
Your end-users aren't kept waiting.But watch out "reverb"
Why is AJAX Popular?
Zero FootprintNothing to buy or installIt is completely free and available
No plug-ins requiredNo ActiveX controlsNo Java AppletsNo "waiting for plug-in to download" annoyancesNo "right-click to allow this plug-in to be installed" messages
Provides the capabilities formerly available only throughActiveX controlsJava Applets or plug-insServer-side Scripting, such as JSPs
Why AJAX Now?
The Browser Wars are finally over
The Statuesque of PCs has changedCPUs in most PCs are fast enough
Memory in most PCs is often vast enough
Java has failed to deliver on its promises
JavaScript (i.e., "scripting") must be enabledJavaScript is trusted by most browser users
Bandwidth has become fast enough
AJAX is Available
Ajax-capable browsers everywhere
XMLHttpRequest object is supported in all of themIE version 7 directly supports XMLHttpRequest
IE version 6 support is thorugh MS-proprietary interfaceBut that interface is 100% compatible with XMLHttpRequest
Nothing to buy or install
As a developer, you don't have to install anything on the PC to make your AJAX-based code work
Everything resides on your host system
AJAX FrameWorks
Commercial (for sale) and Free JavaScript librariesThese libraries are being called "AJAX FrameWorks"Most are no charge to use or deployVendors make their money by selling add-ons
IDE (development environments/plug-ins)Really good addition function
Adobe's Flex – Uses "Flash", but is very cool. Free with chargeable Eclipse plug-in
TIBCO – Okay free/with chargeable pieces DOJO – Cool, lots of "widgets" freeYahoo's AJAX UI Framework (aka "YUI") – Cool and freeMicrosoft's Atlas – Not as interesting as DOJO or YUINone of these require you to buy anything to use them
AJAX FrameWorks Location
Adobe's Flexhttp://www.adobe.com/devnet/flex/Library is freeOptional, chargeable Eclipse plug-in
Yahoo's AJAX UI Framework (aka "YUI") http://developer.yahoo.com/yui/index.htmlCompact, free, but a bit different (in beta today)
TIBCO GI (General Interface)http://www.tibco.com/software/ria/gi_resource_center.jspProbably will have limited appeal
DOJO – Cool, lots of "widgets" freehttp://dojotoolkit.org/Some unusual interfaces
Ajax Challenges for Programmers
Requires some new knowledgeYou've got to learn JavaScript or VBScript
AJAX Skill PriorityScale is 1 (least valuable) to 10 (most valuable)
CGI Programming Skill(6)Need to write CGI programs that handle AJAX requests
XML Skill(9) – Depending on your Ajax designNeed to format data for return to the BrowserCould use plain text instead of XML
If plain text is used, XML skill requirement drops to the 2 or 3 range
JavaScript Skill(8)Until a few "build it blindfolded" tools come out, you will need to know JavaScript well.The good news is, it is a easy or as complex as you make it
Ajax Challenges for Users
Web Browser applications are being implementedYahoo, Google, MS, all are moving to AJAX in a HUGE way
Web Browser is normally a benign toolClick, take me here.Click, take me there.
Without AJAX you have a 3, 5, 5 scenario to get the data you wantType, click, thinkclick, thinkType, click, thinkclick, thinkType, click, thinkGet Results
With AJAX you have a 3, 1 scenario to get the information you needType, type, type, Enter (or click)Get results
AJAX with RPG IV
Your User loads your web page
Some data is typed in
You fire off a CGI requestUsing XMLHttpRequest
Your RPG IV program is called
You create some XML text
You send it back to the browser via stdout
Your AJAX routines receive that data
Your end-user's web page is updated
Generated XML Response
Content-type: text/xmlCache-Control: no-cache
<?xml version="1.0" ?><root><USER_MSG>User ID "COZZI" accepted.</USER_MSG><EMAIL_MSG>email address is invalid</EMAIL_MSG><PWD_MSG>Password must be 6 or more characters</PWD_MSG><PWD2_MSG>Confirming password does not match.</PWD2_MSG></root>
These two statements get absorbed by the browser. They are not
available to the AJAX/JavaScript.
The data needs to be identified as an XML
document, including the version number.
The first node in the XML is detected; it along with the matching closing tag
identify the start and end of the XML.
XML data needs to be escaped. This means special characters, such as < & " ' > are converted into symbolic values.
The rest of the XML response goes here. This is the real data you're sending
back to the browser.
The Content-Type header should be
"text/xml"All XML needs a root. It can
be named anything you want. It is often ignored by
the JavaScript.
These XML tags identify the element names that contain the data your returning to the
JavaScript in the browser.
Do not Cache the XML otherwise your user may
see the same data over and over again.
What is XMLHttpRequest?
Foundation behind AJAXA JavaScript classCapable of calling the server
Issues standard HTTP requests.
Captures the server's responseRetrieves HTTP responses from the web server.
Operates Asynchronously or SynchronouslyWhen run asynchronously, tasks run in the background of the browser.
Simple AJAX Scenario
User types in an Account numberAn AJAX request is triggered
Verify the account numberRetrieves the Account Holder's name
If valid account numberAccount holder's name is displayed near the input
If invalid account numberError message is displayed near the input
HTML for Account Input
<input> tag identifies the input field into which the user types the account numberonblur="Validate()" calls the JavaScript function
When the input field "looses focus" e.g., tab, mouse click outside the field.
<span> is a special HTML tagAllows modification of HTML at runtime via JavaScriptAccess to <span> tags is accomplish via the ID name.This is where the new text or account info is inserted
Validate() called automatically when OnBlur is triggeredThe data from the ACCT input field is retrievedA url-encoded string is createdThe generic AJAX routine is called
function Validate(){
var acct = document.MYFORM.ACCT.value;var url = "/cgi-bin/CHKACCT?ACCT=" + encodeMe(acct);
GoAjax(url,myCallback);}
A Generic GoAjax Functionvar req;
function GoAjax(url, callBack){
if (window.XMLHttpRequest) { req = new XMLHttpRequest();if (req.overrideMimeType) {
req.overrideMimeType('text/xml');}
} else if (window.ActiveXObject) { try {
req = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {
try { req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}}
}
if (!req) {alert('Giving up :( Cannot create instance XMLHttpRequest');return false;