Ajax theory on Sun

[Transformation] Ajax theory on Sun
Http://developers.sun.com/prodtech/javatools/jscreator/reference/techart/2/ajax_overview.html

Part of content:

What Is Ajax?

 
Ajax, which is growing rapidly in popularity, is a technique for creating improved web browser user interfaces for a web application. it is becoming so widely used that you probably have seen Ajax at web sites you have accessed, perhaps without even realizing it. AJAX can help increase the speed and usability of an application's web pages by updating only part of the page at a time, rather than requiring the entire page to be reloaded after a user-initiated change.

Furthermore, Ajax uses capabilities already present in modern Web browsers and does not require any plug-ins. to better understand Ajax, let's look at a simple example of a Web application that includes des Ajax and then compare it with HTML and DHTML.

Ajax and DHTML
A Web application that uses DHTML can also offer an improved user experience over a simple HTML application. with DHTML we cocould easily pop-up a list of choices that update dynamically as the user types in an input field. both Ajax and DHTML leverage the capabilities of JavaScript running in a web browser.

what makes Ajax exciting is that the Web server can provide an updated list of choices each time the user types a key. in a non-Ajax DHTML application you need to send the data for the list of choices when you first send the page and that data must work for all possible user inputs. clearly for every applications like Google suggest it is always Ally impossible to send all the data to support all possible user inputs. although in other cases, like a dictionary search, it might be theoretically possible to send all the data with the web page, the transmission time wocould be prohibitive. ajax techniques allow JavaScript running in the browser to request and work with data from the server based on user inputs to the web page.

In summary, web application developers are also excited about Ajax is because it allows DHTML-like interactive web page techniques to be used with data requested from the serverAfter User interactions with the page.

Ajax technical overview

There are using different tools and technologies for Building Web application including Java Studio creator, PHP, J2EE, Ruby on Rails, DOTNET, and others. AJAX can be used by all these communities because an Ajax web application only requires a modern Web browser. ajax is not tied to any specific tool, web application framework, or industry vendor. for these reasons a broad range of communities have an active interest in using Ajax. let's now take a more technical look at Ajax.

First let's dive right in with a look at the steps to using Ajax in a web application.

Figure 3 shows the processing steps taken over time, from the user, browser, and server perspectives, for a Web application with Ajax. the steps are numbered according to their sequence in time, with time increasing from top to bottom in the table.

Figure 3: UML sequence dimo-for web application with Ajax Processing

 
These steps correspond to a scenario such as the one described for Google suggest. they show how processing moves in a defined sequence among the server, browser, and user. let's walk through these steps in the order they occur.

2. Web server sends page with Ajax component

   When a page when des Ajax then the Ajax-specific part is considered to be an Ajax component. an Ajax component corresponds to an HTML component, but it has enhanced Ajax processing in both the browser and the server. for Google suggest, an HTML input component is enhanced to become what may be generically described as an "auto-complete text field" ajax component.

4. Browser displays Web page with Ajax component

   Although the display to the user at this point often is no different than the display for a non-Ajax component, javaScript code for the page is waiting beneath the covers to play its part in the Ajax processing.

6. User provides input to Ajax component in Web Browser

   For our Google suggest example, the user types "Aja ". processing can happen as soon as the first letter is typed, or, as in the case of Google suggest, quickly typed letters may be lumped together and sent as one request to the server to reduce server load.

8. Browser runs JavaScript code to process user input

   In this step, JavaScript processes the user inputs in the same way as for a page leveraging DHTML. these user inputs may result in Javascript events. for example, a user types some text into an input field and this may invoke JavaScript events. in a web application with Ajax, these JavaScript events may request data from the server (described in the next step ).

10. Browser asynchronously requests data from server according to user input

    JavaScript code running in the browser makes a call to the server that is asynchronous from the normal HTTP Request Response Processing for the page. typically the data request is based on the user's inputs. for the Google suggest example, the data request parameters des the string "Aja" typed by the user.

12. Server Processes and responds to browser request for data

    The browser uses an HTTP or https url to request data from the server. the server can implement an HTTP response by choosing from the same technologies and frameworks used in Web applications. typically the browser Request Parameters des parameters, such as "Aja", and the server can use the request parameters to form a response. the server response data can be formatted in different ways, just like an HTTP response, and the server indicates the format by setting the "Content-Type" header. XML is a convenient response format for processing in the browser.

14. Browser updates display using data already ed from server

    In the Google suggest example, JavaScript code processes the response returned from the server and uses that data to display the list of suggestions shown in Figure 1.

16. User selects from the suggestions

    In this scenario, the next step is that the user selects from the list displayed in Step 7 or continues typing (as in step 3 ).

18. Browser processes the user's selection and submits the page

    Javascript processes the user's selection: It sets the text field to the selection, closes the display of suggestions, and then, if this is the last field on the form as it is in this simple scenario, submits the page via a standard HTTP request. if there are additional fields on the form, which is the typical case, JavaScript continues to process these fields. in fact, inputs into one component may very well cause side effects that change the presentation of other components on the same page, all without a complete page refresh.

20. Server responds to HTTP Request

    In the example, Google's server prepares a Web page with search results based on the user's selection.

22. Browser displays HTTP Response

    The search results page displays in the user's web browser. This is the last step in the scenario.

Let's quickly summarize the Ajax processing. the magic of Ajax begins when JavaScript running in the browser asynchronously requests data from a Web server based on the user's inputs. the server's response is then used to dynamically update portions of the web page. all of this happens without submitting the page.