Uploaded on


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Tetreault 1 Stephen Tetreault Professor Rancont Computer Theory 23 March 2008 The AJAX model: An Approach to a more pleasant web experience. Asynchronous JavaScript and XML (AJAX) is a term used to describe the use of different web tools and programming techniques that provide a more responsive and interactive web page. Currently, web pages are designed to be reloaded when requests are made of the server. A web page’s data sources are gathered into an HTML page format and displayed on the client system. Each time the client requests a new data source from the server the page is reloaded. Garrett defines the classic web application model as “most user actions in the interface trigger an HTTP request back to the server. The server does some processing- retrieving data, crunching numbers, talking to various legacy systems- and then returns an HTML page to the client” (1). Garret also notes that the AJAX model eliminates this stop go stop go interaction by providing an engine written in JavaScript to be downloaded from the server and to run in the background on the client say through the use of a hidden frame in the HTML code. This engine can now communicate with the server asynchronously without refreshing the page (2). The technologies used could be a combination of: HTML, Cascading Style Sheets, the XMLHttpRequest object, JavaScript and XML. By utilizing the newer web technologies available in the AJAX model into the design of the web page, these new web applications will give the user a more ‘real time interaction’ with the application and ultimately a more pleasant web experience.
  • 2. Tetreault 2 The term asynchronous means that data can be requested from the server and loaded down to the client without interfering with the user’s display. The user could be entering additional information on a form while the server handles a request at the same time. An example of this asynchronous communication is done through the use of the XMLHttpRequest object. This object can be accessed through languages like HTML and JavaScript. This object is what allows the scripting language to perform HTTP client functionality such as submitting form data or loading data from a server. The object is supported not only by XML, but, other formats like HTML and can be used by JavaScript and other web browser scripting languages. The object can also be used to make requests over HTTP and HTTPS. JavaScript originated at Netscape under the name of Mocha. The name was changed to JavaScript under a marketing deal with Sun and bundled in Netscape browser version 2 in late 1995. Microsoft followed suit with its version of the language called Jscript and supported in Internet Explorer version 3 in 1996. JavaScript supports the programming syntax of C which makes it very powerful. JavaScript is an interpreted language which means that each time the web page is loaded the source code is converted into an executable for that particular page display. In the book New Perspectives on HTML and XHTML Patrick Cary writes, “There is no need for a compiler to create the executable file; the browser must simply be able to interpret and run the JavaScript code. Unlike Java, JavaScript code can be inserted directly into an HTML or XHTML file or placed in a separate text file that is linked to the web page. This means that you or other users can easily read any JavaScript code that you write. JavaScript is not as powerful a computing language as Java, but it is simpler to use and it meets the needs of most users who want to create programmable web pages. (523).
  • 3. Tetreault 3 There is a library of available JavaScript objects or elements that have their own unique properties, methods and event handlers. There are subtle differences in how these objects function so it is advisable to test the code in several different browsers. I like to use Internet Explorer 7, Firefox, Netscape and Opera when testing my code from Dreamweaver. As was mentioned by Carey, the JavaScript code can be imbedded in the HTML code or in an external file and called when the page is loaded. This concept is similar to external stylesheets which means only one file has to be maintained for the page just like Cascading Style Sheets that are maintained separately from the web page. JavaScript also provides for program loops with the for and while commands and supports conditional statements like the if and switch commands. The AJAX architecture relies heavily on JavaScript. This could be an issue for the user if JavaScript support has been turned off in the browser. JavaScript provides the potential for crackers to submit scripts on client systems to run. Most JavaScript security issues relate to a violation of the same origin policy (Cross-site vulnerability) or sandbox. An example of the same origin policy is when a cracker applies a malicious script to a web page from a trusted site like a bank. The cracker is able to obtain personal account information and steal their identity. To avoid this, the user may have turned off JavaScript support. The sandbox exploit is an infraction of the rules by gaining privileges outside of the sandbox or guest area and accessing data and potentially delete files. Figure 1 contains a simple JavaScript program. <html> <head> <script type="text/javascript"> function displayAlert() { alert("This is an alert box!!"); } </script> </head> <body> <input type="button" onclick="displayAlert()" value="Display alert box" />
  • 4. Tetreault 4 </body> </html> Figure 1 Sample JavaScript code Source: W3Schools, “Where To Put The JavaScript” Refsnes Data. 10 April 2008. W3Schools gives a good overview of JavaScript. To insert JavaScript code into an HTML document the <script> element was used with a MIME type of ‘text/javascript’. If we were to insert script from an external file we would have used the url attribute. By placing the script element in the head we insure the script is executed when the page loads. If we want the user to trigger the event, then we place the event handler in the body. The onclick event handler was added to the input field and the event displayAlert will be called when the button is clicked (W3Schools). Figure 2 is an example of JavaScript using the XMLHttpRequest object. <head> <!-- Author: Bill Bercik Source: http://www.webpasties.com/xmlHttpRequest/index.html --> <title>ZIP Code to City and State using XmlHttpRequest</title> <script language="javascript" type="text/javascript"> var url = "getCityState.php?param="; // The server-side script function handleHttpResponse() { if (http.readyState == 4) { // Split the comma delimited response into an array results = http.responseText.split(","); document.getElementById('city').value = results[0]; document.getElementById('state').value = results[1]; } } function updateCityState() { var zipValue = document.getElementById("zip").value; http.open("GET", url + escape(zipValue), true); http.onreadystatechange = handleHttpResponse; http.send(null); } function getHTTPObject() { var xmlhttp; if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { try { xmlhttp = new XMLHttpRequest();
  • 5. Tetreault 5 } catch (e) { xmlhttp = false; } } return xmlhttp; } var http = getHTTPObject(); // We create the HTTP Object </script> </head> <body> <form action="post"> <p> ZIP code: <input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" /> </p> City: <input type="text" name="city" id="city" /> State: <input type="text" size="2" name="state" id="state" /> </form> </body> </html> Figure 2 Sample JavaScript using XMLHttpRequest Source: Bill Bercik “Guide to Using AJAX and XMLHttpRequest from WebPasties”, WebPasties Carlisle United Kingdom (2005): 2. Bill Bercik provides us with an example as shown in figure 2 of the use of the XMLHttpRequest object. The user has a web page loaded that contains 3 input boxes for zip code, city and state. Once the user has typed the zip code and leaves that field; an event is triggered to access a file that contains zip code, city and state. The city and state are returned to the user and rendered in the city state input boxes. This is a good example of how a web page can be designed using the Ajax approach and leave the web page intact and just change some of the content. The XMLHttpRequest object has properties and methods. One of its properties is onreadystatechange which is the event handler that runs the function handleHttpResponse. The method open was used to send a request to the server for the city and state.
  • 6. Tetreault 6 XML stands for Extensible Markup Language. The HTML language uses tag names with specific meaning to the language parser like the tag <table>. A tag name of <company> would have no meaning to this markup language and could even produce an error. XML does not have this strict definition and meaning of tags. Brett McLaughlin suggests that XML is not just a language, but, is part of a suite of tools. A popular design approach to XML is to separate content and presentation. Content would be the data that needs to be presented to the user and presentation which would include things like the company banner and lists of links. XML was designed to transport and store data. HTML was designed to display data (2). Is XML hype or real? If an application has to be developed that requires huge amounts of data from the server, XML is the way to go, but, XML is not for the faint-of-heart. Why did Bill Berclik write his code in figure 2 with HTML? The answer is because it was a simple task and he made a wise choice of tools to accomplish that task. XML makes use of a Document Type Definition file to validate your data. XML uses a Document Object Model to define access and control of the document. This added functionality for the designer adds an additional layer of complexity to the application. The designer needs to consider what data needs to be rendered and how much to the user and what tools are best for the job. In Bercliks example he is able to woo the user without incorporating any additional complexity by adding say XML to the application. He is able to bring that ‘real time interaction’ to the client and make the experience more pleasurable.
  • 7. Tetreault 7 Works Cited Carey, Patrick. New Perspectives on HTML and XHTML. Boston: Course Technology, 2005. Garrett, James. “AJAX: A New Approach to Web Applications.” Adaptive Path. 18 Feb 2005. 18 March 2008 <http://www.adaptivepath.com/ideas/essays/archives/000385.php>. McLaughlin, Brett. JAVA and XML. Sebastopol, CA.: O’Reilly & Associates, June 2000. W3Schools. “Where To Put The JavaScript.” Refsnes Data. 10 April 2008 <http://www.w3schools.com/js/js_whereto.asp>.