Your SlideShare is downloading. ×
0
CakeFest	Conference	2014	-	Mark	Scherer	(@dereuromark)
Using	CakePHP	for	6+	years	(starting	with	1.2)
Core	Developer	since	2+	years
Active	blogger	about	CakePHP	issues	and	solut...
What	is	AJAX
When	to	use	it
Basics
Using	GET
Using	POST
More	examples
Tips
Load	the	whole	page	once.
Then	fetch	only	parts	or	tiny	snippets	of
updates	via	follow-up	requests.
Only	needs	a	fraction	...
Data	exchange	without	changing	position
Inline	editing
Real	time	validation
Native	look	and	feel
Pre-fetching
Data	lookups...
SEO	/	Crawling
Browser	History
Bookmarking
Network	issues
Polling
Same	Origin	Policy
GET	requests	should	be	used	only	to
retrieve	data
/controller/action
				text/html
/controller/action.json
				application/json
URL	should	match	the	expected	format
//	Config/routes.php
Router::parseExtensions();
Router::setExtensions(array('json',	'xml',	'csv',	'rss',	'pdf'));
//	AppCo...
if	($this->request->is(array('ajax')))	{}
$this->request->allowMethod('ajax');
/**
	*	AJAX	action	to	get	favorites
	*
	*	@return	string
	*/
public	function	favorites()	{
				$this->autoRender	=	false;	...
/**
	*	AJAX	action	to	get	favorites
	*
	*	@return	void
	*/
public	function	favorites()	{
				$this->request->allowMethod(a...
<p>
<button	
				class="ajax-button"	
				data-url="<?php	echo	$this->Html->url(array('action'	=>	'favorites',	'ext'	=>	'j...
$(function()	{
				$('.ajax-button').click(function(e)	{
								var	targeturl	=	$(this).data('url');
								$.ajax({
			...
$_ENV['HTTP_X_REQUESTED_WITH']	=	'XMLHttpRequest';
$url	=	Router::url(array(
								'controller'	=>	'controller_name',	'a...
...
data:	{'one'	:	$('#one').val(),	'two'	:	$('#two').val()},
...
$one	=	$this->request->data('one');
$two	=	$this->reques...
$_ENV['HTTP_X_REQUESTED_WITH']	=	'XMLHttpRequest';
$url	=	Router::url(array(
								'controller'	=>	'controller_name',	'a...
Toggle
Autocomplete
Chained	dropdowns
Pagination
//	AppController.php	-	e.g.	in	beforeRender()
if	($this->request->is('ajax'))	{
				$this->response->disableCache();
}
Questions?
http://book.cakephp.org
https://github.com/dereuromark/cakefest2014-app
http://sandbox.dereuromark.de/sandbox/ajax_example...
CakePHP and AJAX
Upcoming SlideShare
Loading in...5
×

CakePHP and AJAX

3,458

Published on

CakePHP and AJAX - Talk at CakeFest Conference in Madrid 2014

Published in: Software
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,458
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
96
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "CakePHP and AJAX"

  1. 1. CakeFest Conference 2014 - Mark Scherer (@dereuromark)
  2. 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. 3. What is AJAX When to use it Basics Using GET Using POST More examples Tips
  4. 4. 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.
  5. 5. Data exchange without changing position Inline editing Real time validation Native look and feel Pre-fetching Data lookups ...
  6. 6. SEO / Crawling Browser History Bookmarking Network issues Polling Same Origin Policy
  7. 7. GET requests should be used only to retrieve data
  8. 8. /controller/action text/html /controller/action.json application/json URL should match the expected format
  9. 9. // Config/routes.php Router::parseExtensions(); Router::setExtensions(array('json', 'xml', 'csv', 'rss', 'pdf')); // AppController.php public $components = array('RequestHandler');
  10. 10. if ($this->request->is(array('ajax'))) {} $this->request->allowMethod('ajax');
  11. 11. /** * 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
  12. 12. /** * 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 }
  13. 13. <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>
  14. 14. $(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); } }); }); });
  15. 15. $_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
  16. 16. ... data: {'one' : $('#one').val(), 'two' : $('#two').val()}, ... $one = $this->request->data('one'); $two = $this->request->data('two');
  17. 17. $_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'
  18. 18. Toggle Autocomplete Chained dropdowns Pagination
  19. 19. // AppController.php - e.g. in beforeRender() if ($this->request->is('ajax')) { $this->response->disableCache(); }
  20. 20. Questions?
  21. 21. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×