/* Copyright © 2008 Andrea Curcio Motore Ajax per siti internet Cheetah 2.0 * All Rights Reserved. */ // funzione per creare l'oggetto XMLHttpRequest function creaRichiesta(){ //creazione della variabile alla quale sarà assegnato l'oggetto della connessione var xmlHttp=null; //appurato che l'utente ha un browser che supporta la tecnologia Ajax, si passa tramite la cattura degli errori a creare //l'oggetto per la connessione. IE a differenza degli altri browser più comuni in circolazione, usa un oggetto tutto suo. //Si differenziano inoltre l'oggetto usato dalla versione 6 e superiori da quello usato dalla versione 5 e 5.5 //Si eseguono quindi una serie di try/catch (servono per catturare gli errori. In questo caso se il browser non riconosce l'oggetto XMLHttpRequest //passa all'azione successiva del catch e cosi via. Alla fine si ritorna l'oggetto a chi ne ha fatto richiesta try{ // Oggetto per Firefox (dalla versione 1.5 ) Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch(e){ try{ //oggetto per le versioni 6 e superiori di Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ //oggetto per le versioni 5 e 5.5 delle versioni di Internet Explorer xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } //ritorno l'oggetto per la connessione in Ajax return xmlHttp; } //la funzione effettua la richiesta asincrona, e stampa l'eventuale risposta del server. //1° parametro è l'url della pagina alla quale vogliamo fare la richiesta. Per le richieste get, gli vanno aggiunti anche gli eventuali dati da passare al server //2° parametro è l'id dell'elemento in cui vogliamo far stampare la richiesta //3° parametro è il metodo che vogliamo usare per mandare i dati Post o Get //4° parametro sono i dati che vogliamo passare alla pagina. Va usato solo nel caso si faccia una richiesta Post. Per la richiesta Get, va lasciato vuoto function caricaTesto(url, id, metodo, contenuti) { // assegnazione oggetto XMLHttpRequest var richiesta = creaRichiesta(); // assegnazione elemento del documento var elemento = window.document.getElementById(id); var risposta = null; //la seguente variabile serve per vedere se viene fatta una richiesta Ajax (non viene fatta se si usano browser che non lo supportano) o se gli utenti hanno javascript disattivato. Viene impostato come true, in questo modo nel caso non si entra nella richiesta ajax, il ritorno vero, fa in modo che il link rimandi alla pagina caricando quella. In questo modo si possono mostrare i contenuti anche a chi non ha attivo javascript // var link_normale = true; // se l'oggetto XMLHttpRequest non è nullo if(richiesta){ //nel caso viene creato l'oggetto XMLHttpRequest, la variabile viene impostata a flase, cosi, non viene permesso //il link all'url specificato nel tag. In questo modo si permette la navigazione anche agli utenti che non possono usufruire di //ajax // link_normale = false; //Apertura della richiesta con il metodo specificato all'url specificato richiesta.open(metodo, url, true); //nel caso la richiesta vien fatta con il metodo post, si aggiunge questo setRequestHeader if(metodo == "post") richiesta.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //richiesta.setRequestHeader("content-type", "application/x-www-form-urlencoded"); // rimozione dell'header "connection" come "keep alive" richiesta.setRequestHeader("connection", "close"); // impostazione controllo e stato della richiesta richiesta.onreadystatechange = function() { // verifica dello stato, se la risposta è completa, stampa la risposta del server o l'errore opportuno if(richiesta.readyState == 4) { testo = rispostaServer(richiesta); //carica il nuovo contenuto nell'elemento che ha l'id passato alla funzione elemento.innerHTML = testo; } } // invio richiesta. Nel caso il metodo sia di tipo post, manda anche i contenuti, altrimenti manda null come valore if(metodo == "post"){ richiesta.send(contenuti); }else{ richiesta.send(null); } } // return link_normale; } //funzione che ritorna la risposta data dal server alla richiesta in corso. In caso di valore dello status uguale a 200 //(comunicazione a buon fine) ritorna la risposta,in caso contrario ritorna gli errori relativi agli status della richiesta function rispostaServer(richiesta){ var risposta = null; switch(richiesta.status){ case 200: risposta = richiesta.responseText;break; case 204: risposta = "204 No Content
- Nessun contenuto nella pagina";break; case 400: risposta = "400 Bad Request
- Richiesta errata";break; case 403: risposta = "403 Forbidden
- Non sei autorizzato a compiere questa operazione";break; case 404: risposta = "404 Not Found
- Pagina non trovata";break; case 500: risposta = "500 Internal Server Error
- Errore interno del server";break; case 503: risposta = "503 Service Unavailable
- Il server a causa di un temporaneo overload non può rispondere alla richiesta effettuata";break; case 504: risposta = "504 Gateway Timeout
- Richiesta fuori tempo massimo";break; case 505: risposta = "505 HTTP Version Not Supported
- Il server non supporta la versione dell´http con cui è stata effettuata la richiesta";break; default: risposta = "Errore nella ricezione dati";break; } return risposta; } //funzione per l'inserimento del commento tramite ajax. //Il primo parametro è il nome della textarea da cui prelevare il testo //il secondo parametro è l'autore del commento //il terzo parametro è la mail dell'autore del commento //il quarto parametro è la pagina a cui mandare i dati function salvataggio(textarea, autore, mail, pagina){ //prelevo il contenuto della textarea cioè il testo del commento testo = encodeURIComponent(window.document.getElementById(textarea).value); //prelevo il nome dell'autore autore = encodeURIComponent(window.document.getElementById(autore).value); //prelevo la mail mail = window.document.getElementById(mail).value; //controllo che i campi non siano nulli e che la mail sia valida. Se non lo è stampo un alert //e non invio il flusso di dati tramite ajax if(testo == '' || autore == '' || mail.search("@")== -1){ alert('Devi completare tutti i campi'); }else{ mail = encodeURIComponent(mail); //serve per stampare l'immagine di caricamento in attesa della risposta del server window.document.getElementById('corpo').innerHTML = 'Loader'; //dopo un secondo fa partire la richiesta ajax. In questo modo si assicura una vita minima di un secondo all'immagine //di loader, cosi da evitare di creare effetti di apparizione sparizione troppo veloce che possono disturbare l'utente setTimeout("caricaTesto(pagina+'?testo='+testo+'&autore='+autore+'&mail='+mail, 'corpo', 'get');", 5000); } } /*Funzione creata per la richiesta di pagina al server con la funzione loader 1° parametro è l'url della pagina che si vuole chiamare 2° parametro è l'id dell'elemento in cui si vuol stampare il testo passato dalla pagina */ function richiestaPagina(url, id){ //serve per stampare l'immagine di caricamento in attesa della risposta del server window.document.getElementById(id).innerHTML = '
'; //dopo un secondo fa partire la richiesta ajax. In questo modo si assicura una vita minima di un secondo all'immagine //di loader, cosi da evitare di creare effetti di apparizione sparizione troppo veloce che possono disturbare l'utente setTimeout("caricaTesto('"+url+"', '"+id+"', 'get');", 1000); } //funzione per loggarsi function login(){ nome = document.getElementById('user').value; pass = window.document.getElementById('pass').value; if(nome != ''){ nome = encodeURIComponent(nome); pass = encodeURIComponent(pass); //serve per stampare l'immagine di caricamento in attesa della risposta del server window.document.getElementById('corpo').innerHTML = '
'; contenuto = 'nome='+nome+'&pass='+pass; setTimeout("caricaTesto('login.php', 'corpo', 'post', '"+contenuto+"');", 1000); setTimeout("caricaTesto('gestione.php', 'gestione', 'get');", 1500); }else{ alert("Devi completare tutti i campi"); } } function logout(){ //serve per stampare l'immagine di caricamento in attesa della risposta del server window.document.getElementById('corpo').innerHTML = '
'; setTimeout("caricaTesto('logout.php', 'corpo', 'get');", 1000); setTimeout("caricaTesto('gestione.php', 'gestione', 'get');", 1500); }