[Ajax] Cominciamo!

Printable View

23-08-2009, 02.35.31

[Ajax] Cominciamo!

Ciao a tutti, adesso proprio a quest'ora dite voi...mi metto a studiare ajax? Già, sempre meglio che fare altro noh? :wink: Comunque, ecco il mio problema: ho letto questa guida per capire come funziona: http://www.tizag.com/ajaxTutorial/aj...l-database.php e ho dedotto questo:
Ajax, è solamente una/delle "funziona/i" di javascript, il quale interagisce con PHP in modo istantaneo. Tradotto: se io scrivo " ciao " lui subito me lo tradurrà come gli ho detto io in questo caso "ciao". Ora questo è il mio "test":

Codice PHP:

<?php $nome = $_GET["nome"]; $nome = trim(htmlspecialchars($_GET["nome"])); if($nome) { echo "<div id='ajax'><b>Nome:</b> {$nome}</div>"; } ?> <html> <head> <title>funziona ajax?</title> <style> body { margin: 0 auto; width: 500px; } #ajax { width: 300px; border: 1px dotted #000; padding: 5px; margin-left: 30px; } </style> </head> <body> <script> function test() { // ricezione dal form 'form' ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ document.form.time.value = ajaxRequest.responseText; } } var nome = document.getElementsById("nome").value; ajaxRequest.open("GET", "?nome="+nome, true); ajaxRequest.send(null); } </script> <h1>Funziona ajax?</h1> <form name="form"> <b>Inserisci il tuo nome:</b><br /> <input type="text" name="nome" id="nome" size="80" /><br /> <input type="button" onclick="test();" value="funziona ajax?" /> </form> </body> </html>

Ora quando clicco sul pulsante, non succede niente. Perchè??
Dopo, invece di mettere come ricavato "getElementsById" non potrei metterlo in base al nome dell'input/textarea/select/ecc?? Così non riempo il codice di schifezze che magari mi possono servire come css ecc. Grazie mille e scusate l'ora. Ciao, Davide!!

PS. Come al solito tutto in una pagina! :lolloso:
23-08-2009, 11.23.40
dementialsite

Ci credo che lo script non funzioni, ti sei dimenticato la parte più importante: creare l'oggetto XMLHttpRequest (o equivalente per IE, sai com'è...)!

Con Firefox lo script funziona semplicemente aggiungendo questa riga all'inizio della funzione test():

Codice:

var ajaxRequest = new XMLHttpRequest();

Per farlo funzionare su IE, devi usare un altro oggetto, trovi qui il "costrutto barocco" che ti permette di implementarlo: http://en.wikipedia.org/wiki/XMLHttpRequest

Un consiglio: il file PHP che chiami via AJAX dovrebbe contenere solamente la parte dell'output che ti serve scaricare dal server. Nel tuo codice, invece, scaricherai tutto il codice HTML della pagina ottenuta, compreso lo stesso "template" (che molto probabilmente, continuando ad invocare lo script, diventerà un assurdo gioco di "scatole cinesi").

Come test iniziale, crea un file PHP che contenga solo questa riga:

Codice PHP:

<?php echo date ('d/m/Y, H:i:s'); ?>

e richiama il file così creato tramite i costrutti AJAX (su un altro file, anche solo HTML va bene). Indovina un po' cosa succederà sulla tua pagina...?

Stammi bene...
23-08-2009, 11.38.07
matt93

ti consiglio di usare librerie come prototype o jquery in quanto esse includono una implementazione AJAX cross browser molto efficace ^^
23-08-2009, 12.11.07

Citazione:

Originalmente inviato da matt93

ti consiglio di usare librerie come prototype o jquery in quanto esse includono una implementazione AJAX cross browser molto efficace ^^

Non mi fido molto di ste cose! xD Anche perché jQuery a mio parere è complicato ancora per me! XDD Andiamoci piano...voglio incominciare a mano qualcosa! :wink:

Citazione:

Originalmente inviato da dementialsite

Come test iniziale, crea un file PHP che contenga solo questa riga:

Codice PHP:

<?php echo date ('d/m/Y, H:i:s'); ?>

e richiama il file così creato tramite i costrutti AJAX (su un altro file, anche solo HTML va bene). Indovina un po' cosa succederà sulla tua pagina...?

Questa parte non l'ho capita, comunque io come test iniziale vorrei far partire un form, visto che nella guida era così! =D Ed era quello che vorrei fare io....
Comunque non va! Ho diviso i file:
ajax/index.php

Codice PHP:

