CakePHP and AJAX

  • 1,899 views
Uploaded on

CakePHP and AJAX - Talk at CakeFest Conference in Madrid 2014

CakePHP and AJAX - Talk at CakeFest Conference in Madrid 2014

More in: Software
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,899
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
54
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