CakePHP and AJAX - Talk at CakeFest Conference in Madrid 2014

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