Introduzione a jQuery per sviluppatori PHP

jQuery è un argomento abbastanza alieno rispetto ai normali interessi di uno sviluppatore PHP. Lavorando con PHP si impara a stare a stretto contatto con l'ambiente server, e quindi quello che accade sul client a volte risulta di difficile comprensione. Per esempio, uno sviluppatore PHP trova incomprensibile il fatto che il codice CSS e JavaScript scritto in modo standard funzioni in maniera diversa sui vari browser (o non funzioni affatto). Se pensiamo soprattutto a JavaScript, le differenze sono ancora più stridenti. Ma se usiamo jQuery, allora riusciamo ad appianare queste differenze e a lavorare in modo cross-browser. Scopo di questo articolo è mostrare agli sviluppatori PHP quelle caratteristiche che avvicinano due mondi apparentemente così distanti.

Lavorare con il DOM

Gli sviluppatori PHP conoscono bene l'estensione DOM di PHP. Questa estensione è in effetti l'implementazione (allo stato attuale) delle specifiche DOM Level 1 e 2. Per selezionare una NodeList di elementi di una pagina, in PHP usiamo il seguente codice:

$dom = new DOMDocument;
$dom->loadHTMLFile('test.html');

$p = $dom->getElementsByTagName('p');

In JavaScript la procedura è molto simile:

var p = document.getElementsByTagName('p');

Il problema è che i metodi del DOM sono piuttosto lunghi e bisogna digitare parecchio codice. jQuery risolve il problema così:

$('p')

Come è possibile che si è ridotto il codice in modo così sensibile? Sicuramente in PHP conoscerete XPath, disponibile sia per l'estensione DOM che per altre estensioni. Bene, jQuery usa un selector engine che trasforma un'espressione CSS con i selettori in una selezione diretta nel DOM. Tutto questo potente engine è racchiuso nel wrapper $() che è un alias per jQuery() e la sua implementazione interna è molto simile a quella di XPath.

Con questo wrapper si può accedere a qualsiasi parte, nodo o struttura del documento, esattamente come con XPath. A questo punto si potrebbe pensare che questo wrapper funziona solo con i documenti HTML. In realtà funziona anche con quelli XML:

var $p = $(xml).find('p');

In questo caso jQuery lavora con un oggetto di tipo DOMDocument reperito tramite AJAX e conservato nella variabile xml. Ricordiamo che per il DOM la differenza tra HTML e XML è limitata al tipo di interfacce e nodi disponibili, non all'oggetto originario.

AJAX

Gli sviluppatori PHP che hanno avuto a che fare con AJAX sono abituati a fare in modo che il framework in uso restituisca al client dei dati in vari formati, come ad esempio XML e JSON. Ma cosa accade nel client? Accade questo: l'URL di riferimento in cui vengono restituiti i dati viene aperto dal browser, si effettua il parsing dei dati ed in base a tali dati ed al loro tipo il browser crea a volte un oggetto (come nel caso di XML, HTML o JSON) o una stringa (come nel caso del testo semplice).

Quello che il browser ha, alla fine, è soprattutto un oggetto. Se l'oggetto è XML, allora si possono usare i metodi del DOM accennati poc'anzi, se invece è JSON si deve accedere alle proprietà dell'oggetto.

jQuery ha vari metodi per gestire AJAX. Per JSON si ha:

var url = 'http://api.sito.com/feed.json?callback=';

$.getJSON(url, function(data) {

  // ...


});

In questo caso, data è l'oggetto JSON, che potrebbe avere questa forma, creata con la funzione PHP json_encode():

{
  "a": "Test",
  "b": "Foo"
  
}

E per accedere a queste proprietà si userà il seguente codice:

var url = 'http://api.sito.com/feed.json?callback=';

$.getJSON(url, function(data) {

  var a = data.a;
  var b = data.b;


});

Ma il metodo più potente nell'arsenale AJAX di jQuery è sicuramente $.ajax(). Con questo metodo si può ad esempio effettuare il parsing di un documento XML:

$.ajax({
  url: 'script.php',
  type: 'GET',
  dataType: 'xml',
  data: null,
  success: function(xml) {
  
    // ...
    
  }
});

In questo caso, xml è l'oggetto di tipo DOMDocument, che potrebbe avere questa forma, creata con l'estensione DOM di PHP:

<?xml version="1.0" encoding="utf-8"?>
<library>

  <book>
    <title>...</title>
    <author>...</author>
  </book>
  
  <!-- altri elementi book -->

</library>

Per effettuarne il parsing avremo:

$.ajax({
  url: 'script.php',
  type: 'GET',
  dataType: 'xml',
  data: null,
  success: function(xml) {
  
    var books = $(xml).find('book');
    
    $(books).each(function() {
    
      var $book = $(this);
      var title = $book.find('title').text();
      var author = $book.find('author').text();
      
      //... continua
    
    
    });
    
  }
});

Come si può notare, jQuery rende semplici operazioni complesse. Questo è il suo segreto.