Term Paper. P r o f. D r. E d u a r d H e i n d l. H o c h s c h u l e F u r t w a n g e n U n i v e r s i t y. P r e s e n t e d T o :

Size: px

Start display at page:

Download "Term Paper. P r o f. D r. E d u a r d H e i n d l. H o c h s c h u l e F u r t w a n g e n U n i v e r s i t y. P r e s e n t e d T o :"

Rodney Carpenter
5 years ago
Views:

1 Version: 0.1 Date: Author(s): Doddy Satyasree AJAX Person responsable: Doddy Satyasree Language: English Term Paper History Version Status Date 0.1 Draft Version created Final Version M a s t e r i n B u s i n e s s C o n s u l t i n g H o c h s c h u l e F u r t w a n g e n U n i v e r s i t y S u m m e r S e m e s t e r P r e s e n t e d T o : P r o f. D r. E d u a r d H e i n d l P r e s e n t e d B y : D o d d y S a t y a s r e e ( M a t r n o ) S u b : E - B u s i n e s s T e c h n o l o g i e s E-Business Technologies Page 1

2 CERTIFICATE OF DECLARATION It is to be declared that all the work done in this document is solely and explicitly done by the authors of this document. The list of literatures, from where the text has been adapted, is mentioned in the document with references. Satyasree Doddy June 23, 2009 E-Business Technologies Page 2

3 Table of Content 1. Introduction of Ajax Ajax Definition How Ajax Works? Why Should I Use Ajax? What Ajax Is Not? Why Web Ajax Basics Understanding Server Requests Ajax Request/Response Process Ajax Properties and Methods Examining Ajax Application Technologies behind Ajax Foundations: Scripting XML and JSON Who is Using Ajax? Google Suggest A Yahoo! News Conclusion Bibliography E-Business Technologies Page 3

