Your SlideShare is downloading. ×
0
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
CakePHP and AJAX
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CakePHP and AJAX

3,246

Published on

CakePHP and AJAX - Talk at CakeFest Conference in Madrid 2014

CakePHP and AJAX - Talk at CakeFest Conference in Madrid 2014

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

No Downloads
Views
Total Views
3,246
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
93
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 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. Data exchange without changing position Inline editing Real time validation Native look and feel Pre-fetching Data lookups ...
  • 6. SEO / Crawling Browser History Bookmarking Network issues Polling Same Origin Policy
  • 7. GET requests should be used only to retrieve data
  • 8. /controller/action text/html /controller/action.json application/json URL should match the expected format
  • 9. // Config/routes.php Router::parseExtensions(); Router::setExtensions(array('json', 'xml', 'csv', 'rss', 'pdf')); // AppController.php public $components = array('RequestHandler');
  • 10. if ($this->request->is(array('ajax'))) {} $this->request->allowMethod('ajax');
  • 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. /** * 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. <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. $(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. $_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. ... data: {'one' : $('#one').val(), 'two' : $('#two').val()}, ... $one = $this->request->data('one'); $two = $this->request->data('two');
  • 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. Toggle Autocomplete Chained dropdowns Pagination
  • 19. // AppController.php - e.g. in beforeRender() if ($this->request->is('ajax')) { $this->response->disableCache(); }
  • 20. Questions?
  • 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

×