$30 off During Our Annual Pro Sale. View Details »

CakePHP and AJAX

Mark Sch.
August 23, 2014

CakePHP and AJAX

CakePHP and AJAX - Talk at CakeFest Conference in Madrid 2014

Mark Sch.

August 23, 2014
Tweet

More Decks by Mark Sch.

Other Decks in Programming

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