Aggiornamento DIV in Ajax

dottor gregory denis

SCRIVI

Aggiornamento DIV in Ajax postato il 29/11/2009 21:20:18 nel forum programmazione, gdrcd, open source, hosting e modificato da dottor gregory denis il 29/11/2009 21:22:49

Buonasera a tutti, è da un pò di tempo che non scrivo in gdronline, perchè, per fortuna mia, stò imparando veramente molto bene ad usare la magica accoppiata: PHP - MYSQL, solo che, ora, mi trovo difronte ad una difficolta come da titolo, ovvero:
Come far aggiornare un DIV con una funzione ajax?
I div si dovrebbero aggiornare al cambio di una variabile richiamata da un campo in database (e se ciò non è possibile anche dopo un tot di secondi).
Ciò mi permetterebbe di togliere due IFRAME Molto antiestetici!
Qualcuno conosce uno script pronto?
P.s. sono niubbio in Ajax :)

EnlistedEnlisted ↗
Guida la tua squadra di soldati in combattimenti su larga scala, con fanteria, veicoli corazzati e aerei della IIa Guerra Mondiale!

quota

Pagine → 1 

dottor gregory denis

SCRIVI

29/11/2009 21:42:34

arryx ha scritto: Ajax non è altro che un modo per effettuare richieste al server con javascritpt in modo asincrono.

Dicendo questo, si deve presupporre di conoscere un minimo di js e quindi sapere che esso funziona ad "eventi" ad esempio:

- il click di un pulsante
- l'invio di un form
- il passaggio del mouse su un elemento
- la modifica del valore di un campo select in un form
- ecc.. ecc..

Piccola domanda....
Il click del pulsante può essere anche in una pagina separata aperta in popup? ad esempio:
main.php (c'è il div da aggiornare)
pngmaster.php (c'è il pulsante che dovrebbe essere associato al div in main.php)
Grazie!

World of TanksWorld of Tanks ↗
Lanciati in epiche battaglie spalla a spalla con altri giocatori. Conquista la supremazia nel mondo dei Carri Armati!

quota

darkside of breakfast

SCRIVI

29/11/2009 21:44:07

Yes, ma per ste cose ti devi studiare per bene js :)

World of TanksWorld of Tanks ↗
Lanciati in epiche battaglie spalla a spalla con altri giocatori. Conquista la supremazia nel mondo dei Carri Armati!

quota

pistacchio

SCRIVI

29/11/2009 21:50:41

Come già detto, puoi effettuare chiamate dal client al server, ma non dal server al client (in teoria si può fare anche quello, ma sono pochi i framework e i server che supportano il Reverse Ajax (si chiama Comet).

Quello che puoi fare è un polling, ovvero una serie di chiamate continuate nel tempo al server per controllare, ogni tot minuti o secondi, se ci sono le condizioni per aggiornare il tuo <div> (nel tuo caso se una certa variabile è cambiata).

Se hai intenzione di utilizzare AJAX ti consiglio di appoggiarti a qualche framework; jQuery è ormai di fatto uno standard. Per il tuo specifico problema puoi cercare nella libreria che ti ho segnalato la funzione load (http://docs.jquery.com/Ajax/load#urldatacallback ↗) che effettua una chiamata AJAX al server e aggiorna un elemento con quanto restituito dalla chiamata e la funzione setInterval() di javascript che effettua un'istruzione (come la chiamata ad una funzione) ad intervalli regolari di tempo.

Pratico l’arte zen di manutenere la mia motocicletta cambiando la cinghia di Möbius nel mio garage ermetico.

quota

dottor gregory denis

SCRIVI

02/12/2009 14:21:35

Prima di tutto, voglio ringraziare tutti coloro che mi hanno risposto e sopratutto dyrr che mi ha dato una dritta in msn...
Ora, vorrei porvi una domanda... stò usando questo script:


<script type="text/javascript">
var page = "link1.php";
function ajax(url,target)
{
// native XMLHttpRequest object
document.getElementById(target).innerHTML;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send();
}
}
setTimeout("ajax(page,'link1')", 10000);
}

function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ajax error: " +
req.statusText;
}
}
}
</script>
<body onload="ajax(page,'link1')">
<div id="link1">

Che funziona perfettamente, però, vorrei sapere, come posso far si che vengano caricate 3 pagine (chiamandole magari: lin1, link2, e link3)?
Grazie a tutti!

New OrleansNew Orleans ↗
La Città dai Mille Volti: Crime, Feste, Mistero, Voodoo, Natura Incontaminata, Fama, Grattacieli, Luci Splendenti e Ombre Profonde.

quota

dottor gregory denis

SCRIVI

02/12/2009 15:02:44 e modificato da dottor gregory denis il 02/12/2009 15:03:40

Ciao, grazie di avermi rispoto, ti spiego meglio...
allora il primo file, viene caricato con una chiamata in ajax in questo modo:


<script type="text/javascript">
var page = "link1.php";
function ajax(url,target)
{
// native XMLHttpRequest object
document.getElementById(target).innerHTML;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send();
}
}
setTimeout("ajax(page,'link1')", 10000);
}

