01-12-2012, 11:23 AM
AJAX TECHNOLOGY
ajax.docx (Size: 354.04 KB / Downloads: 26)
INTRODUCTION
To create custom dynamic web applications a programmer must utilize Ajax. Ajax is a group of technologies that provide asynchronous two-way communication between a server and the web browser. Asynchronous communication allows the user to continue to browse the web page as sections of it are being loaded. This also allows the page to display new and updated information with out refreshing the page.Ajax development has exploded in recent years as companies have found customers prefer pages developed with it. ESPN uses Ajax extensively on their website to refresh scores and provide news headlines without the user having to update the page.
Creating an Ajax request requires three sections of code, the first section is writing in HTML, the second writing in JavaScript and the third is a server script writing PHP. Each section of code provides a different portion of the Ajax request, if the request is missing any of the sections it will fail. While Ajax is good for many scenarios a programmer must carefully examine its use to prevent problems from arising.
AJAX is a relatively new method to create rich internet applications with responsive interfaces that allow the designer to take a lot of the tedium out of using web-based mediums for day-to-day data interaction. The scope of this paper will be to provide information about what AJAX is and what it does, when it should and shouldn’t be used and what the future looks like for AJAX in comparison to the present and future alternatives. This will help developers determine the value of using AJAX in their projects and provide information about the proper use of this technology. This report will assume a basic knowledge with web forms and the design of web applications.
AJAX is an acronym for Asynchronous JavaScript and XML. It is not a technology in itself, but rather a suite of technologies. The combination of JavaScript and XML allows for a responsive user interface. It requires more development time than a traditional web solution; however a well-designed AJAX user interface makes the traditional form-based web application seem almost archaic.
What is AJAX and what does it do?
As mentioned in the introduction, AJAX is a suite of technologies used to create rich internet applications. It uses JavaScript to gather and show data to the user. It uses XML transmitted either in the XMLHTTPRequest or IFrame objects to communicate with the server. Together they allow the user to do a lot of things interactively with one web page. The diagram illustrates on which side of the data transaction XML and JavaScript function.
ORGINS OF AJAX
Even though Ajax wasn’t formally defined until February of 2005 the first Ajax type web application was released in 2000 by Microsoft for use with Outlook. Microsoft was looking to create a web based version of its popular email client that did not require the page to be refreshed to notify the user a new email had arrived. Microsoft created the XMLHttpRequest object which became the basis for Ajax traffic. The XMLHttpRequest allows a client computer to call a webpage in the background without interfering with the user. This type of transfer is called asynchronous because it passively waits for the server to respond. This is the first component in Ajax and is usually called thru JavaScript.
Using the XMLHttpRequest data can be gathered from the server. To update the webpage to show this new data Dynamic HTML must be used. Dynamic HTML uses CSS, HTML and JavaScript to rewrite sections of the webpage code at the browser instead of regenerating the page on the server.
AJAX EXAMPLE
A trivial example of Ajax is a name retrieval service. The script will suggest names matching the letters entered into the box without requiring the page to be refreshed. If the script was written without Ajax after each letter entered, the page would need to be refreshed. This would create excess load on the web server and be distracting to the user.
JAVASCRIPT CODE
The JavaScript code (clientthint.js) consists of three functions and a global variable. The global variable is defined as an XMLHttpRequest and is named xmlHttp. The xmlHttp can be defined with the following line of code var xmlHttp. The three functions are showHint, stateChanged and GetXmlHttpObject.
FUNCTION showHint()
The function showHint is the driver function of the JavaScript. The function takes the string inputted in the form and creates the request to the server. The function also tells the computer to call stateChanged when the request to the server has completed. Function showHint is shown in Code Sample 2. The first line of showHint defines the variable xmlHttp as an XmlHttpRequest by calling the GetXMLHttpObject function. The second line defines a variable named url which contains the location of the server side script. Url is also defined with two parameters q and sid. The q parameter represents the string being sent to the server, the sid parameter is used only to make each request unique.If the sid parameter was not given the web browser may not call the server script and use a cached copy instead.