Ajax Term Paper - Hochschule Furtwangenwebuser.hs-furtwangen.de/~heindl/ebte-09ss/Ajax-Term... ·...

16
E-Business Technologies Page 1 Version: 0.1 Date: 02.05.2009 Author(s): Doddy Satyasree Person responsable: Doddy Satyasree Language: English AJAX Term Paper History Version Status Date 0.1 Draft Version created 02.05.2009 0.2 Final Version 23.06.2009 Master in Business Consulting Hochschule Furtwangen University Summer Semester 2009 Presented To: Prof. Dr. Eduard Heindl Presented By: Doddy Satyasree (Matrno.232467) Sub: E-Business Technologies

Transcript of Ajax Term Paper - Hochschule Furtwangenwebuser.hs-furtwangen.de/~heindl/ebte-09ss/Ajax-Term... ·...

  • E-Business Technologies Page 1

    Version: 0.1

    Date: 02.05.2009

    Author(s):

    Doddy Satyasree

    Person responsable:

    Doddy Satyasree

    Language: English

    AJAX

    Term Paper

    History Version Status Date 0.1 Draft Version created 02.05.2009 0.2 Final Version 23.06.2009

    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 2 0 0 9

    P r e s e n t e d T o :

    P ro f . D r . E dua 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 . 2 3 2 4 6 7 )

    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 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 3

    Table of Content 1. Introduction of Ajax ........................................................................................... 4

    1.1. Ajax Definition ....................................................................................... 4

    1.2. How Ajax Works? .................................................................................. 5

    1.3. Why Should I Use Ajax? ........................................................................ 7

    1.4. What Ajax Is Not? .................................................................................. 7

    1.5. Why Web 2.0 .......................................................................................... 7

    2. Ajax Basics ......................................................................................................... 8

    2.1. Understanding Server Requests .............................................................. 8

    2.2. Ajax Request/Response Process ............................................................. 9

    2.3. Ajax Properties and Methods ................................................................ 10

    2.4. Examining Ajax Application ................................................................ 11

    3. Technologies behind Ajax ................................................................................ 11

    4. Foundations: Scripting XML and JSON ........................................................... 12

    5. Who is Using Ajax? .............................................................................. 13

    5.1. Google Suggest ..................................................................................... 13

    5.2. A9 ......................................................................................................... 14

    5.3. Yahoo! News ........................................................................................ 14

    6. Conclusion ........................................................................................................ 15

    6.1.1. Bibliography ..................................................................................................... 16

  • E-Business Technologies Page 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” (www.adaptivepath.com/publicatio/essays/archives/000385.php).

    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, 2nd 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. 418-420)

  • E-Business Technologies Page 5

    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

    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.

  • E-Business Technologies Page 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, 2nd 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. 421--424)

    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 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.

    1.5. 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. 428-430)

    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, 2nd Edition, p. 13-14)

  • E-Business Technologies

    Figure 1.5. The home page for “The Web 2.0 Show” podcast is a good example of the Web 2.0 “look.” (http://www.we

    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.

    2.1. Understanding Server RequestsAjax functionality relies on the relatively straightforward ability to request data from the server. Every time while loading a Web page,

    Ajax function works something like this which is illustr

    Figure 1.6. The general Ajax process flow, showing the dynamic type

    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 function fetchData ().

    3. Fetch Data: This is the server request, where a JavaScrthat will be used to send and receive data from the server.

    Figure 1.5. The home page for “The Web 2.0 Show” podcast is a good example of the Web http://www.web2.0show.com)

    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.

    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:

    The general Ajax process flow, showing the dynamic type

    happens in the browser window. For example, the user begins to type something into a form field.

    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

    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

    Page 8

    Figure 1.5. The home page for “The Web 2.0 Show” podcast is a good example of the Web

    It involves three main parts: making the server call, having the server process the call, and then

    Ajax functionality relies on the relatively straightforward ability to request data from the server. a server request, so that’s nothing new. The general

    The general Ajax process flow, showing the dynamic type-ahead functionality

    happens in the browser window. For example, the user begins to type

    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

    ipt object is created (pageRequest) nitialize this object as either

  • E-Business Technologies

    ActiveXObject (“Microsoft.XMLHTTP”) for Internet Explorer or XMLHttpRequest () for all other browsers.

    4. Server Process: The pdataPage. With the relevant extension (for example, dataPagemethod to make the request, then the contents of the data page are simply returned to the fetchData () function. When using the return specific content. For example, send back a specific word based on that value.

    5. Filter Data: Once that 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

    6. Reaction: Finally, the data is used by or placed onto the page, generally by usiinnerHTML method to place it into a specific object.CSS, DHTML & Ajax, 4th

    2.2. Ajax Request/Response In a traditional request, a user initiates a request for data, waits for the server to response, and then waits for the browser to render the page. In an Ajaamount of data that needs to be sent back and forth can be greatly reduced. Figure the difference between Ajax 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 traditional non-Ajax interaction). something is happening. This is most often done with an animated graphic indicator (see 1.8) placed on or near where the interaction waonto some other part of the page to wait for the Gustafson, Langride, and Webb, Accelerated DOM Scripting with Ajax, APIs, and Libraries, p. 102-106)

    ActiveXObject (“Microsoft.XMLHTTP”) for Internet Explorer or XMLHttpRequest () for

    The page on the server processes the request and also dataPage. With the relevant extension (for example, dataPage.php). method to make the request, then the contents of the data page are simply returned to the

    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.

    Once that 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

    Finally, the data is used by or placed onto the page, generally by usiinnerHTML method to place it into a specific object. (Teague, Visual Quick Start Guide

    th Edition, p. 433-435)

    Ajax Request/Response Process In a traditional request, a user initiates a request for data, waits for the server to 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 the difference between Ajax request and response process. Ajax can ultimately mean a more responsive interface, talking less time to complete the same tasks.

    Ajax Request and Response Processes jax updates to the client can be made with or without user interaction (in comparison

    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

    ) 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. Gustafson, Langride, and Webb, Accelerated DOM Scripting with Ajax, APIs, and Libraries, p.

    Page 9

    ActiveXObject (“Microsoft.XMLHTTP”) for Internet Explorer or XMLHttpRequest () for

    and also called this page as php). When using the GET

    method to make the request, then the contents of the data page are simply returned to the POST, then data can be sent to that page and used to

    might pass a numeric value that is then used to

    Once that data is passed back to the page, it can be passed on to a function function filterData ().

    Finally, the data is used by or placed onto the page, generally by using the (Teague, Visual Quick Start Guide

    In a traditional request, a user initiates a request for data, waits for the server to send back a enabled environment, the

    amount of data that needs to be sent back and forth can be greatly reduced. Figure 1-7 illustrates . Ajax can ultimately mean a more

    jax updates to the client can be made with or without user interaction (in comparison with the initiated, it’s important to show users that

    something is happening. This is most often done with an animated graphic indicator (see Figure s initiated. The user then knows to wait or move

    to complete. (Snook, Aaron Gustafson, Langride, and Webb, Accelerated DOM Scripting with Ajax, APIs, and Libraries, p.

  • E-Business Technologies

    Full list of Ajax Controls

    Figure 1.8 A variety of the indicators available at

    2.3. Ajax Properties and MethodsAlthough the format outline above takes care of the basic needs 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.2Quick 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()

    open(, , )

    send()

    A variety of the indicators available at www.napyfab.com/ajax-indicators

    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

    shown in Table 1.1 and 1.2. (Teague, CSS, DHTML, & AJAX Visual Quick Start Guide, Fourth Edition p. 435-436)

    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

    getResponseHeader() Value of specified HTTP header

    open(, , ) Initializes the XML HTTP request

    Sends the request to the server and receives the response

    Page 10

    indicators

    fetching data off the server for use on a Web page, there are several JavaScript properties and methods that are commonly used

    Teague, CSS, DHTML, & AJAX Visual

    Even handler triggered when the state of the

    Status code for the current state of the server

    from the server

    compatible XML document object of

    Status code of the HTTP response from the

    String value of the HTTP status message

    Cancels the current HTTP request

    String value of all HTTP headers

    Value of specified HTTP header

    Initializes the XML HTTP request

    request to the server and

  • E-Business Technologies

    2.4. Examining Ajax ApplicationGoogle Docs & Spreadsheets demonstrates the power of Ajax very well (see Figure 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 make a site seem extremely responsive and fun to use.

    Figure 1.9 Google Docs & Spreadsheets

    3. Technologies behind AjaxThe structure of an Ajax application is built on an underlying structure of XHTML, which wasmerely an extension of HTML, and so forth. The tools used to build Ajax web applications as follows:

    HTML/Extensible HyperText Markup Language (XHTML): languages.

    Document Object Model (DOM):

    JavaScript: Scripting language used to program an Ajax engine

    Cascading Style Sheets (CSS):

    Extensible Markup Language (XML):

    Extensible Stylesheet Language Transformation (XSLT):(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 applicaand 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 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 for

    amining Ajax Application Google Docs & Spreadsheets – along with most of the Google online applications, for that matterdemonstrates the power of Ajax very well (see Figure 1.9). Changes to the document gconstantly 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

    Technologies behind Ajax The structure of an Ajax application is built on an underlying structure of XHTML, which wasmerely an extension of HTML, and so forth. The tools used to build Ajax web applications as

    HTML/Extensible HyperText Markup Language (XHTML): Primary content representation

    Document Object Model (DOM): Dynamic updating of a loaded page.

    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

    Primary communication broker

    In reality, all these technologies are available to be used in Ajax solutions, but only three are HTML/XHTML/DOM and JavaScript. XHTML is the structure of any Ajax applica

    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

    n an Ajax application. It is more important to initiate the clientcommunication 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

    Page 11

    along with most of the Google online applications, for that matter-. 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

    can be used for even small tasks that can

    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

    Primary content representation

    rms XML into XHTML

    In reality, all these technologies are available to be used in Ajax solutions, but only three are 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

    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

    th between clients and servers. The other technologies which

  • E-Business Technologies Page 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, 2nd 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 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.

    5.1. Google Suggest One of the first examples that developers cite when talking about Ajax is Google Suggest (www.google.com/webhp?complete=1). 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 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 (www.a9.com) 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.

    5.3. Yahoo! News Also introduced in 2005 was a new design for the Yahoo! News site (http://news.yahoo.com/). 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, 2nd Edition, p.6-13)

  • E-Business Technologies Page 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 16

    6.1.1. 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 (www.adaptivepath.com/publicatio/essays/archives/000385.php)

    • The home page for “The Web 2.0 Show” (http://www.web2.0show.com)

    • A variety of the indicators available at www.napyfab.com/ajax-indicators

    • Google Suggest (www.google.com/webhp?complete=1)

    • A9 (www.a9.com)

    • Yahoo! News (http://news.yahoo.com/)

    • Ajax Form POST/GET http://www.captain.at/howto-ajax-form-post-get.php