Server-side vs Client-side

Introduzione

Quest'articolo è la traduzione di "Server-side vs. Client-side" scritto da Mark Cloyd.

La versione originale di questo articolo può essere trovata qui.

"Sì, Mrs. Smith, mi rendo conto che il suo sito non è raggiungibile. Sto facendo il possibile per scoprire qualcosa. No, qui è tutto ok, anche i PC. No, neanche io posso accedere al suo sito. E' su un server in Virginia".

Avete mai ricevuto una telefonata del genere o siete mai stati una Mrs. Smith? Dopotutto, per alcuni l'idea che un sito Web sviluppato dalla "Joe's Local Web Company" non sia sul computer di Joe e che Joe non possa accedervi è un po' disorientante. Lo stesso vale per alcuni script o linguaggi di scripting. Non è inconsueto avere persone che hanno dubbi riguardo script server-side e client-side e, se non se ne è a conoscenza, non c'è niente di sbagliato nel chiedere. Definiamoli:

1. Script server-side: script interpretati ed eseguiti sul server e successivamente passati al vostro browser via Internet o Intranet.

2. Script client-side: script interpretati ed eseguiti dai plug-in o dai moduli associati al vostro browser senza la necessità di una connessione Internet o Intranet.

Ancora un po' disorientati? Bene, andiamo avanti e diamo uno sguardo più approfondito.

Panoramica

1. Le applicazioni client-side.

2. Le applicazioni server-side.

3. Usare client-side e server-side insieme.

1. Le applicazioni client-side

Le applicazioni client-side dipendono dal vostro browser. Usano moduli o plug-in capaci di leggere uno script e fare quello che chiede. La versione del browser può fare differenze nell'interpretare questi script. I browser più vecchi non riescono ad interpretare parte del codice usato negli script più recenti. La scelta del browser può fare differenza. Internet Explorer (IE) e Netscape Navigator (Netscape) non interpretano il codice sempre allo stesso modo. Vale lo stesso per l'HTML. Maggiori informazioni riguardo alla compatibilità per browser e Javascript sono disponibili cliccando qui.

Diamo uno sguardo ad una semplice funzione Javascript (ricordate, questo codice è processato dal vostro browser):

<script language='JavaScript'>
   <!--
     function setFocus() {
     document.submessage.go.focus();
     document.submessage.message.focus();
     }
   -->
   </script>

Lo scopo di questa funzione dovrebbe essere abbastanza chiaro, ma, nel caso in cui non aveste mai visto nulla di Javascript, la analizziamo per voi.

Visto che la sintassi di Javascript è molto simile a quella del PHP, dovreste capire che il nome della funzione è "setFocus". Quello che c'è dentro potrebbe risultare sconosciuto.

document.submessage.go.focus();

document.submessage.message.focus();

Queste due righe molto semplicemente focalizzano l'attenzione su due differenti oggetti. Il primo è un oggetto chiamato "go in" un form chiamato "submessage" sul documento di riferimento. Il secondo è lo stesso, ma il nome dell'oggetto è "message".

2. Le applicazioni server-side

Le applicazioni server-side dipendono da script o moduli addizionali che risiedono sul server, interpretano i dati sul server ed inviano un risultato al browser. La compatibilità del browser raramente è un problema perché una volta che l'informazione è interpretata dal server ed inviata al browser arriva in formato HTML, un formato nativo per il browser.

Questo è un esempio di script server-side:

<?php
   $query = mysql("chat" ,"SELECT member,face_name FROM members WHERE member = '$member'");// (query probabilmente customizzata dall'autore (n.d.t.))
     $member = mysql_result($query,0,"member");
     $face_name = mysql_result($query,0,"face_name");
     echo "<br><br>
