Commenti e domande su: Guida completa alla creazione di un Applicazione Web

« Older   Newer »
 
  Share  
.
  1. BOH
        +1   -1
     
    .

    User deleted


    In questa discussione potete postare tutto quanto vi passa per la testa riguardo al tutorial sulla creazione di applicazioni web.
     
    Top
    .
  2.     +1   -1
     
    .
    Avatar

    Senior Member

    Group
    Admin
    Posts
    27,291

    Status
    Anonymous
    Anteprima:



    Il Primo cliccami va nel Body ^^ Il secondo (messo per sfizio) Nel Div xD
    Codice Pagina Html:
    CODICE
    <head>
    <title>Esercizio</title>
    <script>
    function esercizio()
    {
    var pippobaudo = false;
    if (window.XMLHttpRequest){
    pippobaudo = new XMLHttpRequest();
    }
    if(pippobaudo)
    {
    pippobaudo.open('GET', 'esercizio.php');
    pippobaudo.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    pippobaudo.onreadystatechange = function()
    {
    if (pippobaudo.readyState==4)
    {
    var esercizio = pippobaudo.responseText;
    document.body.innerHTML += esercizio.substr(0,3);
    }
    }
    pippobaudo.send();}
    }

    function esercizio2()
    {
    var pippobaudo = false;
    if (window.XMLHttpRequest)
    {
    pippobaudo = new XMLHttpRequest();
    }
    if (pippobaudo)
    {
    pippobaudo.open('GET', 'esercizio.php?act=div');
    pippobaudo.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    pippobaudo.onreadystatechange = function()
    {
    if (pippobaudo.readyState==4)
    {
    var Esercizio2 = pippobaudo.responseText;
    document.getElementById('div').innerHTML += Esercizio2.substr(0,3);
    }
    }
    pippobaudo.send();}
    }</script>
    </head>
    <body>

    <button onclick="esercizio()">Cliccami ^^</button>  <button onclick="esercizio2()">Cliccami2 ^^</button>  <div id=div></div></body></html>

    Ho voluto usare GET Al posto di POST , Mi conviene non farlo? XD.
    Codice Pagina Php:
    CODICE
    <?php
    if($_GET['act'] === "div"){echo 'Divaa';exit;}
    echo "Stringa";
    ?>

    Per il primo esercizio ho voluto seguire alla lettera la guida ^^ , (per migliorare con il js) Le prossime guide cambierò completamente o quasi il codice ^^.
     
    Top
    .
  3. BOH
        +1   -1
     
    .

    User deleted


    il GET serve quando vuoi mettere i dati da passare all'interno della URL, il posto quando li vuoi mettere nel corpo del testo. In generale non cambia nulla se non che più dati hai e più conviene il POST.

    Detto questo, passiamo agli errori (anche se essenzialmente va bene come codice):

    1. Manca il controllo per le versioni vecchie di IE
    2. Se premo più volte il bottone la stringa si accumula invece che sostituirsi. per evitare questo devi mettere = al posto di += dopo innerHTML
    3. L'id degli elementi html va inserito tra doppi apici
    4. Non ha nessun senso che tu crei 2 funzioni che facciano la stessa cosa. Puoi tranquillamente raggiungere lo stesso obiettivo con una sola funzione. Quindi rifai l'esercizio usando una sola funzione (il motivo è che così obblighi l'utente a scaricare una pagina pesante il doppio; quando la pagina inizia a diventare bella grossa questa cosa è molto importante).
     
    Top
    .
  4.     +1   -1
     
    .
    Avatar

    Senior Member

    Group
    Admin
    Posts
    27,291

    Status
    Anonymous
    CODICE
    <head>
    <title>Esercizio</title>
    <script> document.getElementById('div').innerHTML = getElementById("secondo").value </script>
    <script>
    function esercizio()
    {
    var pippobaudo = false;
    if (window.XMLHttpRequest){
    pippobaudo = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
          pippobaudo = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if(pippobaudo)
    {
    if(document.getElementById('secondo').value == "ciao"){
    pippobaudo.open('POST', 'esercizio.php?act=div');}
    if(document.getElementById('primo').value  == "ciao"){
    pippobaudo.open('POST', 'esercizio.php');}

    pippobaudo.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    pippobaudo.onreadystatechange = function()
    {
    if (pippobaudo.readyState==4)
    {


    var Esercizio2 = pippobaudo.responseText;
    document.getElementById('div').innerHTML = Esercizio2.substr(0,3);


    }
    }
    pippobaudo.send();}
    }
    </script>
    </head>
    <body>

    <button id="primo" onclick="this.value='ciao';esercizio();this.value=''" >Cliccami ^^</button>  
    <button  id="secondo" onclick="this.value='ciao';esercizio();this.value=''">Cliccami ^^</button>  <div id="div"></div></body>

    </html>


    Codice corretto ^^
     
    Top
    .
  5. ~D.
        +1   -1
     
    .

    User deleted


    Provato anche io
    Link
     
    Top
    .
  6. BOH
        +1   -1
     
    .

    User deleted


    Il link non basta...cioè si da li posso vedere tutta la parte client, ma non quella server. Ora quella server è intuibile, ma con l'avanzare delle esercitazioni potrebbe essere necessario anche visualizzare quella.

    ps. se postate qua il codice usate il bottone CODE e non HTML perchè il secondo non vi tiene le tabulazioni :)

    in giornata vedo di controllare entrambe le risposte
     
    Top
    .
  7.     +1   -1
     
    .
    Avatar

    Senior Member

    Group
    Admin
    Posts
    27,291

    Status
    Anonymous
    Io ho postato entrambi xD, Quello di prima è lo stesso (la pagina .php)
     
    Top
    .
  8. BOH
        +1   +1   -1
     
    .

    User deleted


    Per Para:

    la tua soluzione funziona, ma di nuovo non è la migliore...non ha alcun senso dover andare a fare un getelement per leggere una proprietà di un bottone che è appena stato premuto. Oltretutto se questo include un doppio if.

    Quindi: tanto per iniziare il secondo if deve diventare un else if, in modo che venga eseguito il controllo solo se serve. Se già il primo è andato a buon fine allora non ha senso che il secondo venga controllato.

    Secondariamente la soluzione corretta è questa:

    Bottoni:

    CODICE
    <button id="primo" onclick="esercizio('?act=div')" >Cliccami ^^</button>  
    <button  id="secondo" onclick="esercizio('')">Cliccami ^^</button>


    Dichiarazione funzione:

    CODICE
    function esercizio(act)
    {


    Poi si tolgono definitivamente quei 2 if e si fa la chiamata così:
    CODICE
    pippobaudo.open('POST', 'esercizio.php'+act);


    Appena riesco faccio la prossima lezione
     
    Top
    .
  9.     +1   -1
     
    .
    Avatar

    Senior Member

    Group
    Admin
    Posts
    27,291

    Status
    Anonymous
    CODICE
    <head>
    <title>Esercizio</title>

    <script>
    function esercizio(act)
    {
    var pippobaudo = false;
    if (window.XMLHttpRequest){
    pippobaudo = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
          pippobaudo = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(pippobaudo)
    {
    pippobaudo.open('POST', 'esercizio.php'+act);

    pippobaudo.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    pippobaudo.onreadystatechange = function()
    {
    if (pippobaudo.readyState==4)
    {


    var Esercizio2 = pippobaudo.responseText;
    document.getElementById('div').innerHTML = Esercizio2.substr(0,3);


    }
    }
    pippobaudo.send();}
    }
    </script>
    </head>
    <body>
    <button id="primo" onclick="esercizio('?act=div')" >Cliccami ^^</button>  
    <button  id="secondo" onclick="esercizio('')">Cliccami ^^</button>
     <div id="div"></div></body>

    </html>


    Sistemato ^^.
     
    Top
    .
8 replies since 21/10/2012, 10:40   121 views
  Share  
.