QUalcosa che non ho capito di AJAX..

[lyllo]

ciao gente.
sono un paio di giorni che sto iniziando ad avvicinarmi ad ajax e vorrei implementarlo nel sito che vorrei tirare su nei prossimi mesi.

il fatto è che non riesco davvero a capire come funzioni.

ho capito che bisogna creare un "oggetto" ajax, e fin qui ok:

function comunicazione_ajax(server_page,var_nome,var_valore)
    {
    // Ottengo l'oggetto ajax a seconda del browser **per i browser che lo supportano** (aggiungere controlli per quelli vecchi).
    if (typeof window.ActiveXObject!="undefined") ajax = new ActiveXObject("Microsoft.XMLHTTP");
    else ajax = new XMLHttpRequest()
}

in questo modo i browser saranno "istruiti".
ma poi il resto è molto nebuloso.
sto cercando di usare le guide online, comprese quelle di html.it
solo che l'unica prova che ho portato a termine con successo è stata quella di "ajax in 30 secondi", che scrive in un div una frasetta idiota.

non riesco a capire la filosofia di come funziona e quindi mi blocco

stavo, per esempio, cercando di implementare una procedura per un login piu sicuro, usando una guida di html.it.
solo che non capisco dove sbaglio, non avendo capito l'algoritmo con cui lavora.

per usare ajax e PHP ho capito che servono degli echo, ma non capisco due cose:
1) l'echo è come se "scrivesse" una variabile ajax?
2) come cavolo faccio ad uscire con un output da una funzione php che venga poi riutilizzata da ajax? come indico le variabili su cui ho lavorato per rilavorarci poi in javascript?


questo tanto per iniziare

intanto grazie a tutti.
ciao ciao.

[cavicchiandrea]

Provo a spiegarti il concetto (o perlomeno come l'ho capita io)
I vantaggi maggiori di ajax sono:
- A) Spedire "blocchi" di codice pertanto leggerezza;
- B) Non ricaricare la pagina;
di fatto non cambia nulla con un click su di un pulsante o link fai una richiesta al server l'unica differenza e il metodo di spedizione, spedendo a blocchi cioè solo i dati che occorrono la risposta del server è molto + veloce.
Esempio, nel tuo caso che vuoi fare un login invi al server user+password il server riceve i dati verifica gli stessi e stampa direttamente i dati che ajax mostra direttamente a video.
Spero tu abbia capito, comunque vai su http://www.wikipedia.it/ e apri la scheda di ajax oltre ad essere molto ben spiegato ci sono molte altre cose.

[br1]

Originariamente inviato da lyllo
per usare ajax e PHP ho capito che servono degli echo, ma non capisco due cose:
1) l'echo è come se "scrivesse" una variabile ajax?
2) come cavolo faccio ad uscire con un output da una funzione php che venga poi riutilizzata da ajax? come indico le variabili su cui ho lavorato per rilavorarci poi in javascript?

questo tanto per iniziare

VVoVe:
Prima di cominciare a studiare ajax devi avere ben chiara la distinzione fra server e client, quali linguaggi nei due ambienti; quali eventi; la comunicazione client-server in ambiente web; i momenti in cui vengono eseguiti; ... per citare solo i principali.
Mi spiace, ma questo non e' certo il luogo piu' adatto per somministrare lezione teoriche... insisti con le guide

ciao

[lyllo]

Originariamente inviato da br1
VVoVe:
Prima di cominciare a studiare ajax devi avere ben chiara la distinzione fra server e client, quali linguaggi nei due ambienti; quali eventi; la comunicazione client-server in ambiente web; i momenti in cui vengono eseguiti; ... per citare solo i principali.
Mi spiace, ma questo non e' certo il luogo piu' adatto per somministrare lezione teoriche... insisti con le guide

ciao

non chiedo una lezione di programmazione, è gia qualche anno che prgorammo in php, per cui non sono digiuno.
chiedevo delucidazioni su ajax....

[jimmyphp]

Provo a spiegare semplicemente:

