Facebook Twitter RSS Telegram

Aggiornamento DIV in Ajax



Aggiornamento DIV in Ajax [Postato il nel forum programmazione]

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 :)


Legacy of MagicLegacy of Magic
Un mondo fantasy, Sette divinità, centinaia di avventure che si intrecciano. Crea il tuo personaggio e scopri anche tu l'Eredità della Magia



Risposte alla discussione

Pagine: 1 

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!



Kyusai GdRKyusai GdR
Inoltrati a Natsuko, dove androidi, ibridi e Machine-Mech coesistono in un'unica realtà colma di misteri e eventi apparentemente inspiegabili.

29/11/2009 21:44:07

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

Se darkside non va alla montagna...
Darkside va al mare.

[Link ]

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 ([Link ]) 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.

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!


War ThunderWar Thunder
Aviazione, veicoli corazzati e flotte militari della seconda guerra mondiale. Parteciperai a tutte le principali battaglie!

02/12/2009 15:02:44

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! :)


Kyusai GdRKyusai GdR
Inoltrati a Natsuko, dove androidi, ibridi e Machine-Mech coesistono in un'unica realtà colma di misteri e eventi apparentemente inspiegabili.


Modificato il 02/12/2009 15:03:40 da dottor gregory denis

Pagine: 1 

Discussione seguita da:  » dottor gregory denis  » gemini 


Non puoi scrivere in questo forum 

Aggiungi discussione ai preferiti 

Segnala discussione ad un utente 

Segnala discussione ad un moderatore 

Torna al Forum "Programmazione" 

Torna alla lista dei Forum 




Articoli, Recensioni e altre Risorse

Dati Demografici
Dati Demografici
Analizziamo assieme i Dati Demografici dei Giocatori di Ruolo Online grazie a Google Analytics
AnnoMille
AnnoMille
Intervista al gestore del GdR Fantasy "AnnoMille"!
Sondaggio Gdr 2008
Sondaggio Gdr 2008
Risultati del sondaggio 2008 svolto sul fenomeno dei GdR
Attacchi e Difese
Attacchi e Difese
Lista degli attacchi e difese possibili in questo breve manuale da tenere sempre a portata di mano!