This document summarizes a presentation about using AJAX with CakePHP. It discusses what AJAX is and when to use it, basic AJAX concepts and examples using GET and POST requests. It also covers AJAX-specific topics like SEO, browser history, and the same-origin policy. The document provides code examples for AJAX actions, passing data, and testing AJAX requests. Additional resources are listed at the end.

1. CakeFest Conference 2014 - Mark Scherer (@dereuromark)

2. Using CakePHP for 6+ years (starting with 1.2)
Core Developer since 2+ years
Active blogger about CakePHP issues and solutions
Germany (Berlin)
Passionate PHP and Open Source Developer

3. What is AJAX
When to use it
Basics
Using GET
Using POST
More examples
Tips

5. Load the whole page once.
Then fetch only parts or tiny snippets of
updates via follow-up requests.
Only needs a fraction of the
resource/bandwith.

6. Data exchange without changing position
Inline editing
Real time validation
Native look and feel
Pre-fetching
Data lookups
...

7. SEO / Crawling
Browser History
Bookmarking
Network issues
Polling
Same Origin Policy

8. GET requests should be used only to
retrieve data

9. /controller/action
text/html
/controller/action.json
application/json
URL should match the expected format

10. // Config/routes.php
Router::parseExtensions();
Router::setExtensions(array('json', 'xml', 'csv', 'rss', 'pdf'));
// AppController.php
public $components = array('RequestHandler');

11. if ($this->request->is(array('ajax'))) {}
$this->request->allowMethod('ajax');

12. /**
* AJAX action to get favorites
*
* @return string
*/
public function favorites() {
$this->autoRender = false; // We don't render a view in this example
$this->request->allowMethod(array('ajax')); // No direct access via browser URL
$data = array(
'content' => ...,
'error' => '',
);
$this->response->body(json_encode($data));
}
GET /controller_name/favorites.json

13. /**
* AJAX action to get favorites
*
* @return void
*/
public function favorites() {
$this->request->allowMethod(array('ajax')); // No direct access via browser URL
$data = array(
'content' => ...,
'error' => '',
);
$this->set(compact('data')); // Pass $data to the view
$this->set('_serialize', 'data'); // Let the JsonView class know what variable to use
}

14. <p>
<button
class="ajax-button"
data-url="<?php echo $this->Html->url(array('action' => 'favorites', 'ext' => 'json'))?>">
Click me
</button>
</p>
<p>
Result: <span id="target"></span>
</p>

15. $(function() {
$('.ajax-button').click(function(e) {
var targeturl = $(this).data('url');
$.ajax({
type: "get",
url: targeturl,
beforeSend: function(xhr) {
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
},
success: function(res) {
if (res.error != '') {
alert(res.error);
} else {
$('#target').html(res.content);
}
},
error: function(e) {
alert("Fehler bei der Anfrage!");
console.log(e);
}
});
});
});

16. $_ENV['HTTP_X_REQUESTED_WITH'] = 'XMLHttpRequest';
$url = Router::url(array(
'controller' => 'controller_name', 'action' => 'favorites', 'ext' => 'json',
'?' => array('id' => 2)
));
$options = array(
'return' => 'vars'
);
$result = $this->testAction($url, $options);
...
Makes sure $this->request->allowMethod(array('ajax')); passes

17. ...
data: {'one' : $('#one').val(), 'two' : $('#two').val()},
...
$one = $this->request->data('one');
$two = $this->request->data('two');

18. $_ENV['HTTP_X_REQUESTED_WITH'] = 'XMLHttpRequest';
$url = Router::url(array(
'controller' => 'controller_name', 'action' => 'favorites', 'ext' => 'json',
'?' => array('id' => 2)
));
$options = array(
'data' => array(...),
'method' => 'post'
'return' => 'vars'
);
$result = $this->testAction($url, $options);
...
'data' array with method type 'post'

19. Toggle
Autocomplete
Chained dropdowns
Pagination

20. // AppController.php - e.g. in beforeRender()
if ($this->request->is('ajax')) {
$this->response->disableCache();
}

21. Questions?

22. http://book.cakephp.org
https://github.com/dereuromark/cakefest2014-app
http://sandbox.dereuromark.de/sandbox/ajax_examples
http://sandbox.dereuromark.de/sandbox/jquery_examples/
autocomplete
http://www.dereuromark.de/2014/01/09/ajax-and-
cakephp/
https://github.com/dereuromark/tools