Introduction to Ajax

Size: px

Start display at page:

Download "Introduction to Ajax"

Madeleine Ball
6 years ago
Views:

1 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

2 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

3 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 Traditional Web App Flow Web page 1 Server Req 1 Web page 2 Server Req 2 Web page 3

4 Time Between Host Server Calls and New Pages Wait Page 1 Page 2 Page 3 Server Req Server Req 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 Web Page Server Request Server Request Server Request Server Request

5 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

6 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

7 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

8 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

9 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 <?xml version="1.0"?> <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. <USER_MSG>User ID "COZZI" accepted.</user_msg> < _MSG> address is invalid</ _msg> <PWD_MSG>Password must be 6 or more characters</pwd_msg> <PWD2_MSG>Confirming password does not match.</pwd2_msg> </root> 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.

10 Responding to AJAX Request The Content-Type Do header not Cache should the XML be // Write XML response otherwise The XML your user version may "text/xml" is /free All XML needs see a root. the necessary. same It can data But over the and cgistdout('content-type: text/xml\n'); be named anything "encoding" over you again. can cause problems. So leave it off. cgistdout('cache-control: no-cache\n\n'); want. It is often ignored by the JavaScript. cgistdout('<?xml version="1.0"?>\n'); cgistdout('<root>\n'); escapehtml(usermsg:%len(%trimr(usermsg)):usrmsg:%len(usrmsg)); cgistdout('<user_msg>%s</user_msg>\n': %TrimR(usrMsg)); cgistdout('< _msg>%s</ _msg>\n': msg); cgistdout('<pwd_msg>%s</pwd_msg>\n':pwdmsg); cgistdout('<pwd2_msg>%s</pwd2_msg>\n': pwd2msg); cgistdout('</root>\n'); /end-free The rest of the XML These response XML tags goes identify here. the This is element the real names data that you're contain sending the data your back returning to the browser. to the JavaScript in the browser. 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.

11 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 <input type="text" name="acct" size="16" onblur="validate()"> <span id="acct_msg"></span> <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 focus" e.g., tab, mouse click outside the field. <span> is a special HTML tag Allows modification of HTML at runtime via JavaScript Access to <span> tags is accomplish via the ID name. This is where the new text or account info is inserted

