Web Frameworks - Workbook - Week 08
Main Page >> Web Frameworks >> Workbook >> Workshop - week 08
Ajax: Increased responsiveness and interactivity of web pages is achieved 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 there is a need to fetch data from the server. (Wikipedia.org)
As explained in class, it works like this:
- The user interacts with the page and triggers an event.
- JavaScript code sends a request to the server, and handles the response.
- Some server-side code handles the request (i.e. gets data from database and returns it to the client)
Let's get started! We'll work backwards from the server-side to the client-side.
Step 3
First, let's create the controller that will handle our Ajax request:
zf.sh create controller ajax
Edit the controller and add the following code:
<?php
// application/controllers/AjaxController.php
class AjaxController extends Zend_Controller_Action
{
public function indexAction()
{
// In our example this action doesn't do anything
// The view simply gets displayed
}
public function dataAction()
{
// This function returns the Ajax data
// Disable default view and layout.
// We only need this action to return the raw data.
$this->_helper->layout()->disableLayout();
$this->_helper->viewRenderer->setNoRender(true);
// Get Ajax data from somewhere (model, web service, etc.)
$data = "Some test data";
// Display data
echo $data;
}
}
The comments in the code are pretty self-explanatory. The important thing to understand is that the "data" action is the one selecting the data from the database and returning it to the client-side. Amend it so it gets the data YOU need (from your database, from a web feed, from a web service etc.)
Step 2
Next, let's write the client-side code that calls our controller above.
We don't really want to type a load of JavaScript, since there are plenty of existing libraries available on the web (and this module is all about reusing code, right?).
You may have heard of jquery, or of the Prototype library. In this example we'll use the latter.
"Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere." (source)
Download the file from here, and save it to public/scripts as prototype.js.
Then add a link to it in your layout, by adding the following line in your <HEAD> section:
echo $this->headScript()->prependFile($this->baseUrl('/scripts/prototype.js'));
Step 1
Finally, let's design the page (or view) the user will be interacting with:
- It features a button that when clicked calls a callAjax() function.
- The callAjax() function creates an Ajax object, sends a request, and specifies the function that will handle the response (or "callback" function), handleResponse() in our case.
- When the response comes back, handleResponse() simply insert the data coming back in a div of our choice.
<!-- application/views/scripts/ajax/index.phtml -->
<script type="text/javascript">
// Creates an Ajax object, sends a request,
// and registers the callback function 'handleResponse'
function callAjax()
{
// Send Ajax request to "ajax" controller / "data" action
var myAjax = new Ajax.Request('<?=$this->baseUrl('ajax/data')?>',
{
method: 'get',
onComplete: handleResponse
});
}
// This is the function that handles the response
// It simply puts the response text in a div
function handleResponse(transport)
{
$('dataGoesHere').innerHTML = transport.responseText;
}
</script>
<!-- This button simply calls callAjax() -->
<input type="button" name="clickMe" value="Click me!" onclick="callAjax()"/>
<!-- The div where our Ajax data will appear! -->
<div id='dataGoesHere'>Our Ajax data will go here.</div>
All done!
Checkpoint
Now when accessing quickstart/public/ajax/, you should see:
And when pressing the button:
Common mistakes
How many times have I heard "Aliiiiix, nothing is happening!" when Ajax is involved. Indeed it is not always clear why things aren't working. Please work with Firefox, its Error Console can give you very helpful error messages (see "Tools" menu).
If nothing happens when you click the button:
- Make sure that your link to the javascript file is valid (see step 2). Here is how: browse to your Ajax page (public/ajax/), right-click on the page and choose "View Page Source". You should have a line in your <head> section that points to your JavaScript file. Make sure it is valid by clicking it (this only works in Firefox). Does it take you to the file?
- Also check that the path passed as a parameter to the Ajax.Request() function is valid (see step 1). It should point to a working controller... if you paste the URL in your address bar, do you get your Ajax data?
