CakePHP and AJAX

CakePHP and AJAX - Talk at CakeFest Conference in Madrid 2014

Transcript

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

   View Slide

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
   

   View Slide

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

   View Slide

4. View Slide

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.
   

   View Slide

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

   View Slide

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

   View Slide

8. GET requests should be used only to
   retrieve data
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    }
    

    View Slide

14. 
    class="ajax-button"
    data-url="Html->url(array('action' => 'favorites', 'ext' => 'json'))?>">
    Click me
    
    
    
    Result:
    
    

    View Slide

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);
    }
    });
    });
    });
    

    View Slide

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
    

    View Slide

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

    View Slide

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'
    

    View Slide

19. Toggle
    Autocomplete
    Chained dropdowns
    Pagination
    

    View Slide

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

    View Slide

21. Questions?
    

    View Slide

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
    

    View Slide