4 1. Introduction of Ajax Jesse James Garrett coined the term Ajax in February 2005 in his essay, Ajax: A New Approach to Web Applications ( Although he used Ajax, others began using the acronym AJAX (which stands for Asynchronous JavaScript and XML) for the purpose of retrieving information from the server without unloading the page. (Holdener III, Ajax the Definitive Guide, O Reilly, p.8) These requests may be executed in any number of ways and using any number of different data transmission formats. Big companies such as Google, Yahoo!, and Microsoft have devoted resources specifically towards the goal of creating web applications that look and behave like desktop applications. (Zakas, McPeak, & Fawcett, Professional Ajax, 2 nd Edition, p. 1-3) Since the introduction of the Ajax, the tools of the classic Web were few and simple: HyperText Markup Language (HTML) HyperText Transfer Protocol (HTTP) Eventually, other things went into the building of a web page, such as CGI scripting and possibly even a database. HTML provided everything in a web page in the classic environment. If the client and the server were to communicate, they did so using very basic HTTP GET and, sometimes, POST calls. Many more parts go into web sites and web applications today. Ajax is like the materials that go into making a high-rise building. (Holdener III, Ajax the Definitive Guide, O Reilly, p.4-6) 1.1. Ajax Definition Ajax sometimes capitalized as AJAX stands for: A is for asynchronous - request can be made asynchronously or synchronously - both techniques allow web page to be updated without refreshing it - anything useful the user can do while processing request? - if yes then use asynchronous, otherwise use synchronous J is for JavaScript - typically JavaScript is used on the client-side (in the browser) - only programming language supported out-of-the-box by most web browsers can use any language on server-side that can accept HTTP Requests and return HTTP responses - Java servlets, Ruby servlets, CGI scripts X is for XML -request and response messages can contain XML - can easily invoke REST-style services. - can really contain any text (single text value..) typically JavaScript is used on the client-side in the browser. (Teague, CSS, DHTML, & AJAX Visual Quick Start Guide, Fourth Edition p ) E-Business Technologies Page 4

5 DHTML + XMLHttpRequest + Server Files = Ajax Filters data for Transfer data between the Provides data that is display on the server and the page. either static or generated. dynamically page. Figure 1.1 The components of Ajax 1.2. How Ajax Works? Ajax is more than an approach to web interaction. This approach involves transmitting only a small amount of information to and from the server in order to give the user the most responsive experience possible. Instead of the traditional web application model where the browser itself is responsible for initiating requests to, and processing requests from, the web server, the Ajax model provides an intermediate layer called Ajax engine-to handle this communication. Ajax engine is really just a JavaScript object or function that is called whenever information needs to be requested from the server. Instead of the traditional model of providing a link to another resource (such as another web page), each link makes a call to the Ajax engine, which schedules and executes the request. The request is done asynchronously, meaning the code execution doesn t wait for a response before continuing. The server-which traditionally would serve up HTML, images, CSS, or JavaScript-is configured to return data that the Ajax engine can use. This data can be plain text, XML, or any other data format that may need. The only requirement is that the Ajax engine can understands and interpret the data. When the Ajax engine receives the server response, it goes into action, often passing the data and making several changes to the user interface based on the information it was provided. Because this process involves transferring less information than the traditional web application model, user interface updates are faster, and the user is able to do his or her work more quickly. Figure 1.2. The difference between traditional and Ajax Web Application Model E-Business Technologies Page 5

When user do something with an HTML form in the browser, JavaScript on the HTML page sends an HTTP request to the server and the server responds with a small amount of data, rather than a complete

6 When user do something with an HTML form in the browser, JavaScript on the HTML page sends an HTTP request to the server and the server responds with a small amount of data, rather than a complete web page and the JavaScript uses this data to modify the page. This is faster because less data is transmitted and because the browser has less work t do. The Figure 1.2 above illustrates the difference between the traditional and Ajax web application models. (Zakas, McPeak, & Fawcett, Professional Ajax, 2 nd Edition, p. 4-7) In the Figure 1.3 below illustrates the Ajax changes the classic Web experience by allowing the browser to go back to the server incrementally to make changes to the content, turning the Web page into a filter that processes data coming from the server. Once data is sent to the server, the data is sent and received in the background while the visitor continues to work (Figure 1.4). That s the asynchronous part of Ajax. (Teague, CSS, DHTML, & AJAX Visual Quick Start Guide, Fourth Edition p ) Figure 1.3 The Ajax model for delivering Web applications. - Figure 1.4 Visitors can continue to work as data transferred between the page and the server. E-Business Technologies Page 6

7 1.3. Why Should I Use Ajax? 1. Increased client Interaction Gives users more of the expected behavior of a client/server application rather than a classic web page Performance only a portion of the page is refreshed Less bandwidth usage 2. Platform Independent (sort of) uses the browser, but relies on JavaScript 3. Content and functionality sharing By sharing code, the Web itself will become an open platform and Web sites less insular. Functionality and content created for on Web site can be easily shared around the Web. 4. Heightened interactivity Because of the real and perceived speed increases as mentioned above, Web visitors are more likely to interact with the pages to make small data changes that can be just as quickly undone. (Teague, CSS, DHTML, & AJAX Visual Quick Start Guide, Fourth Edition p. 426) 1.4. What Ajax Is Not? Ajax is not the be-all and end-all solution to every new application being built for the Web. It is not even something that should be considered as an upgrade to every existing product. Ajax is a great model for building more modern, faster Web 2.0 applications, but only when they are built correctly. Throwing Ajax at every application can create complications, such as accessibility issues, cross-browser compliance nightmares, and requiring more intricate and complex programming to perform simple tasks Why Web 2.0 Shortly after the term Ajax was coined, another term began popping up Web 2.0 and it was originally the name of a conference held by O Reilly Media and CMP Media in late 2005 and began popping up all over the Internet in descriptions of how the Web had changed. The following reasons are as follows: 1. The Web as services, not software 2. Separation of data and presentation- data can be represented in any number of ways and combined with any other data sources (called mashups) 3. The end of software versioning rather than having discreet software versions, applications are constantly being updated and improved. (Teague, CSS, DHTML, & AJAX Visual Quick Start Guide, Fourth Edition p ) 4. Richer, more responsive user experience Ajax is sties to the last point, creating a richer experience for the user. Web 2.0 is about a shift in the very character of the Web. While Ajax is an important part of creating the next generation user experience that Web 2.0 signifies, it is just a one piece of a much larger puzzle. (Zakas, McPeak, & Fawcett, Professional Ajax, 2 nd Edition, p ) E-Business Technologies Page 7

8 Figure 1.5. The home page for The Web 2.0 Show podcast is a good example of the Web 2.0 look. ( 2. Ajax Basics It involves three main parts: making the server call, having the server process the call, and then filtering the data that comes back Understanding Server Requests Ajax functionality relies on the relatively straightforward ability to request data from the server. Every time while loading a Web page, makes a server request, so that s nothing new. The general Ajax function works something like this which is illustrated in the figure: Figure 1.6. The general Ajax process flow, showing the dynamic type-ahead functionality 1. Action: An event happens in the browser window. For example, the user begins to type something into a form field. 2. Event: The event handler for the object that initiated the action (for example, the form field) will trigger a function used to request data from the server and generally call that function fetchdata (). 3. Fetch Data: This is the server request, where a JavaScript object is created (pagerequest) that will be used to send and receive data from the server. Initialize this object as either E-Business Technologies Page 8

9 ActiveXObject ( Microsoft.XMLHTTP ) for Internet Explorer or XMLHttpRequest () for all other browsers. 4. Server Process: The page on the server processes the request and also called this page as datapage. With the relevant extension (for example, datapage.php). When using the GET method to make the request, then the contents of the data page are simply returned to the fetchdata () function. When using the POST, then data can be sent to that page and used to return specific content. For example, one might pass a numeric value that is then used to send back a specific word based on that value. 5. Filter Data: Once that t data is passed back to the page, it can be passed on to a function used to interpret it and display it in the Web page and also call it as function filterdata (). 6. Reaction: Finally, the data is used by or placed onto the page, generally by using the innerhtml method to place it into a specific object. (Teague, Visual Quick Start Guide CSS, DHTML & Ajax, 4 th Edition, p ) 2.2. Ajax Request/Response Process In a traditional request, a user initiates a request for data, waits for the server to send back a response, and then waits for the browser to render the page. In an Ajax-enabled environment, the amount of data that needs to be sent back and forth can be greatly reduced. Figure 1-7 illustrates the difference between Ajax request and response process. Ajax can ultimately mean a more responsive interface, talking less time to complete the same tasks. Figure 1.7 Ajax Request and Response Processes Ajax updates to the client can be made with or without user interaction (in comparison with the traditional non-ajax interaction). If the request is user-initiated, it s important to show users that something is happening. This is most often done with an animated graphic indicator (see Figure 1.8) placed on or near where the interaction was initiated. The user then knows to wait or move onto some other part of the page to wait for the interaction to complete. (Snook, Aaron Gustafson, Langride, and Webb, Accelerated DOM Scripting with Ajax, APIs, and Libraries, p ) E-Business Technologies Page 9

10 Full list of Ajax Controls Figure 1.8 A variety of the indicators available at Ajax Properties and Methods Although the format outline above takes care of the basic needs for fetching data off the server for use on a Web page, there are several JavaScript properties and methods that are commonly used to control Ajax functionality shown in Table 1.1 and 1.2. (Teague, CSS, DHTML, & AJAX Visual Quick Start Guide, Fourth Edition p ) Ajax Properties Property Onreadystatechange readystate responsetext responsexml Status Status Table 1.2 Ajax Methods Ajax Methods Method abort() getallresponseheaders() getresponseheader(<label>) open(<method>, <URL>, <asynchflag>) send(<content>) Description Even handler triggered when the state of the request object changes Status code for the current state of the server request object. String value of the data from the server DOM-compatible XML document object of the data from the server Status code of the HTTP response from the server String value of the HTTP status message Description Cancels the current HTTP request String value of all HTTP headers Value of specified HTTP header Initializes the XML HTTP request Sends the request to the server and receives the response E-Business Technologies Page 10

11 2.4. Examining Ajax Application Google Docs & Spreadsheets along with most of the Google online applications, for that matter- demonstrates the power of Ajax very well (see Figure 1.9). Changes to the document get constantly sent back to the server to be saved. This type of interaction is just like using a desktop application such as Microsoft Word. And although many of the applications that make use of the technique attempt to be like desktop applications, it can be used for even small tasks that can make a site seem extremely responsive and fun to use. Figure 1.9 Google Docs & Spreadsheets 3. Technologies behind Ajax The structure of an Ajax application is built on an underlying structure of XHTML, which was merely an extension of HTML, and so forth. The tools used to build Ajax web applications as follows: HTML/Extensible HyperText Markup Language (XHTML): Primary content representation languages. Document Object Model (DOM): Dynamic updating of a loaded page. JavaScript: Scripting language used to program an Ajax engine Cascading Style Sheets (CSS): Provides stylistic formatting to XHTML. Extensible Markup Language (XML): Data exchange format. Extensible Stylesheet Language Transformation (XSLT): Transforms XML into XHTML (styled by CSS) XMLHttp: Primary communication broker In reality, all these technologies are available to be used in Ajax solutions, but only three are required: HTML/XHTML/DOM and JavaScript. XHTML is the structure of any Ajax application and is obviously necessary for the displaying of information on client browser, while the DOM is necessary to change portions of an XHTML page without reloading it. JavaScript has the most important role in an Ajax application. It is more important to initiate the client server communication and manipulate the DOM to update the web page. CSS is used to affect the look of the page, and is manipulated dynamically through the DOM. Finally, XML is the protocol that is used to transfer data back and forth between clients and servers. The other technologies which E-Business Technologies Page 11

12 are listed are helpful in fine-tuning an Ajax solution. All of the previously listed technologies related directly to the client-side Ajax engine, but there is no Ajax without a stable, responsive server waiting to send content to the engine. For this purpose one can use any application server of choice. For instance like server-side components as PHP pages, Java servlets, or.net components, but only need to ensure that the correct data format is being sent back to the Ajax engine. (Zakas, McPeak, & Fawcett, Professional Ajax, 2 nd Edition, p.6-7) 4. Foundations: Scripting XML and JSON The connection between the client and the server is using JavaScript, and usually build the data format used to exchange information in XML because a new format used to exchange information in XML because a new format is on the rise and is fast becoming the new choice for web developers. This new format is JavaScript Object Notation (JSON). First, driving the Ajax component of an Ajax web application is the XMLHttpRequest object. This object allows for asynchronous communication between the client and the server. In other words, the client can start communicating with the server, and instead of the client freezing up and becoming unusable until that communication is complete, the client can continue to function like normal. Example 1. Creating the XMLHttpRequest object (continued) } catch (e) { Request = false; /* else if (window.activexobject) { /*Try to create a new ActiveX XMLHttp object */ Try { Request = new ActiveXObject ( Msxml2.XMLHTTP ); } catch (e) { Request = false: }}} Return request: } Var request = createxmlhttprequest (); XML Requests and Responses: Now XMLHttpRequest () will control all of the requests that will be communicated to the server, as well as all of the responses sent back to the client. Two methods and one property are typically used when building a request for the server: open (), send (), and onreadystatechange. For example: If (request) { Request.open ( GET, URL, true); Request.onreadystatechange = parsresponse; Request.Send ( ) ;} E-Business Technologies Page 12

