New Post has been published on http://www.ismailkeles.info/hello-ajax-world.html
Hello Ajax World
Traditional Web applications tend to follow the pattern shown in Figure 1-1. First a page is loaded. Next the user performs some action such as filling out a form or clicking a link. The user activity is then submitted to a server-side program for processing while the user waits, until finally a result is sent, which reloads the entire page.
Ajax-style applications use a significantly different model where user actions trigger behind the scenes communication to the server fetching just the data needed to update the page in response to the submitted actions. This process generally happens asynchronously, thus allowing the user to perform other actions within the browser while data is returned. Only the relevant portion of the page is repainted, as illustrated in Figure 1-2.
Beyond this basic overview, the specifics of how an Ajax-style Web application is implemented can be somewhat variable. Typically JavaScript invokes communication to the server, often using the XMLHttpRequest(XHR) object. Alternatively, other techniques such as inline frames, <script>tag fetching remote .js files, image requests, or even the Flash player are used. After receiving a request, a server-side program may generate a response in XML, but very often you see alternate formats such as plain text, HTML fragments, or JavaScript Object Notation (JSON) being passed back to the browser. Consumption of the received content is typically performed using JavaScript in conjunction with Document Object Model (DOM) methods, though in some rare cases you see native XML facilities in the browser used. A graphic description of the wide variety of choices in implementing an Ajax-style Web application is shown in Figure 1-3.
Hello Ajax World
With the basic concepts out of the way, like any good programming book we now jump right into coding with the ubiquitous “Hello World” example. In this version of the classic example, we will press a button and trigger an asynchronous communication request using an XMLHttpRequest(XHR) object and the Web server will issue an XML response which will be parsed and displayed in the page. The whole process is overviewed in Figure 1-4. To trigger the action, a simple form button is used which, when clicked, calls a custom JavaScript function sendRequest()that will start the asynchronous communication. It might be tempting to just bind in a JavaScript call into an event handler attribute like so:
<form action=”#”> <input type=”button” value=”Say Hello” onclick=”sendRequest();” /> </form>
However, it is a much better idea to simply use name or id attributes for the form fields or other tags that trigger activity:
<form action=”#”> <input type=”button” value=”Say Hello” id=”helloButton” /> </form>
and then bind the onclickevent using JavaScript like so:
window.onload = function () document.getElementById(“helloButton”).onclick = sendRequest; ;
Before moving on, you might want to call our test URL directly in your browser. It should return an XML response with a message indicating your IP address and the local time on the server, as shown in Figure 1-5.
Eventually, the server should receive the request and invoke the simple sayhello.php program shown here.
<?php header(“Cache-Control: no-cache”); header(“Pragma: no-cache”); header(“Content-Type: text/xml”); $ip = $_SERVER['REMOTE_ADDR']; $msg = “Hello World to user from ” . $ip . ” at “. date(“h:i:s A”); print “<?xml version=’1.0′ encoding=’UTF-8′?>”; print “<message>$msg</message>”; ?>
The Rise of Ajax
The name Ajax is new, but the ideas behind it are not. The term was first coined by Jesse James Garrett in an article written in February 2005. However, undoubtedly Jesse would be the first to acknowledge that the idea of Ajax goes back much farther than his application of the new moniker. Microsoft first added the XHR ActiveX object to Internet Explorer 5 in 1999 in support of Outlook Web Access. Numerous developers from around the same time used a variety of techniques such as hidden inline frames to create Web applications that follow what looks like the Ajax pattern. It enjoyed names like “remote scripting,” “innerbrowsing” (courtesy of Netscape), and “Rich Internet Applications (RIAs)” (from Macromedia and others). However, whatever it was called, for some reason this approach to Web development did not really excite most Web professionals.
Why this technology was ignored for years suddenly to be rediscovered is cause for great speculation and debate. Very likely, conservative industry conditions stemming from the dotcom meltdown around the turn of the century slowed adoption, but what changed this is less clear. It is the author’s opinion that Google’s Gmail, Yahoo’s purchase of Ajax pioneer Oddpost, and Microsoft’s Outlook Web Access for Exchange 2000 demonstrated to the world that a JavaScript-based Web application using partial page updates really could work for a large scale, public facing, mission critical application, in these particular cases, Web based e-mail. The introduction of other rich Web applications such as Google Maps helped to demonstrate this to be a viable design pattern for arbitrary applications. Once the pattern was successfully demonstrated multiple times, add in appropriate hype and chatter from the blogging classes and the rest, as they say, is history.
Summary Ajax (Asynchronous JavaScript and XML) is more than an acronym; it is a whole new way to approach Web application design. By sending data behind the scenes using JavaScript, typically in conjunction with the XMLHttpRequestobject, you can get data incrementally and make partial page updates rather than redrawing the whole window. When applied properly, the effect of Ajax can be wondrous to users producing Web applications that begin to rival desktop software applications in terms of richness and responsiveness. However, Ajax is often misunderstood and misapplied and is not nearly as new and unique as some might have you believe. The next chapter will show that there is in fact a multitude of ways to accomplish Ajax like magic with JavaScript.