Introduction Ajax, or AJAX, is a web development technique used for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page's interactivity, speed, functionality, and usability. Conventional JavaScript for Ajax would look something like Form validation with PHP & JavaScript. Plus, you'll have to check for browser compatibility, you'll have to code for error handling. Prototype.js How easy would it been if there was some API or something similar?? Well, we're lucky to have prototype.js. The Prototype JavaScript Framework is a JavaScript framework that provides an Ajax framework and other utilities. Though available as a standalone library, Ruby on Rails integrates the framework as well as other projects such as script.aculo.us and Rico. You can download it from http://www.prototypejs.org/ Easier Ajax Coding An Example: Code: var url = '/proxy?url=' + encodeURIComponent('http://www.google.com/search?q=Prototype'); // notice the use of a proxy to circumvent the Same Origin Policy. new Ajax.Request(url, { method: 'get', onSuccess: function(transport) { var notice = $('notice'); if (transport.responseText.match(/href="http:\/\/prototypejs.org/)) notice.update('Yeah! You are in the Top 10!').setStyle({ background: '#dfd' }); else notice.update('Damn! You are beyond #10...').setStyle({ background: '#fdd' }); } }); You can access the Protoype.js API documentation online; for Ajax at http://www.prototypejs.org/api/ajax/request A Simple Implementation We'll create a HTML page, where when you input a number it'll fetch the number in words using Ajax. The PHP script which returns the number in words uses the PEAR package Number_Words (http://pear.php.net/package/Numbers_Words) to generate the number in words. The HTML: HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Ajax Made Easier With Prototype.js</TITLE> <META NAME="Author" CONTENT="S Pradeep"> <META NAME="Keywords" CONTENT="ajax,php,web programming,prototype.js,JavaScript"> <META NAME="Description" CONTENT="Ajax Made Easier With Prototype.js"> <script language='JavaScript' src='../resources/prototype.js'></script> <style> .msg-box { border:#666 1px solid; background:#eee; text-align:center; } </style> <script language='JavaScript'> // Let's write the JavaScript // The form submit handler Event.observe(window,'load',function(e) { Event.observe(document.forms[0],'submit',handleSubmit); // element to observer,event,callback function }); function handleSubmit(evt) { var frm = Event.element(evt); var elements = frm.elements; // Let's do some validation here if(!elements['number'].present()) { alert('Please enter a number') elements['number'].activate(); // give focus to the number text field Event.stop(evt); // Stop the form from submitting return; } else if(isNaN(elements['number'].value)) // check whether the value entered is a number or not { alert('Please enter a valid number') elements['number'].activate().clear(); // give focus to the number text field Event.stop(evt); // Stop the form from submitting return; } $('MsgBox').hide(); // All ok, let's fire away the Ajax var url = 'number_to_words.php?number='+elements['number'].value; new Ajax.Request(url,{ method: 'get', onLoading: function(transport) { $('MsgBox').show().update('Fetching Data ...'); }, onSuccess: function(transport) { var dr = transport.responseXML.documentElement; var s = dr.getElementsByTagName('resultCode')[0].firstChild.data; var m = dr.getElementsByTagName('msg')[0].firstChild.data; if(s == 1) // success { $('MsgBox').show().update(m); } else // error $('MsgBox').show().update(m); }, onFailure: function(transport) { // when the request fails alert('The request failed'); }, onException: function(err) { // When an exception is encountered while executing the callbacks alert('Exception'); } }); Event.stop(evt); } </script> </HEAD> <BODY> <div class='msg-box'>Enter a number, Ajax will be used to fetch the number in words and display it here.</div> <br> <form id='NumForm'> <fieldset> <legend>Number To Words</legend> <table border=0> <tr><td>Enter Number</td><td><input type="text" name="number"></td></tr> <tr><td> </td><td><input type="submit" name="bt" value="Get number in words"></td></tr> </table> </fieldset> <br> <div class='msg-box' style="display:none" id="MsgBox"></div> </BODY> </HTML> PHP Script: number_to_words.php PHP: <? /* ** @file: number_to_words.php ** @author: S Pradeep ** @version: 0.9 ** @dependencies: Pear package Numbers_Words */ require_once('Numbers/Words.php'); ob_start(); // Start output buffering if(!empty($_GET['number'])) { $number = $_GET['number']; if(!is_int($number)) // check whether we have an integer to work on { $nw = new Numbers_Words(); // create an instance of the Pear package Numbers_Words $text = $nw->toWords($number); // send back the number in words _sendResponse(1,$text); } else // send an error { _sendResponse(0,'Error: Datatype Mismatch'); } } // Default response _sendResponse(0,'Error: Parameter Missing'); function _sendResponse($code,$msg) { ob_clean(); // clear the contents of the output buffer // The page shouldn't by cached by the browser or proxy header('Cache-Control: no-cache, no-store, must-revalidate'); header('Pragma: no-cache'); header('Content-Type: text/xml'); // set the content type to XML printf('<root><resultCode>%d</resultCode><msg>%s</msg></root>',$code,$msg); exit(0); } ?> View the live, completed example here Ajax Made Easier - Working sample