crei l'oggetto ajax che ti serve per effettuare una richiesta verso il server web, la richiesta può passare parametri al server con GET o POST
La richiesta la elabori come vuoi lato server (nel tuo caso PHP) e rispondi con un semplice echo.
La risposta che darai sarà accessibile in javascript e la puoi usare come vuoi (es. se contiene HTML lo puoi usare x riempire un div).
Mentre avvengono queste "cose" l'utente non si accorge di nulla e può continuare a lavorare.

Credo che ti aiuterebbe usare qualche libreria (es jquery):



http://docs.jquery.com/Ajax

ti faccio un esempio:

 $.ajax({
   type: "POST", //oppure GET
   url: "prova.php", //script da chiamare la to server
   data: "nome=mario&cognome=Rossi", //parametri da usare lato server
   success: function(msg){ //funzione da eseguire quando il server risponde
     alert( msg ); //msg contiene la risposta del server es. echo "Utente Mario Rossi inserito correttamente"; 
    }
 }); 

[lyllo]

intanto grazie per la risposta.
il fatto è che non riesco a capire come vengono realizzate queste routine di comunicazione.

in php il passaggio di informazioni e di variabili è chiaro, mentre non riesco a capire dove/come vengano fatte le stesse cose in ajax.

ragionando su questa pagina, per esempio: http://php.html.it/articoli/leggi/22...-ajax-e-php/3/ che è lo script-spunto da cui sono partito per avvicinarmi più concretamente ad ajax, a livello logico sono riuscito a capire l'algoritmo con cui lavora.
forse commetto qualche errore perchè lavoro con le classi e non essendone affatto esperto, commetto le gestisco male soprattutto in fase di adattamento alle mie necessità...

forse potrei provare a lavorare senza classi, ma ad un livello più semplice?

[lyllo]

allora ho fatto qualche prova più concreta, nella speranza di iniziare a tirare fuori qualcosa di più concreto.
al momento non funziona nulla, ma almeno sto provando a buttar giu due righe di codice.

index.php

<?php
require_once('conn.inc.php');
require_once('funzioni.inc.php');

if (isset($_GET['__user'])){
    echo "eseguito ajax";
    }

?>

<html>
<head>
<script language="javascript" src="ajax.js"></script>
<script language="javascript" src="md5.js"></script>
</head>
<body>

<form name="login" method="POST" action="index.php?__submit">
UN: <input type="text" name="user" onkeypress="getNewHTTPObject()" />

PW: <input type="password" name="pword" />

<input type="submit" value="Entra" />
</form>
</body>
</html>

ajax.js

function getNewHTTPObject()
{
        var xmlhttp;

        /** Special IE only code ... */
        /*@cc_on
          @if (@_jscript_version >= 5)
              try
              {
                  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
              }
              catch (e)
              {
                  try
                  {
                      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  catch (E)
                  {
                      xmlhttp = false;
                  }
             }
          @else
             xmlhttp = false;
        @end @*/

        /** Every other browser on the planet */
        if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
        {
            try
            {
                xmlhttp = new XMLHttpRequest();
            }
            catch (e)
            {
                xmlhttp = false;
            }
        }

        return xmlhttp;
}



var xmlHttp = getHTTPObject();

function getDynamicData()
{
  var url = "index.php?__user";

  xmlHttp.open('GET', url, true);
  xmlHttp.onreadystatechange = callbackFunction;
  xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xmlHttp.send(null);
}

var syndLinkRequest = getNewHTTPObject();

function callbackFunction()
{
  if (syndLinkRequest.readyState != 4)
    return;

  var result = xmlHttp.responseText;

}

perchè se inizio a scrivere nel campo user, nel form login, non succede nulla e non appare l'echo "eseguito ajax"?

[artorius]

scusa, ma non prendertela male: se fai copia incolla del codice non lo capirai mai, devi capire che cosa FA il codice prima di implementarlo:

<input type="text" name="user" onkeypress="getNewHTTPObject()" /> chiama la funzione getNewHTTPObject() che non fa altro che istanziare l'oggetto XMLHTTPRequest del browser in uso, ma si ferma li, non fa altro che ritornare l'oggetto che, giustamente, viene ottenuto e poi scartato dall'element.

