Introduction to Ajax - - AJAX Introduction.pdf · PDF file zAJAX uses CGI-style HTTP...

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of Introduction to Ajax - - AJAX Introduction.pdf · PDF file zAJAX uses CGI-style HTTP...

  • 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

  • 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 1998 Sometimes formerly called Dynamic HTML Although some people put iFrame back to 1995

    February 2005, Jesse James Garrett of Adaptive Path His now infamous article where he coined the term AJAX AJAX technology came into vogue as a result of

    Garrett's article Google's use of AJAX in everything they do and their huge success with it Broadband bandwidth usage has increased beyond dial-up

    Without Broadband, AJAX would be possible, but not practical nor pervasive Without 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 displayed The 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 button The server does some processing

    Validating the user's data Searching the database Calling legacy programs Generating an HTML page

    The browser is routed to a new HTML page The 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


    Server Request

    AJAX Eliminates Page Lag

    AJAX applications are more like 5250 applications A single screen or "page" is used and updated for user interaction

    Asynchronous calls mean users continue with what they are doing

    Server Request

    Server Request

    Server Request…

    Web Page

  • AJAX Plays Nice with RPG IV

    AJAX uses CGI-style HTTP Requests Utilizing JavaScript's XMLHttpRequest object

    AJAX requests can leverage RPG routines These 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 Footprint Nothing to buy or install It is completely free and available

    No plug-ins required No ActiveX controls No Java Applets No "waiting for plug-in to download" annoyances No "right-click to allow this plug-in to be installed" messages

    Provides the capabilities formerly available only through ActiveX controls Java Applets or plug-ins Server-side Scripting, such as JSPs

  • Why AJAX Now?

    The Browser Wars are finally over The Statuesque of PCs has changed

    CPUs 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 enabled

    JavaScript 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 them

    IE version 7 directly supports XMLHttpRequest IE version 6 support is thorugh MS-proprietary interface

    But 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 libraries These libraries are being called "AJAX FrameWorks" Most are no charge to use or deploy Vendors 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" free Yahoo's AJAX UI Framework (aka "YUI") – Cool and free Microsoft's Atlas – Not as interesting as DOJO or YUI None of these require you to buy anything to use them

    AJAX FrameWorks Location

    Adobe's Flex Library is free Optional, chargeable Eclipse plug-in

    Yahoo's AJAX UI Framework (aka "YUI") Compact, free, but a bit different (in beta today)

    TIBCO GI (General Interface) Probably will have limited appeal

    DOJO – Cool, lots of "widgets" free Some unusual interfaces

  • Ajax Challenges for Programmers

    Requires some new knowledge You've got to learn JavaScript or VBScript

    AJAX Skill Priority Scale 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 design Need to format data for return to the Browser Could 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 implemented Yahoo, Google, MS, all are moving to AJAX in a HUGE way

    Web Browser is normally a benign tool Click, take me here. Click, take me there.

    Without AJAX you have a 3, 5, 5 scenario to get the data you want Type, click, think click, think Type, click, think click, think Type, click, think Get Results

    With AJAX you have a 3, 1 scenario to get the information you need Type, 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 request

    Using 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/xml Cache-Control: no-cache

    User ID "COZZI" accepted. email address is invalid Password must be 6 or more characters Confirming password does not match.

    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.

  • Responding to AJAX Request

    // Write XML response /free

    cgiStdOut('Content-type: text/xml\n'); cgiStdOut('Cache-Control: no-cache\n\n'); cgiStdOut('\n'); cgiStdOut('\n'); escapeHTML(usermsg:%Len(%TrimR(usermsg)):usrMsg:%Len(usrMsg)); cgiStdOut('%s\n': %TrimR(usrMsg)); cgiStdOut('%s\n': emailMsg); cgiStdOut('%s\n':pwdmsg); cgiStdOut('%s\n': pwd2Msg);



    The XML version is necessary. But the

    "encoding" can cause problems. So leave it off.

    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 AJAX A JavaScript class Capable of calling the server

    Issues standard HTTP requests. Captures the server's response

    Retrieves HTTP responses from the web server. Operates Asynchronously or Synchronously

    When run asynchronously, tasks run in the background of the browser.

  • Simple AJAX Scenario

    User types in an Account number An AJAX request is triggered

    Verify the account number Retrieves the Account Holder's name

    If valid account number Account holder's name is displayed near the input

    If invalid account number Error message is displayed near the input

    HTML for Account Input

    tag identifies the input field into which the user types the account number onblur="Validate()" calls the JavaScript function

    When the input field "looses