[AJAX] Caricare dati da file php

[miki92]

Buonasera,
ho creato questo codice:

// La seguente chat in Ajax è stata realizzata da Michelangelo.
// Copyright © 2009 Miki92. Tutti i diritti riservati.
// Questo/a opera è pubblicato sotto una Licenza Creative Commons (http://creativecommons.org/licenses/by-nc-nd/3.0/deed.it)

function Info(infoid){
window.open("../info.php#"+infoid,"Info_Chat_Miki92","scrollbars=yes,width=500,height=500");
}

function Controlla(cosa){
var opz = cosa;
if(opz == "nick"){
var massimo = 15;
if(document.chat.nick.value.length > massimo){
//document.chat.nick.value = document.chat.nick.value.substr(0, massimo);
alert("Attenzione: Il nick deve essere massimo "+massimo+" caratteri.");
document.chat.nick.className = "ko";
document.chat.nick.focus();
}else{
document.chat.nick.className = "ok";
}}else if(opz == "msg"){
var massimo = 5000;
if(document.chat.messaggio.value.length > massimo){
//document.chat.nick.value = document.chat.nick.value.substr(0, massimo);
alert("Attenzione: Il nick deve essere massimo "+massimo+" caratteri.");
document.chat.messaggio.className = "ko";
document.chat.messaggio.focus();
}else{
document.chat.messaggio.className = "ok";
}}else{
alert("Si è verificato un errore.");
}}

// Da qui inizia il vero Ajax

var myRequest = null;

function CreateXmlHttpReq(handler){
  var xmlhttp = null;
  try {
    xmlhttp = new XMLHttpRequest();
  } catch(e) {
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

function myReq(){
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        document.getElementById("testochat").innerHTML = myRequest.responseText;
        setTimeout(CaricaMessaggi(),5000);
    }else{
        document.getElementById("testochat").innerHTML = "<center><img src=\"immagini/loading.gif\" alt=\"Caricamento dati in corso\" /><br />Attendere Prego...</center>";
    }}

function Chat(){
    myRequest = CreateXmlHttpReq(myReq);
    myRequest.open("POST","chatactions.php",true);
    myRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded ISO-8859-1");
    var dati = "dati="+document.chat.nick.value+"[~EXP~]"+document.chat.messaggio.value;
    myRequest.send(dati);
}

function CaricaMessaggi(){
    myRequest = CreateXmlHttpReq(myReq);
    mat = Math.random();
    myRequest.open("GET","chatactions.php?leggi&math="+mat);
    myRequest.send(null);
    setTimeout(CaricaMessaggi(),5000);
} 

Questo codice invia dei determinati dati ad un file PHP che a sua volta li inserisce nel database e mostra i dati già archiviati più quelli inseriti.
Da quanto avrete potuto capire si tratta di una chat e quindi ho bisogno che all'apertura della pagina (dove verrà incluso questo codice) e ad ogni 5 secondi si aggiornino i messaggi...ora ecco cosa accade:

1. Se l'utente apre la pagina e scrive un commento...funziona tutto ok.
2. Se faccio in modo che all'apertura della pagina ed ogni 5 secondi i messaggi si carichino il browser in uso (qualunque sia...) si blocca e non carica i messaggi...

Quindi la mia domanda è...come faccio a caricare i messaggi in modo tale da aggiornare ogni 5 secondi i messaggi pelevandoli dal file PHP stesso?

Il file PHP non fa altro che mostrare del testo che inserito, grazie ad ajax, in un div assume l'aspetto di una chat...

Spero di essere stato chiaro,
Michelangelo

Hai sbagliato la funzione setTimeout. Non devi fare così

setTimeout(CaricaMessaggi(),5000); 

Ma così

setTimeout('CaricaMessaggi()',5000); 

[miki92]

Guarda mi ucciderei...la prima volta avevo problemi con gli ID ma avevo scritto bene...la seconda volta ho risolto con gli ID e avevo mancato le virgolette...però sinceramente non sapevo che erano obbligatorie...cioè io le mettevo per rispettare la guida che ho seguito ma la guida diceva "opzionali"...va beh...dopo un pomeriggio intero di lavoro su ajax (la prima volta che utilizzo HttpRequest...) i risultati si vedono...grazie stoner!!!

Un piccolo consiglio, potresti usare jquery così snellisci il tutto, non so se già lo conosci ma è semplice impararlo.
Eviti tantissimi problemi soprattutto di compatibilità e il risultato è più professionale.

[miki92]

No non conosco jquery ma sicuramente quando avrò più tempo approfondirò questo argomento Ne ho sentito parlare ma non mi sono mai applicato...ho imparato così velocemente ajax tanto per provare qualche cosa di nuovo...grazie ancora.

Figurati, comunque te lo consiglio vivamente, buon approfondimento :)