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 (get data from database and return to client)
Let's get started! We'll work backwards from the server-side to the client-side.
Step 3
<?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;
}
}
Step 2
We don't really want to type a load of JavaScript, since there are plenty of existing libraries available on the net (and this module is all about reusing code, right?).
You may have heard of jquery or the Prototype library. For 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
Let's design the page (or view) the user will be interacting with.
<!-- 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>
