lug 18

Ajax e PHP – Esempio

Internet, PHP, Web 2.0, informatica, programmazione Aggiungi commento


Si parla sempre di più del mondo in cui i siti web oggi siano sempre più belli, efficenti e utili. Il Web 2.0 e il neo arrivato Web 3.0 hanno cambiato le regole all’invio di dati da form a pagine di elaborazione ad esempio PHP..

18okt04_ajax_logo_150_rgb

Molti di questi siti sfruttano Ajax (Asynchronous JavaScript and XML) che altro non è che Javascript, ed è asincrono cioè che le informazioni vengo inviate, gestite dalla pagina interpellata e rinviate senza turbare la pagina stessa, ma solo aggiornando un particolare contenuto.

Questa tecnologia può tornare utile ad esempio per controllare in un form quali campi sono errati oppure se sono dati già esistenti nel database del sito.

Proprio in questo articolo vedremo come evitare di ricaricare la pagina se un dato inserito risulta sbagliato..
Senza usare librerie, utilizzeremo il metodo standard di inviare dati in background

Per prima cosa, creiamoci un file con lo script javascript per l’interazione con la pagina PHP. Chiamiamo questo file  client.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<html>
<head>
<title>Applicazione Ajax Client</title>
 
<script type="text/javascript">
function createRequestObject() {
	var ro;
	var browser = navigator.appName;
	if(browser == "Microsoft Internet Explorer"){
		ro = new ActiveXObject("Microsoft.XMLHTTP");
	}else{
		ro = new XMLHttpRequest();
	}
	return ro;
}
 
var http = createRequestObject();
 
function sndReq() {
var dati = document.getElementById('dati').value;
	http.open('get', 'server.php?get='+dati);
	http.onreadystatechange = handleResponse;
	http.send(null);
}
 
function handleResponse() {
	if(http.readyState == 4){
		var response = http.responseText;
		var update = new Array();
 
		if(response.indexOf('|' != -1)) {
			update = response.split('|');
			document.getElementById(update[0]).innerHTML = update[1];
		}
	}
}
</script>
</head>
<body>
<center><br/><br/><input type="text" name="dati" id="dati" size="15"><br/><input type="button" onClick="sndReq()" value="Invia"><br/><br/><div id="foo"></div></center>
</body>
</html>

Analizziamo lo script..
Per prima cosa si inizializza lo script Javascript che è il cuore del nostro sistema. Bisogna dichiare l’oggetto che in questo caso è il XMLHttpRequest. Quindi, una funzione che se chiamata invia i dati alla nostra pagina (che chiamiamo server.php). Questa funzione, dopo aver inviato i dati cambia il suo stato in ascolto, richiamando a sua volta un’altra funzione per la decodifica del dato arrivato.
Creiamo il file server.php:

1
2
3
4

<?php
$dati = $_GET['get'];
echo "foo|Hai scritto <strong>$dati</strong>!";
?>

Cosa fa questo piccolo script?
Semplicemente inserisce in una variabile in contenuto della querystring get e la ristampa a video.
Da notare che l’echo contiene una stringa; foo| che serve per decidere a quale contenuto inviare al testo. Nel nostro caso, abbiamo chiamato il div foo quindi il contenuto del div, una volta fatta la richiesta, viene modificato.
Se avessimo chiamato il div div_di_prova avremmo dovuto far stampare alla pagina PHP all’inizio della frase da inviare, la stringa div_di_prova|. Questo è utile se si hanno più campi in un un’unica pagina e gestire le chiamate separatamente..
Lo script dell’esempio è concluso, potete provarlo in questa pagina
Scrivete una parola, e la pagina vi restituirà la stringa da voi inviata.
Come vedete non ci sono caricamenti, solo invio di dati in background asincrono…
Ci sono però PRO e CONTRO su questo sistema:
I PRO sono sicurmanete l’efficenza, la velocità e anche la bellezza (perchè un sito con Ajax risulta più professionale).
I CONTRO sono che i browser funzionano per cronologia. Un sito con Ajax, si troverà sempre su una pagina. Utilizzando Ajax non sarà possibile utilizzare il tasto “indietro” poichè non c’è nessuna pagina successiva. Questo può comportare perdite di dati o salti di pagina accidentali..
Ma facendo attenzione, si può risolvere anche questo piccolo inconveniente.
Bene, ora tocca a voi, se volete anche con le librerie che facilitano il tutto provare questo utilissimo sistema di invio dati.

Vi segnalo questo ottimo sito dove ci sono vari tutorials per cominciare a programmare in questo modo..

Ciao!!

Condividi:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • Segnalo
  • StumbleUpon
  • Technorati
  • Twitter
  • Upnews
  • OKNOtizie
Articoli simili:


Lascia un commento



Accedi al pannello di controllo
RSS Feed RSS Commenti Collegati