Comunque, ti raccomando il consiglio di jimmyphp: usa una libreria se non hai chiaro il funzionamento, sia jQuery, sia prototype JS, sia Mootools, e molte altre, tutte hanno delle semplicissime funzioni, ampiamente documentate, con moltissimi esempi pratici.

[lyllo]

non ho fatto pedissequamente copia/incolla.
ho fatto una fusione delle cose che sto cercando di imparare.
tenete conto, per favore, che sono 3 giorni che sto provando ad avvicinarmi ad ajax.

tornando al codice che ho inserito, ho preso del codice che pensavo dovesse creare l'oggetto "ajax", poi... si mi sono sbagliato perchè ho richiamato la funzione che creare l'oggetto ajax e basta

avrei dovuto lanciare getNewHTTPObject() magari al load del body, in modo da creare subito l'"xmlhttp" e dal click su textbox getDynamicData() giusto?

questo per generare sempicemente l'evento echo "ajax eseguito" vero?

con callbackFunction() dovrei essere in grado di generare degli output per rendere il codice piu articolato vero?

[artorius]

no... allora senti facciamo un'esempio un pelo più semplice:

(credo che il codice che posto lo capirai senza troppi problemi quindi non l'ho commentato, ma se non capisci qualcosa rispondimi)

1- Crea un file simple_echo.php nella stessa Directory del file della form.
-Testo del file:

<?php
echo $_GET['testo'];
?>
2- Non creare una form (non ne hai bisogno) ma metti solo questo HTML:

Metti qui il Testo: <input type="text" name="MyText" id="MyTextId"/>

        <input type="button" onclick="getDynamicData('MyTextId')" value="Clicca per Attivare AJAX" />
        <div id="MyResultId">
            
        </div> 

3- Modifica il JS con questo:

function getNewHTTPObject()
{
       var xmlhttp;
       /** Special IE only code ... */
       /*@cc_on
         @if (@_jscript_version >= 5)
             try
             {
                 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
             }
             catch (e)
             {
                 try
                 {
                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 catch (E)
                 {
                     xmlhttp = false;
                 }
            }
         @else
            xmlhttp = false;
       @end @*/
       /** Every other browser on the planet */
       if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
       {
           try
           {
               xmlhttp = new XMLHttpRequest();
           }
           catch (e)
           {
               xmlhttp = false;
           }
       }
       return xmlhttp;
}
            
            
            
            
function getDynamicData(id)
{
    var text = document.getElementById(id).value;
    var xmlHttp = getNewHTTPObject();
    var url = "simple_echo.php?testo="+text;

    xmlHttp.open('GET', url, true);
    xmlHttp.onreadystatechange = callbackFunction;
    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttp.send(null);
}
            
            
function callbackFunction()
{
    if (this.readyState != 4)
        return;

    var result = this.responseText;
    document.getElementById('MyResultId').innerHTML = result;
} 

I punti salienti che vorrei che tu notassi sono:
1- getDynamicData prende ora in ingresso una stringa che utilizza per trovare un elemento che abbia quella stringa come id e ne estragga il contenuto dell'attributo value. Questa funzione viene chiamata sull'evento onClick del bottone nell'HTML e gli viene passato come id l'id dell'input text soprastante.

2- sempre in getDynamicData ho aggiunto la creazione dell'oggetto XMLHttpRequest ( var xmlHttp = getNewHTTPObject() e come url ho inserito simple_echo.php aggiungendogli come paramentro GET testo= il testo contenuto nell'input text con id passato alla funzione.

3- callbackFunction non si limita ora a controllare che lo stato dell'oggetto XMLHttpRequest sia 4 (concluso con successo) ma anche inserisce come innerHTML del DIV con id="MyResultId" il risultato della chiamata AJAX (che è quello che risponde simple_echo.php).

Una nota: lo Scope della funzione callbackFunction è l'oggetto XMLHttpRequest, quindi puoi accedere al readyState ed al responseText semplicemente usando il this.