Ajax e PHP senza usare XmlHttpRequest

Ammettiamolo: il tormentone Ajax e questo famigerato Web 2.0, pur essendo semplici riscoperte di vecchie tecnologie, hanno cambiato e stanno cambiando il modo di vedere e vivere il web, veramente velocizzano le applicazioni web e fanno la differenza rispetto al classico modo di navigare, interagire e sviluppare.
Purtroppo, essendo una tecnologia lato client, la semplicità dell’utilizzo di una RIA (Rich Internet Application) è inversamente proporzionale alla difficoltà per realizzarla ed implementarla correttamente.
Il problema più fastidioso deriva sicuramente dall’ object object XmlHttpRequest, l’incaricato a comunicare tra client e server, per via dello scarso supporto sulle vecchie versioni dei browser anche più famosi, per le diversità nell’implementarlo tra i browser odierni e per controlli vari sugli script.

Ma una soluzione a questi problemi può risiedere in questo tutorial che vi spiegherà come simulare Ajax senza nemmeno richiamare l’ object XmlHttpRequest.

COME SNOBBARE L’XMLHTTPREQUEST

Non volendo ricorrere a questo prezioso ma poco standard object, possiamo servirci del classico tag <script> per includere una pagina PHP che esegue codice Javascript, tipo questa, che chiameremo ‘testo.php’:

<?php
$testo = ‘Il testo che rappresenta la chiamata AJAX’;
?>
div = document.getElementById(’contentdiv’);
div.innerHTML = ‘<?php echo $testo; ?>’;

Caricato dal tag <SCRIPT>, questo codice setterà la proprietà innerHTML del div con id ‘contentdiv’ già presente sulla pagina, ma come fare se vogliamo che questo avvenga al click di un pulsante, per esempio?
Possiamo usare uno script tipo questo:

// Ottieni la base url
url = document.location.href;
xend = url.lastIndexOf(”/”) + 1;
var base_url = url.substring(0, xend);

function chiama_ajax(url) {
//Inizia l’url con http?
if (url.substring(0, 4) != ‘http’) {
url = base_url + url;
}

// Crea un nuovo elemento JS
var jsel = document.createElement(’SCRIPT’);
jsel.type = ‘text/javascript’;
jsel.src = url;

//Appende l’elemento JS e quindi esegue la ‘chiamata AJAX’)
document.body.appendChild (jsel);
}

Praticamente prima otteniamo la directory dell’url, poi creiamo la funzione ‘chiama_ajax()’ che controlla se l’url passata è relativa locale o punta ad un altro dominio e infine crea il tag <SCRIPT> che appende al body, che richiamerà il nostro file PHP.
Infine creiamo la pagina HTML che gestirà il tutto:

<html>
<head>
<title>Demo AJAX senza XMLHTTPREQUEST</title>
<script type=”text/javascript”>

// Ottieni la base url
url = document.location.href;
xend = url.lastIndexOf(”/”) + 1;
var base_url = url.substring(0, xend);

function chiama_ajax(url) {
//Inizia l’url con http?
if (url.substring(0, 4) != ‘http’) {
url = base_url + url;
}
// Crea un nuovo elemento JS
var jsel = document.createElement(’SCRIPT’);
jsel.type = ‘text/javascript’;
jsel.src = url;
//Appende l’elemento JS e quindi esegue la ‘chiamata AJAX’
document.body.appendChild (jsel);
}

</script> </head> <body>
<div id=”contentdiv”> </div> <input type=”button” onclick=”chiama_ajax(’testo.php’);” value=”Interroga PHP” />
</body>
</html>

Se volete vedere una live demo cliccate QUI.

Cerca: ajax, ajax php, object xmlhttprequest, php, web 2, xmlhttprequest

Ritieni questo post utile o interessante?
Condividi e Segnala

13 commenti per “Ajax e PHP senza usare XmlHttpRequest”

zak ha detto:
July 16th, 2007, 11:22 am
Sulle prime ho dovuto un po’ combattere con la sintassi giusta da generare via php, poi una volta fatte un po di prove e molto semplice da utilizzare grande w3 Facile!!!!
R.A.M. Page ha detto:
July 17th, 2007, 1:53 am
Magari perchè all’inizio non viene naturale pensare una pagina PHP che ha come ECHO del testo il contenuto di un file esterno javascript :)
Giuseppe ha detto:
September 18th, 2007, 2:25 pm
non ho capito come fare a passare valori dalla pagina client alla pagine PHP che si trova nel server, altrimenti come faccio a simulare l’AJAX^^
R.A.M.Page ha detto:
September 18th, 2007, 7:02 pm
Bella domanda, infatti nell’esempio non vengono passati parametri ma fatta solo un’interrogazione al server.

Per passare parametri io li attacco in querystring alla pagina testo.php quindi la funzione diventerebbe ”chiama_ajax(’testo.php?id=2’)” per esempio.
Poi è compito della pagina PHP lato server recuperare il parametro in querystring e passare i risultati in base allo stesso.