12 Validate the Input using AJAX function Validate() { var acct = document.myform.acct.value; var url = "/cgi-bin/chkacct?acct=" + encodeme(acct); GoAjax(url,myCallback); Validate() called automatically when OnBlur is triggered The data from the ACCT input field is retrieved A url-encoded string is created The generic AJAX routine is called var req; A Generic GoAjax Function We will review this one section at a time. 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; req.onreadystatechange = callback; req.open('post', url, true); req.send(null);

13 Entering the GoAjax Function var req; Global variable. Must be declared outside all functions. function GoAjax(url, callback) { /* Create XMLHttpRequest object */ /* Send the request async *. Parameters: 1. The URL 2. A function name Highlighted Function Variables var req; The Global variable "req" is used throughout the function. 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) { Two parameters are only used within this Function. if (!req) { alert('giving up :( Cannot create instance XMLHttpRequest'); return false; req.onreadystatechange = callback; req.open('post', url, true); req.send(null);

14 Closer Look at Creating the XMLHttpRequest Object 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) { Sending the HTTP Request... req = new XMLHttpRequest(); req.onreadystatechange = callback; req.open('post', url, true); req.send(null);

15 Closer Look at the open() Function's Parameters Parameter 1: Method Parameter 2: URL Parameter 3: Synchronous/Asynchronous status req.open('post', url, true ); Parameter 1: 'POST' 'GET' Parameter 2: URL-encoded string Parameter 3: true = Asynchronous false = Synchronous Helper Function EncodeMe() Some browsers only support the escape() function Some browsers support new encoding schemes encodeme() checks which one is available Calls the most appropriate one

16 encodeme() Helper Function function Validate() { var acct = document.myform.acct.value; var url = "/cgi-bin/chkacct?acct=" + encodeme(acct); GoAjax(url,myCallback); function encodeme(value) { try { return encodeuricomponent(value); catch(e) { return escape(value); Waiting for the Reply There is no waiting for an asynchronous reply Control is returned back to the browser The browser user can keep on working The web server sends a response to the browser The state of the response changes The callback function is automatically evoked The readystate and status are checked in the callback function

17 GoAjax Callback Function function mycallback() { if (req.readystate == 4) { readystate 0 = uninitialized 1 = loading 2 = finished loading 3 = retrieving data 4 = completed if (req.status == 200) { parseresponse(req.responsexml); status 200 = "OK" 404 = "Not Found" 50x = "Not Authorized" XMLHttpRequest is an Object Objects need to be created or instantiated Objects contain data Objects also contain functions

18 Object Oriented Programming Objects are things that contain data Similar to Data Structures Data Members, Member Variables, Properties Similar to data structure subfields Methods or Member Functions Similar to subprocedures (If data structures could contain subprocedures) Call a method and it operates on the data members Although it may also access other data (e.g. global vars) Object Oriented Programming *MODULE objects are similar to OO objects Global variables are like data members Subprocedures are like methods *MODULE MYSTUFF D nbr S 7P 0 D name S 20A P GetName P GetNbr P SetName P SetNbr Similar OBJECT MYSTUFF int nbr char name[20] function GetName function GetNbr function SetName function SetNbr

19 XMLHttpRequest Object Data Members ("Properties") Property onreadystatechange readystate status statustext Description The name of the function that is called when the state of the XMLHttpRequest changes. The state of the XMLHttpRequest object. 0 = uninitialized 1 = loading 2 = finished loading 3 = interactive 4 = completed The HTTP status code. For example 200, 404, 500, etc. The HTTP status code in textual form. If status is 200, then statustext is "OK". If status is 404, then statustext is "Not found". responsetext responsexml The text returned from the CGI program to the Browser. The XML document (DOM-compatible) returned from the CGI program to the Browser. XMLHttpRequest Object Methods Method abort() getallresponseheaders() getresponseheader( "header" ) open("method", "URL", async, "userid", "pwd") Description Cancels the current XMLHttpRequest. Retrieves all HTTP headers and header values. Retrieves the value for the specific HTTP header. Identifies the method, URL and async flag for the HTTP request. In addition, the USER ID and Password (if signon is required) may also be specified. send( "content" null ) setrequestheader("label", "value") Sends the data (if any) by issuing the HTTP request. Sets the HTTP header to the indicated value.

20 Receiving the Response Member variable contains callback name Name of function to call when server replies XMLHttpRequest::onreadystatechange Function is called when Ready State changes XMLHttpRequest::readyState Callback should check two member variables XMLHttpRequest::readyState = 4 XMLHttpRequest::status = 200 Remember Calling GoAjax? function Validate() { var acct = document.myform.acct.value; var url = "/cgi-bin/chkacct?acct=" + encodeme(acct); GoAjax(url,myCallback); The name of a function to call when the readystate changes. The function name is literally "mycallback" It could be any name we want

21 Remember the GoAjax Function? 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; req.onreadystatechange = callback; req.onreadystatechange = callback; req.open('post', url, true); req.send(null); The Callback Function req.onreadystatechange onreadystatchange = callback; contains the name "mycallback" function mycallback() { Remember, this is a variable containing the name of the callback function. if (req.readystate == 4) { if (req.status == 200) { parseresponse(req); Finally, we call our routine to process the data sent back via the response to the XMLHttpRequest. First we check the readystate. Has it completed? If completed, we check status. Did the server respond with an "OK" message?

22 Responder Source function mycallback() { if (req.readystate == 4) { if (req.status == 200) { parseresponse( req ); function parseresponse(xmlres) { var xmlreply = xmlres.responsexml; var msgelem = xmlreply.getelementsbytagname('user_msg')[0]; var msgelemnode = msgelem.childnodes[0]; var usrmsg = msgelemnode.nodevalue; Retrieving the Returned Data Two response properties of XMLHttpRequest XMLHttpRequest::responseText Plain text responses XMLHttpRequest::responseXML XML DOM based responses responsetext is plain text You write a routine to process it as needed responsexml is an XML DOM Use JavaScript's DOM interfaces to retrieve the data from within the XML

23 Response Handling Function function parseresponse(xmlres) { var xmlreply = xmlres.responsexml; var msgelem = xmlreply.getelementsbytagname('user_msg')[0]; var msgelemnode = msgelem.childnodes[0]; var usrmsg = msgelemnode.nodevalue; Response Handling Function <input type="text" name="userid" size="16" onblur="validate()"> <span id="user_msg"></span> function parseresponse(xmlres) { var xmlreply = xmlres.responsexml; var msgelem = xmlreply.getelementsbytagname('user_msg')[0]; var msgelemnode = msgelem.childnodes[0]; var usrmsg = msgelemnode.nodevalue; var usrdiv = document.getelementbyid("user_msg"); XML tag name SPAN identifier if (usrmsg) { usrdiv.innerhtml = "<span style=\"color:red\">"+ usrmsg +"</span>"; else usrdiv.innerhtml = "No user msg";

handling No waiting for an "Enter" key to react Immediate

24 What does it look like? User Interface is controlled dynamically Keystroke/mouse action event handling No waiting for an "Enter" key to react Immediate validation/feedback of actions Single-page interface is more familiar With traditional/5250 business applications What do I think about AJAX?

Session 11. Ajax. Reading & Reference

Session 11. Ajax. Reading & Reference Session 11 Ajax Reference XMLHttpRequest object Reading & Reference en.wikipedia.org/wiki/xmlhttprequest Specification developer.mozilla.org/en-us/docs/web/api/xmlhttprequest JavaScript (6th Edition) by