<html> <head> <title>funziona ajax?</title> <style> body { margin: 0 auto; width: 500px; } #ajax { width: 300px; border: 1px dotted #000; padding: 5px; margin: 20px; } </style> </head> <body> <script> function test() { // creo ajax var ajaxRequest = new XMLHttpRequest(); // ricezione dal form 'mod' ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ document.mod.time.value = ajaxRequest.responseText; } } var nome = document.getElementsById("nome").value; ajaxRequest.open("GET", "ajax.php?nome=" + nome, true); ajaxRequest.send(null); } </script> <h1>Funziona ajax?</h1> <form name="mod"> <b>Inserisci il tuo nome:</b><br /> <input type="text" id="nome" size="80" /><br /> <input type="button" onclick="test()" value="funziona ajax?" /> </form> </body> </html>

ajax/ajax.php

Codice PHP:

<?php $nome = $_GET["nome"]; $nome = trim(htmlspecialchars($_GET["nome"])); echo "<div id='ajax'>Secondo te??...certo che funziona {$nome}!!</div>"; ?>

Grazie mille. Ciao Davide!!

Edit: ho capito cosa volevi mostrarmi:

Codice PHP:

<html> <head> <title>funziona ajax?</title> <style> body { margin: 0 auto; width: 500px; } #ajax { width: 300px; border: 1px dotted #000; padding: 5px; margin: 20px; } </style> </head> <body> <script> function test() { // creo ajax var ajaxRequest = new XMLHttpRequest(); // ricezione dal form 'mod' //ajaxRequest.onreadystatechange = function(){ // if(ajaxRequest.readyState == 4){ document.mod.time.value = ajaxRequest.responseText; } //} //var nome = document.getElementsById("nome").value; ajaxRequest.open("GET", "ajax/ajax.php"/* + nome*/, true); ajaxRequest.send(null); } </script> <h1>Funziona ajax?</h1> <h3><a href="#" onclick="test();">test di ajax!!</a></h3>  </body> </html>

