Passare a Php variabili Javascript con Ajax

Sto iniziando un bell'infogno: lo sviluppo di siti ultradinamici con l'ausilio di AJAX (Asynchronous Javascript And XML ovvero Javascript asincrono e XML), un insieme di diverse tecnologie Web (Javascript, un linguaggio lato server quale PHP, XML ed XSLT etc…) che permette di effettuare chiamate al server senza che si debba ricaricare la pagina interamente.
Una cosa che forse non tutti sanno è il modo in cui si possono passare al server alcune variabili ricavabili con Javascript ma non con linguaggi server side, come la risoluzione dello schermo oppure la grandezza in pixel di un certo elemento della pagina. In questo articolo spiegherò come passare al server la risoluzione dello schermo, ma il procedimento resta valido anche per altre variabili.
La soluzione si ottiene ad esempio usando le sessioni PHP e Ajax. Supponiamo di avere due pagine: una index.php e una backAjax.php. La pagina index.php fa partire la sessione o continua la precedente tramite la funzione start_session();, ricava la risoluzione dello schermo o qualsiasi altra variabile Javascript e poi le spedisce al server con Ajax, usando una chiamata asincrona tramite l'oggetto XMLHttpRequest e il suo metodo open(method,url,async) dove method può essere 'get' o 'post' e async deve essere impostato a true se vogliamo una chiamata del server asincrona. La pagina backAjax.php inizia con una sessionstart(); per continuare la sessione, riceve le variabili contenenti le informazioni sulla risoluzione e le salva in variabili di sessione. La pagina index.php riceve la risposta dal server, il responseText, e lo usa oppure no a seconda del bisogno. In questo caso non riceve testo ma poco importa. Ora la funzione Javascript che effettua la chiamata asincrona si occupa pure, all'arrivo della risposta dal server, di ricaricare la pagina index.php in modo che le nuove variabili di sessione siano disponibili (infatti da che le variabili di sessione vengono settate si deve richiamare la funzione sessionstart() affinchè esse siano realmente memorizzate). Ma di tutto questo non si ha alcuna percezione in quanto succede al caricare della pagina, quindi l'utente vede la propria pagina caricarsi una sola volta. Vediamo il codice:

Funzioni Javascript: file ajax.js

// funzione per assegnare l'oggetto XMLHttpRequest 
// compatibile con i browsers più recenti e diffusi
function assegnaXMLHttpRequest() {
  // lista delle variabili locali
  var XHR = null, browserUtente = navigator.userAgent.toUpperCase();
  // browser standard con supporto nativo non importa il tipo di browser
  if( typeof(XMLHttpRequest) === "function" || typeof(XMLHttpRequest) === "object" ){
    XHR = new XMLHttpRequest();
  }
  // browser Internet Explorer è necessario filtrare la versione 4
  else if( window.ActiveXObject && browserUtente.indexOf("MSIE 4") < 0 ) { 
    // la versione 6 di IE ha un nome differente per il tipo di oggetto ActiveX
    if(browserUtente.indexOf("MSIE 5") < 0){
      XHR = new ActiveXObject("Msxml2.XMLHTTP");
  }
    // le versioni 5 e 5.5 invece sfruttano lo stesso nome
    else{
      XHR = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  return XHR;
}

// funzione per passare i dati riguardanti la risoluzione al php tramite l'impostazione 
//di variabili di sessione nello script php registra_risoluzione.php
function registra_risoluzione() {
  res_width = screen.width;
  res_height = screen.height;
  // DEBUG document.write( res_width + "," + res_height );
  var ajax = assegnaXMLHttpRequest();
  // DEBUG document.write( ajax );
  if(ajax) {
    // inizializzo la request
    ajax.open( "get" , "registra_risoluzione.php?x=" + res_width + "&y=" + res_height , true );
  // invio la richiesta
  ajax.send(null);
  }
  // ricarico la pagina che ha eseguito la richiesta cosi da rendere 
  // subito disponibili le variabili di sessione impostate
  location.reload();
}

Codice pagina index.php

<?php
// Inizio una nuova sessione o proseguo quella già iniziata. 
// In questo momento che l'utente esegua il login oppure no
// PHP fornisce un ID di sessione.
  session_start();
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Prova AJAX</title>
  <script type="text/javascript" src="ajax.js"></script>
</head>

<?php
// Se le variabili di sessione non sono settate esegui la funzione
// al momento della carica della pagina
if( !isset($_SESSION['x']) ){
  echo "<body onLoad = 'registra_risoluzione();'>";
// altrimenti no
} else {
  echo "<body>\n";
}
// stampa il risultato
echo $_SESSION['x']." , ".$_SESSION['y'];
?>
</body>
</html>

Codice pagina backAjax.php

<?php
// continuiamo la sessione
  session_start();
// eseguiamo il filtraggio dell'input per ovviare ad eventuali XSS
$x = htmlspecialchars( $_GET['x'] );
$y = htmlspecialchars( $_GET['y'] );
// setto le variabili di sessione che contengono la risoluzione dello schermo dell'utente
$_SESSION['x'] = $x;
$_SESSION['y'] = $y;
?>