Section A.1. 1: Ajax toolkits | Head Rush Ajax (Head First)

A.1. #1: Ajax toolkits

We've talked a few times about using an Ajax "toolkit" to handle repetitive tasks like creating a request object or sending a request. Once you understand how to write this code yourself, you may want to look into a few of these toolkits and see if they offer any functionality you might to take advantage of. Here are a few of the most popular toolkits:

You'll also see these toolkits referred to as "frameworks". Don't worry... it's all pretty much the same thing.

Prototype

 Where to get it: http://prototype.conio.net/ How to use it: <head> <title>The New and Improved Break Neck Pizza</title> <link rel="stylesheet" type="text/css" href="breakneck.css" /> <script type="text/javascript" src="/books/2/850/1/html/2/prototype.js"> </script> <script type="text/javascript" src="/books/2/850/1/html/2/pizza.js"> </script> Just reference the prototype.js file you download from the Prototype web site   in your HTML. </head>

Sending a request:

 var request = new Ajax.Request  ( Ajax.Request is the Prototype JavaScript class that handles Ajax requests. url, url is the URL to send the request to. { method: 'get', This can be either "get" or "post". parameters: 'phone=2142908762&name=Mary', Here are your name/value pairs that are sent to the server-side program. onSuccess: updatePage,Here's one of the nicer features of Prototype: you can set up separate functions to handle different response conditions. onFailure: reportError } Handling a response: function updatePage(request) { Prototype sends your callback functions the request object as a parameter, since the request object isn't set up as a global variable.  var response = request.responseText; You don't need to check the ready state and status code... Prototype does that for you, and if there's a problem, runs your onFailure callback. }

Dojo

Where to get it: http://dojotoolkit.org/

How to use it:

 <head> <title>The New and Improved Break Neck Pizza</title> <link rel="stylesheet" type="text/css" href="breakneck.css" /> <script type="text/javascript" src="/books/2/850/1/html/2/dojo.js"> </script> First, include the dojo. file you download from the Dojo website. <script type="text/javascript" src="/books/2/850/1/html/2/pizza.js"> </script> <script language="JavaScript" type="text/javascript"> dojo.requireIn static JavaScript, run dojo.require() on all the Dojo "packages" you want to use. ("dojo.io.bind  "); dojo.io.bind is the Dojo package that contains Ajaxrelated code and utilities. </script> </head>

Sending a request:

 var arguments = {It's usually easiest to put all the arguments you want to use with Dojo into a JavaScript data structure.     url: 'lookupCustomer.php', These arguments are similar to what you would use with Prototype.     method: 'GET',     content: 'phone=2142908762&name=Mary',     error: reportError,     load: updatePage }; dojo.io.bind(arguments);Once you've set up your arguments, run dojo.io.bind(), and pass it your arguments.

Handling a response:

 function updatePage(type, value, Dojo expects your callback functions to accept several parameters. The parameter named "value" is what you'll want most of the time... it contains the server's response. evt) { var response = value; }