| Gellenbeck | Wikis | CS 352 | CS 352 Wiki |

Notes Index

Prototype Ajax Library

As previously mentioned, one popular library of Ajax JavaScript methods used by PHP programmers is Prototype written by Sam Stephenson.

There is no shortage of documentation and tutorials on Prototype.

• Prototype API Documentation
• Prototype Tips and Tutorials
• Developer Notes for prototype.js provides detailed documentation on using Prototype in your applications.
• Easy Ajax with Prototype provides the code for a very simple demonstration project.
• Quick Guide to Prototype

Exercise 1 - Using Prototype

1. Download the latest Prototype library and save it as prototype.js in your u:\htdocs folder
2. Start up HTML-Kit, create a new XHTML document, and save it as u:\htdocs\Day17\Day17.html
3. In the head section of the Day17.html document, place the following JavaScript code

In the body of the page add the following HTML code

Start up the Abyss Web Server view your Day17.html page in the browser

Event.observe method

Rather than intermixing the presentation view and the controller view, it is generally preferred to keep these two layers separate.

Prototype provides an easy way to register event handlers with events using the Event.observe method

Prototype Utility Methods

Prototype provides a number of utility methods. They are convenient in that they save typing.

• $ method is a shortcut replacement for the document.getElementById("myID") function of the DOM. Given the element "id", it returns a reference to the element.
• $F returns the value of a form control, given the element "id"

Using the $ Prototype method

Test your Day17.html page in the browser.

The $ function can also accept a comma-delimited list of ids and it returns an array of element references.

Using the $F Prototype method

Add the event handler to the init method and test your Day17.html page in the browser.

Using Ajax.Request Asynchronous Calls with PHP

Prototype abstracts away many of the details of the XMLHttpRequest call to the server with the Ajax.Request method

XML data source

Imagine xyz company sales by employee are stored in the Day17.xml file

Generating Dynamic HTML Data

We could add a drop-down list to our web page for the user to select an employee name and see their sales data

We could then add a JavaScript GetSalesById function to produce an Ajax request that gets the sales data and displays it in the result paragraph

We need register the change event for the Employees select element.

Finally, we need register the change eventto add the Day17.php page to actually read in the Day17.xml file and return the requested employee's sales data

Ajax.Updater

In the previous example, since all we did with the response text was to update a page element, we could substitute the Ajax.Request class with Ajax.Updater and dispense with the callback method showResponse

  var myAjax = new Ajax.Updater('result', url, {method: 'get', parameters: {empID: employeeId}});

Ajax.PeriodicalUpdater Class

The Ajax.PeriodicalUpdater class can be used to repeatedly create an Ajax.Updater instance, updating an element automatically after a certain time interval has elapsed.

For example, we could create a stock market ticker that updates every three seconds with

  var myAjax = new Ajax.PeriodicalUpdater('price', 'rand.php', {method: 'post', frequency: 3.0, decay: 1});

A simple PHP page to create a dummy stock market price is

 <?php
 $price = 50 + rand(0,5000)/100;
 echo "$price";
 ?>

DHTML based on Prototype

Many others have build JavaScript libraries that use Prototype to create DHTML effects on your Web pages.

• script.aculo.us
• Prototip
• Prototype Window
• moo.fx