ma non funziona! =(
23-08-2009, 14.16.05
dementialsite

Provo a scriverti l'esempio completo come dovrebbe essere, spero che così sia più chiaro: il file ajax.php è quello che ti ho scritto sopra. Questo è il file HTML:

Codice HTML:

<html> <head> <title>Test AJAX</title> <script type="text/javascript"> function test () { // creo l'oggetto XMLHttpRequest var req = new XMLHttpRequest (); // definisco la funzione da eseguire al cambio di stato req.onreadystatechange = function () { // a richiesta conclusa (readyState = 4) e andata a buon fine (stato HTTP 200 - OK) if (req.readyState == 4 && req.status == 200) // scrivo nel "segnaposto" (vedi sotto) l'output dello script PHP che ho invocato document.getElementById('time').innerHTML = req.responseText; }; // dichiaro il file da aprire req.open('GET', 'ajax.php', true); // avvio la richiesta req.send(null); } </script> </head> <body> <p>Orario del server:  <span id="time"></span>  <input type="button" value="Aggiorna" onclick="test()" /> </p> </body> </html>

Ci ho messo un po' di commenti per essere più chiaro... trovi qui l'esempio in funzione: http://dementialsite.altervista.org/.../testajax.html

Stammi bene...
23-08-2009, 15.00.44

Ok, Grazie. Ma non c'è un modo più semplice di effettuare un semplice prelievo o invio tramite ajax?? Grazie mille, Davide.
23-08-2009, 17.45.48
dementialsite

Ehm... a dire il vero quell'esempio è proprio quello che richiede meno codice possibile... che cosa intendi con "più semplice"...?

Stammi bene...
23-08-2009, 18.09.29

Quello che ho postato io nel #1...intendo cosa "mancava" di preciso??
Grazie mille!!
24-08-2009, 01.24.31
matt93

...se vuoi qualcosa di più semplice...
http://www.prototypejs.org/api/ajax/request
24-08-2009, 01.27.43

Non fraintendermi matt, volevo imparare le basi da solo tutto qui! ^^" Come per PHP prima la programmazione poi i CMS già fatti! :wink:
Allora mi trovo davanti ad un problema: non funziona il mio scriptino! =(

Codice PHP:

<html> <head> <title>funziona ajax?</title> <style> body { margin: 0 auto; width: 500px; } #ajax { width: 300px; border: 1px dotted #000; padding: 5px; margin: 20px; } </style> </head> <body> <script> function test() { // creo ajax var ajaxRequest = new XMLHttpRequest(); //var ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); // internet explorer 6 // ricezione dal form 'mod' ajaxRequest.onreadystatechange = function(){ if (req.readyState == 4 && req.status == 200) { var nome = document.getElementsById("nome").value; } } ajaxRequest.open("GET", "ajax/ajax.php" + nome, true); ajaxRequest.send(null); } </script> <h1>Funziona ajax?</h1> <form name="mod"> <b>Inserisci il tuo nome:</b><br /> <input type="text" id="nome" size="80" /><br /> <input type="button" onclick="test()" value="funziona ajax?" /> </form> </body> </html>

il file php:

Codice PHP:

<?php $nome = $_GET["nome"]; echo "<div id='ajax'>{$nome}</div>"; ?>

Grazie mille...
24-08-2009, 09.56.47
dementialsite

Il tuo script ha parecchi errori (ma alcuni sono legati ai fondamentali di JavaScript, AJAX non c'entra...). Te li commento un po':

- nella tua funzione la variabile "req" non è definita, quindi non hanno senso req.readyState e req.status. Ce ne hanno già di più se metti "ajaxRequest" al posto di "req"
- stai sbagliando a chiamare lo script, se usi dei parametri la sintassi corretta è

Codice:

ajaxRequest.open ('GET', 'ajax/ajax.php?nome=' + nome, true);

- risolto questo, ti trovi con una funzione che non fa nulla, se non leggere il valore da una casella di testo già presente sulla pagina senza modificarlo! Mettendo questa riga ci scrivi sopra:

Codice:

document.getElementById('nome').value = ajaxRequest.responseText;

- altra modifica che devi fare, è impostare la variabile nome prima di passarla come parametro allo script PHP: per provare ti basta mettere una riga di assegnazione prima della chiamata a open()

Fatte queste modifiche, dovresti essere in grado di vedere qualcosa...

Stammi bene...
24-08-2009, 12.16.55

Con questo codice:

Codice PHP:

<html> <head> <title>funziona ajax?</title> <style> body { margin: 0 auto; width: 500px; } #ajax { width: 300px; border: 1px dotted #000; padding: 5px; margin: 20px; } </style> </head> <body> <script> function test() { // creo ajax var ajaxRequest = new XMLHttpRequest(); //var ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); // internet explorer 6 // ricezione dal form 'mod' ajaxRequest.onreadystatechange = function(){ var nome = document.getElementById("nome").value = ajaxRequest.responseText; } ajaxRequest.open("GET", "ajax.php?nome=" + nome, true); ajaxRequest.send(null); } </script> <h1>Funziona ajax?</h1> <form name="mod"> <b>Inserisci il tuo nome:</b><br /> <input type="text" id="nome" size="80" /><br /> <input type="button" onclick="test()" value="funziona ajax?" /> </form> </body> </html>

Ajax sembra funzionare, ma non bene! In pratica nel form dopo l'invio viene scritto dentro questo: <div id='ajax'>[object HTMLInputElement]</div>
Come risolvo? Grazie mille.
24-08-2009, 12.31.55
dementialsite

Citazione:

Originalmente inviato da sIM

... Ajax sembra funzionare, ma non bene! In pratica nel form dopo l'invio viene scritto dentro questo: <div id='ajax'>[object HTMLInputElement]</div>
Come risolvo? Grazie mille.

Te l'ho scritto sopra:

Citazione:

Originalmente inviato da dementialsite

- altra modifica che devi fare, è impostare la variabile nome prima di passarla come parametro allo script PHP: per provare ti basta mettere una riga di assegnazione prima della chiamata a open()

Stammi bene...
24-08-2009, 13.21.15

Dici così?

Codice PHP:

function test() { // creo ajax var ajaxRequest = new XMLHttpRequest(); //var ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); // internet explorer 6 // ricezione dal form 'mod' ajaxRequest.onreadystatechange = function(){ var nome = document.getElementById("nome").value = ajaxRequest.responseText; } var nome = "ciao"; ajaxRequest.open("GET", "ajax.php?nome=" + nome, true); ajaxRequest.send(null); }

Mostra <div id='ajax'>ciao</div> ma come faccio a farlo uscire fuori dal form? Grazie mille!!
24-08-2009, 14.50.39
dementialsite

Se "farlo uscire fuori dal form" significa metterlo in una parte diversa della pagina, ti ho già spiegato come fare... devi crearti un segnaposto vuoto che andrai a modificare in seguito.

Provo adesso a buttarti giù un esempio, vediamo se ho capito quello che intendi fare... eccolo qui: http://dementialsite.altervista.org/...testajax2.html

Stammi bene...
24-08-2009, 15.51.04

Ok, credo di aver capito le basi con quest'ultimo esempio. Grazie!
Ma non c'è un modo invece di inserire l'id, ma il nome per ricavare il campo?
Cioè: il campo viene rilevato da id=".." io invece voglio che venga rilevato da name="..." che funzione tipo getElementById devo usare? Grazie mille!!
24-08-2009, 16.10.22
dementialsite

Se sono campi di un form, puoi usare la vecchia sintassi:

Codice:

document.nomeModulo.nomeCampo.value

nomeModulo e nomeCampo sono i valori degli attributi NAME rispettivamente per il tag FORM e per il tag INPUT.
Per gli altri elementi HTML, purtroppo usare l'ID è l'unica soluzione... se ti è pesante scriverlo, puoi sempre aggiungere una funzione del genere al tuo script:

Codice:

function el(id) { return document.getElementById(id); }

e usare questa per accedere agli elementi, il risultato sarà identico...

Stammi bene...