Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   Ajax Made Easier With Prototype.js (http://www.go4expert.com/articles/ajax-easier-prototypejs-t5541/)

pradeep 30Jul2007 10:18

Ajax Made Easier With Prototype.js


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.


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: JavaScript

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' });
       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.

Code: HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <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>
     border:#666 1px solid;
 <script language='JavaScript'>
 // Let's write the JavaScript
 // The form submit handler
     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
         alert('Please enter a number')
         elements['number'].activate(); // give focus to the number text field
         Event.stop(evt); // Stop the form from submitting
     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
     // 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
         else // error
     onFailure: function(transport)
         // when the request fails
         alert('The request failed');
     onException: function(err)
         // When an exception is encountered while executing the callbacks
 <div class='msg-box'>Enter a number, Ajax will be used to fetch the number in words and display it here.</div>
 <form id='NumForm'>
     <legend>Number To Words</legend>
     <table border=0>
     <tr><td>Enter Number</td><td><input type="text" name="number"></td></tr>
     <tr><td>&nbsp;</td><td><input type="submit" name="bt" value="Get number in words"></td></tr>
     <div class='msg-box' style="display:none" id="MsgBox"></div>

PHP Script: number_to_words.php
Code: PHP

 **    @file: number_to_words.php
 **    @author: S Pradeep
 **    @version: 0.9
 **    @dependencies: Pear package Numbers_Words

 ob_start(); // Start output buffering
     $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
     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

View the live, completed example here Ajax Made Easier - Working sample

Full Zip Hoody 30Sep2010 01:40

Re: Ajax Made Easier With Prototype.js
well instead of an API this Prototype.js is good stuff.. not better but good instead of.

All times are GMT +5.5. The time now is 05:59.