13 JSON: A data exchange format that is a subset of the object literal notation in JavaScript. It has been gaining a lot of attention latterly as a lightweight alternative to XML, especially in Ajax applications because of the ability in JavaScript, however, and can use it as a simple exchange format for any scripting language. (Holdener III, Ajax The Definitive Guide, p.68-87) JSON Requests and Responses Requests to the server using Ajax and JSON are the same as with XML. Function RequestData (request, url, data, func, method) { If (request) { If (method == GET ) Request.open ( Get, url +? + data, true): else request.open ( POST, url, true): request.oneadystatechange = func: if (method ++ GET ) equest.send ( ): else request.send (data): }} 5. Who is Using Ajax? A number of commercial web sites use Ajax techniques to improve their user experience. The following are some of the more well-known and well-executed web applications that use Ajax Google Suggest One of the first examples that developers cite when talking about Ajax is Google Suggest ( The interface is simply a clone of the main Google interface which prominently features a text box to enter search terms. Everything appears to be the same until start typing in the textbox. Once type, Google Suggest requests suggestions from the server, showing a drop-down list of search terms that may be interested in shown in Figure 2.0 E-Business Technologies Page 13

5.2. A9 Amazon.com is world famous for being an online marketplace for just about anything, but when it released a search engine, it did so with little fanfare and attention.

It performs searches of books on Amazon.com and movies on IMDb (Internet Movie Database). Searches for Yellow Pages, Wikipedia, and Answers.com. What makes A9 unique is how its user interface works.

14 5.2. A9 Amazon.com is world famous for being an online marketplace for just about anything, but when it released a search engine, it did so with little fanfare and attention. The introduction of A9 ( showed off enhanced searching, enabling to search different types of information simultaneously. For web and image searches it uses MSN to fetch results. It performs searches of books on Amazon.com and movies on IMDb (Internet Movie Database). Searches for Yellow Pages, Wikipedia, and Answers.com. What makes A9 unique is how its user interface works. The photo information and summary are retrieved from the server using XMLHttp and inserted into the page dynamically. This is a perfect example of how Ajax can be used to enhance a web page Yahoo! News Also introduced in 2005 was a new design for the Yahoo! News site ( The new design features an interesting enhancement: While moving mouse over a particular headline, a small box pops up with a summary and, optionally, a photo associated with that story, shown in the figure below. The photo information and summary are retrieved from the server using XMLHttp and inserted into the page dynamically. This is a perfect example of how Ajax can be used to enhance a web page. (Zakas & McPeak, Professional Ajax, 2 nd Edition, p.6-13) E-Business Technologies Page 14

15 6. Conclusion The term Ajax was coined by Jesse James Garrett in an article posted on the Adaptive Path, LLC website. The article introduced Ajax as a new user interaction model for web applications in which full page loads are no longer necessary. Ajax uses technologies such as JavaScript, XML, CSS, and XHTML, along with the XMLHttpRequest object, to build browser-based web applications that function like desktop programs. The introduction of iframes and XMLHttp really pushed Ajax development forward. Ajax can be used to accomplish many things. It is best used to enhance the user experience rather than providing cool effect. Several of the most popular Ajax applications were also discussed, including Google Suggest, Gmail, Google Maps, and Yahoo! News. Don t have to refresh the browser page in order to display new data from the server and get data asynchronously with XMLHttprequest. Same benefits as other web applications such as universal reach via internet, centralized administration, installation and upgrade, and browser already installed on client. ; E-Business Technologies Page 15

16 Bibliography Crane, D., Pascarello, E., & James, D. (2005), Ajax in Action, Manning. Holdener III, A. T. (2008). Ajax: The Definitive Guide. (S. S. Laurent, Ed.) O'Reilly. Moroney, L. (2006). Foundations of Atlas: rapid Ajax development with ASP.NET 2.0. Apress. Snook, J., Gustafson, A., Langridge, S., & Webb, D. (2007). Accelerated DOM Scripting with Ajax, APIs, and Libraries. Apress. Teague, J. C., McPeak, J., Fawcett, Joe. (2006). CSS, DHTML, & Ajax. (4th, Ed.) Peachpit Press. Zakas, N. C. Professional Ajax 2nd Edition. Wiley Publishing, Inc. Webmails: Web Applications ( The home page for The Web 2.0 Show ( A variety of the indicators available at Google Suggest ( A9 ( Yahoo! News ( Ajax Form POST/GET E-Business Technologies Page 16

AJAX Programming Overview. Introduction. Overview

AJAX Programming Overview. Introduction. Overview AJAX Programming Overview Introduction Overview In the world of Web programming, AJAX stands for Asynchronous JavaScript and XML, which is a technique for developing more efficient interactive Web applications.