function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ajax error:
" +
req.statusText;
}
}
}
</script>
<body onload="ajax(page,'link1')">
<div id="link1">

E fin qui non ci piove, poi, ho tentato di effettuare altre tre chiamate simili in questo modo:


<script type="text/javascript">
var page = "link1.php";
function ajax(url,target)
{
// native XMLHttpRequest object
document.getElementById(target).innerHTML;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send();
}
}
setTimeout("ajax(page,'link1')", 10000);
}

function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ajax error:
" +
req.statusText;
}
}
}



var page = "link2.php";
function ajax(url,target)
{
// native XMLHttpRequest object
document.getElementById(target).innerHTML;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send();
}
}
setTimeout("ajax(page,'link2')", 10000);
}

function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ajax error:
" +
req.statusText;
}
}
}





var page = "link3.php";
function ajax(url,target)
{
// native XMLHttpRequest object
document.getElementById(target).innerHTML;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send();
}
}
setTimeout("ajax(page,'link2')", 10000);
}

function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ajax error:
" +
req.statusText;
}
}
}
</script>
<body onload="ajax(page,'link1'); ajax(page,'link2'); ajax(page,'link3')">
<div id="link1"></div>
<div id="link2"></div>
<div id="link3"></div>

Cosa che ovviamente non funziona, (ho tentato di prendere la strada più semplice dato che di ajax sò veramente zero)!
Sai come posso far si che questo codice possa funzionare?

Spero di essermi spiegato meglio! :)

quota

Discussione seguita da › dottor gregory denis › gemini

Pagine → 1 

Rispondi alla Discussione Segui Discussione Inoltra Discussione Forum Programmazione, GDRCD, Open Source, Hosting Elenco Forum

Articoli, Interviste e altre Risorse!

War Thunder War Thunder
Aviazione, veicoli corazzati e flotte militari della seconda guerra mondiale. Parteciperai a tutte le principali battaglie!
Moon River Moon River
Intervista alla gestione del play by chat urban fantasy Moon River
Morte dei Play by Chat Morte dei Play by Chat
Il play by chat è definitivamente morto? Chiediamo ai gestori cosa ne pensano!
CRSED: F.O.A.D. CRSED: F.O.A.D.
Brutale sparatutto MMO in cui vince l'ultimo giocatore che resta in vita! Il giocatore sarà accompagnato da armi realistiche e magie!

Pubblicità

Ultime dal Portale

news New Orleans: The Radio!

gdrrank I dati del generatore di rank sono stati aggiornati!

Raja Dunia Raja Dunia → Tra verità divine e menzogne eterne, la tua anima è la chiave. Scopri Raja Dunia, e riscrivi il fato del Continente con armi e magia, fede o eresia.

news Black Sails Chronicles: ON - 1° Ricognizione a Nord

recensione sadwick ha recensito Cyberpunk NbG Re-Coded

recensione kirokiro ha recensito Lubecca

news Felix Felicis GdR - Harry Potter GdR: L'agguato di Harry Potter

Seconda Era Seconda Era → Vaste terre coperte di ombre e misteri, dove ogni eroe scrive la storia del Mondo di Eidel. Seconda Era, play by chat

risposta Il gestore di The Coven ha risposto alla recensione di desmondste

news Dissendium Draconis: Aggiornamenti: Hogwarts

recensione jess ha recensito La Tana del Ladro

forum soizora ha aperto una nuova discussione: Generare una landing page page efficace per un pbc?

World of Tanks World of Tanks → Lanciati in epiche battaglie spalla a spalla con altri giocatori. Conquista la supremazia nel mondo dei Carri Armati!

recensione iris92 ha recensito The Eyrie GdR

news Tibia: Correzioni e modifiche 👷🏻

news Hero Wars: Livella i tuoi Pets! 🐾

news Ex Gratia GDR: Nuovi distretto: Cloudaway!

Exclusive Villa GdR Exclusive Villa GdR → Las Vegas, azzardo, vizi, soldi, intrighi... Più le sue luci sono scintillanti, più le sue ombre sono oscure. La città che non dorme mai, vi aspetta.

Articoli

Kyudo
Kyudo - Gli otto movimenti del Kyudo... l'arte Giapponese dell'arco!
Testare un GdR
Testare un GdR - Consigli sulla fase di "Testing" prendendo spunto dal collaudo software e applicabili anche alla creazione di un GdR
Amazon Luna
Amazon Luna - Amazon Luna, scopriamo assieme il nuovo servizio di cloud gaming!
Giochi Fantasy Storico
Giochi Fantasy Storico - Lista completa dei giochi di ruolo online fantasy storici
AlterEgo
AlterEgo - Scopri AlterEgo GdR: un incredibile universo narrativo in stile medievale fantasy che cresce, muta e vive giorno dopo giorno grazie ai suoi giocatori!
RAID Shadow Legends
RAID Shadow Legends - Plasma i tuoi eroi fino a farli diventare vere e proprie armi viventi e assembla i più epici gruppi d'assalto mai visti finora!
Slice and Dice
Slice and Dice - Intervista a Slice and Dice il sito dei sistemi di gioco per play by chat!
Romics 34
Romics 34 - Romics 34: Quattro giorni nel cuore della cultura pop!