Il plugin per il social bookmark che trovi su questo sito utilizza lo stesso metodo.
Giuseppe ha detto:
September 20th, 2007, 9:59 am
ma cosi non è come passare i parametri per GET? saprai che c’è un limite massimo(256 mi pare), come faccio se voglio fare una chat o per far scriviere articoli ai miei utenti??? non c’è un altro modo per passare dati senza limitazioni? e come risolvo il problema dei caratteri speciali che nell’ulr non possono essere messi?
R.A.M.Page ha detto:
September 24th, 2007, 11:58 pm
Mmm…anch’io sapevo di un limite, anche inferiore a 256, sui parametri passati in querystring…ma fa una prova se sei iscritto a qualche social boomark, o meglio ancora fallo con Google Bookmark che funziona alla perfezione, usando il plugin che trovi sotto ad ogni singolo post…io passo interi post in querystring, e arrivano fino a 1670 caratteri dopodiche li taglio (andando oltre ho trovato qualche sito che ha problemi a farli recuperare da vari siti) più altri parametri come il titolo o l’url…quindi forse questo limite, se c’è sta ben oltre la soglia che sappiamo noi.

Per i caratteri speciali uso la funzione htmlspecialchars() riportandoli a codice che si può passare tranquillamente in querystring, provare per credere :)
dottwatson ha detto:
October 4th, 2007, 2:57 am
veramente interessante come articolo! però come metodo ha i suoi limiti… premetto che non sono un utilizzatore di ajax ma stavo iniziando a darci un’ occhiata adesso… il imite del tuo script è che sei legato alla creazione di un nuovo elemento in pagina, in questo caso un JS, a al fatto che se voglio generare codice HTML direttamente da php, questo dovrei PRIMA racchiuderlo in una variabile, e poi integrare la variabile in quelle 3 o 4 righe di codice a fondo pagina (parlo ti test.php).

diciamo che se adotto questa soluzione devo farlo sin dall’ inizio del mio progetto….
R.A.M.Page ha detto:
October 5th, 2007, 4:03 am
Diciamo che come metodo ha i suoi pro e contro…i pro sono un’enorme leggerezza, compatibilità e semplicità d’uso, i contro dei limiti nel suo utilizzo e l’esclusione per la lettura di valori XML, non utilizzando l’XMLhttprequest.
E’ un metodo comodo da usare quando non si hanno grosse esigenze e si vuole velocità di caricamento ed un codice pulito e leggibile.

Parli della creazione di un nodo JS nella pagina come di un limite…ma l’importazione di una libreria Ajax in ogni pagina o in quelle dove serve non sarebbe forse un peso maggiore?
In particolare se usi librerie ‘all inclusive’ e non create ad hoc come possono essere prototype e il derivato ma più famoso scriptaculous, parliamo di almeno 60kb di codice che magari nemmeno serve.

Poi per la variabile in cui devi raggruppare i dati nella pagina PHP, se di questo stai parlando, vuoi mettere avere dei dati pronti arrivare direttamente dal server, con cui comunque puoi continuare a lavorare poi con Javascript, che un flusso di XML da rielaborare?
Questo comunque dipende sempre da come abbiamo studiato il progetto e dalle sue esigenze, nella programmazione non esiste una soluzione migliore di un’altra SEMPRE, dipende dal problema che dobbiamo risolvere :)
dottwatson ha detto:
November 8th, 2007, 3:07 am
giusta la tua considerazione… pensavo a php che genera codice js preformattato, o al passaggio di dati da validare con eval()…. la base è buona, credo che con qualche accorgimento e arricchimento potrebbe essere un buon concorrente di ajax…

attualmente il file di prova restituisce

div = document.getElementById(’contentdiv’);
div.innerHTML = ‘Il testo che rappresenta la chiamata AJAX’;

ma nessuno vieta di parametrizzare in funzione le chiamate… ci vogliamo studiare sopra? ;)
alberto ha detto:
August 5th, 2008, 7:19 am
Ciao
grazie per il tuo lavoro che uso ed ho trovato utile, sopratutto come dici, per la leggerezza e semplicita’.
Voglio chiedere una cosa. Il contenuto del mio contentdiv, cioé quello che viene mostrato, sono delle foto, chiamate in una pagina php (la tua testo.php)
Sto cercando di applicare una funzione di fadeIn, alla pagina madre (quella che contiene il contentdiv, , ma non ci sono ancora riuscito. Hai qualche suggerimento ?
grazie, ciao.
R.A.M.Page ha detto:
August 5th, 2008, 10:09 am
Probabilmente ci scriverò un tutorial prima o poi, intanto ti consiglio di dare un’occhiata al sito Script.aculo.us, tramite la loro libreria non è difficile ricreare effetti del genere.
alberto ha detto:
August 5th, 2008, 4:04 pm
In effetti ho anche provato ad utilizzare JQuery che in altre pagine uso, con la funzione fadeIn, e funziona senza problemi.
Qui invece essendo creato tramite innerHTML non funziona.
Ho anche provato a mettere il contentdiv dentro un altro div, ed applicare fadeIn al contenitore, ma non va lo stesso.
Comunque grazie, saluti.
costruzione siti web ha detto:
August 25th, 2008, 8:06 pm
beh,
hai notato un incremento considerevole di efficienza, paragonando le stesse operazioni con le due versioni differenti?

Più che altro ci terrei ad aggiungere che il post fà giustamente riferimento al tormentone web 2.0 e come purtroppo si siano confuse le acque e cioè di come alcuni effetti javascript vengano venduti come ajax.

AJAX non è una transizione o un drag and drop.
Interessante esperimento :)