Newsgroup: it.comp.www.php
Titolo: php e ajax (elementare)

Chiedo pazienza a tutti, ma sto provando ad usare ajax.
Il mio primo tentativo di chiamare php da una pagina html e' qui sotto
(scopiazzando e modificando l'esempio da w3school e da altri tutorial 
sul web)
Il problema e' che quando clicco ... si ricarica la pagina e basta :-(
Evidentemente mi manca qualcosa di basilare.
Qualcuno ha la pazienza di indicarmelo ?
GRAZIE
----- index.html
<html>
<head></head>
<body>
<div>
    <span id="dataGiorno">
       <form action="">
          <input type='button' onclick='show()' value='cclick'>
       </form>
    </span>
</div>
<script>
function show() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
          document.getElementById("dataGiorno").innerHTML = 
this.responseText;
       }
    };
    xhttp.open("GET", "lista.php, true);
    xmlhttp.send();
}
</script>
</body>
</html>
---- lista.php
<?php
echo "<h1>data del giorno</h1>";
?>

 xhttp.open("GET", "lista.php, true);
 
potrebbe essere qualcosa di proprio banale.
 
 lista.php   non ha gli apici di chiusura.

 >> xhttp.open("GET", "lista.php, true);
 >potrebbe essere qualcosa di proprio banale.
 >lista.php   non ha gli apici di chiusura.
Hai perfettamente ragione,
purtroppo anche messi gli apici ... nulla e' cambiato :-(
*GRAZIE* 1000 x l'attenzione :-)
Riporto qui sotto l'ambaradan completo e corretto
sperando nella pieta' che qualcuno avesse voglia ... :-)
---- index.php
<html>
<head></head>
<body>
<form>
<input type='button' onclick='show()' value='cclick'>
</form>
<p>data: <span id="dataGiorno"></span></p>
<script>
function show() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
          document.getElementById("dataGiorno").innerHTML = 
this.responseText;
       }
    };
    xhttp.open("GET", "lista.php", true);


purtroppo anche messi gli apici ... nulla e' cambiato :-(
 
    xhttp.open("GET", "lista.php", true);
    ^^^
 
    xmlhttp.send();
 
Leonardo (ma la console degli errori non ti diceva nulla?)
-- 
 
"You all presumably know why" :-) :-(

 Leonardo (ma la console degli errori non ti diceva nulla?)
No :-(
 


E allora questo è un altro problema da risolvere, perché doveva lamentarsi che
il metodo .open l'hai richiesto a non si sa bene chi.
 
C'hai la javascript console che ciurla, sentiammé.
 
Leonardo



 
Leonardo ha ragione sai.
 
Il tuo oggetto è xmlhttp   .
 
xhttp non è mai stato definito.
 
Non l'avevo neanche visto la volta scorsa.

 sul web)
 
Ti consiglierei allora di lasciar perdere quel tutorial e quelli simili,
a meno che tu non deva supportare Internet Explorer per qualche motivo.
 
I browser si sono un po' evoluti rispetto a 10-15 anni fa.
 
Il modo "moderno" di fare quello che stai facendo è simile a questo:
 
<html>
<head></head>
<body>
  <div>
    <span id="dataGiorno">
       <form action="">
          <input type="button" id="btnData" value="click">
       </form>
    </span>
  </div>
  <script>
    document.getElementById('btnData')
      .addEventListener(
        'click',
        e => {
          e.preventDefault()
          fetch('lista.php')
            .then(res => res.text())
            .then(text => {
              document.getElementById('dataGiorno').innerHTML = text
            })
        },
      )
  </script>
</body>
</html>
 

Alessandro Pellizzari ha detto questo domenica :

Ehilà!
Un frammento così era proprio quello che cercavo per *fetch*.
Niente prove da fare, tutto già sistemato. Non lo testo neanche, 
suppongo che funzioni senza problemi.
 
Era un po' che non ti vedevo. Grazie tante.
 
Se non erro una chiamata con fetch non è l'esatto equivalente di una 
chiama ajax "tradizionale"
 
Ciao.

 chiama ajax "tradizionale"
 
`fetch` astrae tutto quello che succede con XMLHttpRequest e usa
promises invece di callbacks dirette. Inoltre gestisce gli errori
(usando `then` per il good path e `catch` per gli errori) e permette di
costruire una request più complessa.
 
Nell'esempio ho usato una stringa come request, ma si può passare un
oggetto Request con altri parametri (per passare header, usare metodi
diversi da GET, gestire CORS, etc.)
 
È (secondo me) molto più leggibile, oltre a rendere molto più semplice
la gestione dei casi più complessi che con XHR richiedono un sacco di
codice scritto apposta.
 
Bye.