<tr>
 

     <form name='submessage' action="$PHP_SELF?$input&member=$member"
     method='post' target='return' onSubmit="setFocus();">
         <input type='hidden' name='id' value=''>
         <input type='hidden' name='face_name' value='$face_name'>
         <table cellpadding='3' cellspacing='0' width='90%' border='0'>
             <tr>
                 <td>Message: <input type='text' name='message' size='50'
                 onFocus="reset();"></td>
                 <td align='center'><input type='submit' name='go'
                 value="Submit"></td>
             </tr>
     </form>

     <form action="$PHP_SELF?$delete&member=$member" method='post'>
             <tr>
                 <td align='center'><input type='submit' name='clear'
                 value="Clear Screen"></td>
             </tr>
     </form>
</tr>

         </table>
     ";
?>

Niente di troppo speciale, tuttavia, se date uno sguardo al tag "Form" , l'ultima cosa che vedrete è questa:

onSubmit="setFocus();"

Questo dice semplicemente al form che, una volta inviato, deve chiamare la nostra (client-side) function setFocus(). Date uno sguardo al form e vedrete che l'oggetto chiamato "go" è il pulsante Submit e l'oggetto chiamato message è una text box. Ora guardate un po' più da vicino la fine dell'oggetto message e vedrete:

onFocus="reset();"

Ora inizia a tornare tutto. Diamo uno sguardo all'insieme:

3. Usare client-side e server-side insieme

Estratto da chat.php (funzione sviluppata dall'autore (n.d.t.)):

<?php
   echo "
     <script language='JavaScript'>&l t;!--
       function setFocus() {
         document.submessage.go.focus();
         document.submessage.message.focus();
       }
     --></script>
     ";

   $query = mysql("chat" ,"SELECT member,face_name FROM members WHERE member = '$member'");
   $member = mysql_result($query,0,"member");
   $face_name = mysql_result($query,0,"face_name");

   echo "<br><br>
   <table cellpadding=3 cellspacing=0 width=90% border=0>
     <tr>
       <form name=submessage action="$PHP_SELF?$input&member=$member"
       method=post target=return onSubmit="setFocus();">
       <input type=hidden name=id value=''>
       <input type=hidden name=face_name value='$face_name'>
       <td>Message: <input type=text name=message size=50
       onFocus="reset();"></td>
       <td align=center><input type=submit name=go value="Submit"></td>
       </form>

       <form action="$PHP_SELF?$delete&member=$member" method=post>
       <td align=center><input type=submit name=clear
       value="Clear Screen"></td>
       </form>
     </tr>
   </table>
";
?>

Sappiamo di avere una funzione client-side (in Javascript) che lavora insieme ad una funzione server-side (in PHP), quindi che cosa fa? Questo è un estratto da una chat room che ho scritto (a dire il vero, che sto ancora scrivendo). Questa porzione di codice è dove l'utente inserisce informazioni nella text box e clicca su "Submit".

Quando un utente clicca su "Submit" , viene eseguito il Javascript (nel browser) e prima focalizza l'attenzione sullo stesso pulsante. Sembra un po' ridondante; lo spiegherò velocemente.

Successivamente la nostra funzione focalizza l'attenzione al message box. Una volta fatto questo, il box è automaticamente cancellato. Ora tutto ha senso. Se cliccate su "Submit" , il contenuto del message box è inviato al server, quindi la text box è vuota ed il cursore è di nuovo lì pronto a scrivere il vostro nuovo messaggio.

Quindi, perché il codice dovrebbe focalizzare l'attenzione sul pulsante "Submit" se voi lo fate automaticamente cliccandoci su? Quante volte avete inviato un form, specialmente nelle chat, premendo Invio? Bene, questo è ciò che il focalizzare l'attenzione fa per il nostro pulsante: focalizza l'attenzione sul pulsante come se aveste cliccato su di esso e subito dopo focalizza l'attenzione sull'oggetto "message".

Ora, mentre tutto questo va avanti, il server riceve le informazioni inviate col form quando avete cliccato su "Submit" , le processa e le invia al browser in formato HTML, pronte per essere lette da voi.

Potrebbe sembrare un po' complicato, ma il punto principale per voi è capire quali parti di questo frammento di codice sono processate dal browser (client-side) e quali sono processate dal server (server-side).

Ringraziamo per la gentile concessione l'autore e PHPBeginner.com