Ajax e PHP senza usare l’XmlHttpRequest object
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 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’:
$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:
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:
<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 php, ajax standard, demo ajax, librearia ajax, object xmlhttprequest, script, script php, tutorial ajax, usare ajax, web 2Ritieni questo post utile o interessante?
Condividi
Leggi anche:
- » 8 consigli utili per una buona programmazione
- » Passare valori e parametri a Flash in AS3 con SWFObject
dei commenti -
lascia un commento - trackback
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!!!!
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 :)
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^^
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.
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?
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 :)
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….
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 :)
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? ;)