Salve Utenti.
Ho intenzione di imparare Ajax, seguendo l'ottima 'Guida Ajax' di Andrea Giammarchi.
Piattaforma del mio server locale: Apache 2.2 + PHP 5.2.6 + MySQL 5.0 + mysql_5.0.27 + mysqli_5.0.27 + phpMyAdmin 2.11.8:; browser: Internet Explorer 7; S.O. Windows XP.
In questo percorso di autoapprendimento, posterò non solo quando non riesco a
trovare l'errore, ma anche quando credo di non aver compreso del tutto o in parte importanti concetti. Pertanto, sopratutto relativamente al secondo punto, per rendere sostenibile il dialogo sul forum con gli esperti, riporterò un riassunto brevissimo dei passaggi essenziali, e contestuali al problema, della suddetta Guida Ajax (cui nel prosieguo ci riferiremo con il termine 'Guida'). Ho certamente esagerato quando nel titolo affermo Javascript/Ajax. un divertimento assicurato!. Però, più modestamente e concretamente, intendo dire che ci potrebbe essere una forma di soddisfazione intellettuale (divertimento) nello scoprire, o riscoprire secondo una prospettiva diversa, fatti e concetti relativamente recenti, e sui quali discutere per approfondimento. Quindi, non solo la ricerca dell'errore, ma anche la revisione dei concetti che, male intesi, hanno causato l'errore. Un approccio fuori dalla norma, ma che potrebbe anche rivelaresi proficuo, con un pò di buona volontà!
Intanto, occorre una brevissima premessa generale , che io faccio riferendomi al link della stessa Guida nella Lez.1
Il link è il seguente: Ajax: A New Approach to Web Applications , di Jesse James Garrett, che per la prima volta, il 18 Febbraio del 2005, ha enunciato l’acronimo Ajax (Asynchronous JavaScript + XML).
Garrett ci dice che Ajax è un concetto che sta alla base di un insieme di tecnologie per un nuovo approccio alle applicazioni Web: XHTML + CSS, per la presentazione di documenti; il DOM, per la visualizzazione dinamica di una pagina HTML o XML; XML + XSLT, per lo scambio e la manipolazione di dati; l’oggetto XMLHttpRequest, per il recupero asincrono dei dati, e infine Javascript come collante del tutto.
Sopratutto, è molto istruttivo ed illuminante il grafico relativo al ruolo lato Client del motore Ajax, che sta tra l'interfaccia utente (semplificando molto, potremmo dire 'monitor) ed il server. In base a tale grafico, l'Ajax engine riceve i Javascript call dalla user interface e li inoltra al server come Http request sul Http(s) transport ; dal server riceve gli Xml Data , che, eventualmente convertiti in Html + CSS Data, vengono passati all'indietro alla user interface. E' importante sottolineare che una parte di questi ultimi dati sono creati ed elaborati sullo stesso lato client, come ad esempio la convalida dei dati di un form, e non provengono quindi dal server. In definitiva, il motore Ajax, in modo asincrono (potremmo dire anche ‘in sotto fondo’ ) fornisce dati all’utente, anzichè costringerlo a stare a fissare il monitor in attesa delle risposte del server.
N.d.r. Chiedo a tutti gli utenti: per risparmiareci tanti termini, c'è un modo di visualizzazione diretta (senza ricorrere all'allegato) del grafico sul thread corrente. Se si, come si fa? GRAZIE!
Fatta la premessa, veniamo al primo intoppo.
Nella Lez.3 della Guida, dal titolo 'Interazioni semplici', tutto tranquillo fino al Listato 2. Modificare un testo al caricamento della pagina.
Ciò che non ho capito è l'esatto significato del Listato 3. Inserire e modificare elementi da Javascript.
Per comodità del lettore, riporto il codice:
Questo il mio output sul browser:Codice PHP:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, [url]www.pspad.com[/url]">
<title></title>
<script type="text/javascript">
function prendiElementoDaId(id_elemento) {
// elemento da restituire
var elemento;
// se esiste il metodo getElementById
// questo if sarà diverso da false, null o undefined
// e sarà quindi considerato valido, come un true
if(document.getElementById)
elemento = document.getElementById(id_elemento);
// altrimenti è necessario usare un vecchio sistema
else
elemento = document.all[id_elemento];
// restituzione elemento
return elemento;
}
// DA QUI' PARTE LA MODIFICA.
function cambiaTesto() {
prendiElementoDaId('span0').innerHTML = 'testo cambiato';
}
function onLoad() {
prendiElementoDaId('paragrafo').innerHTML = '<span id="span0" onclick="cambiaTesto();">cambia questo testo</span>';
}
// QUI' TERMINA LA MODIFICA (si tenga presente che nel body ora c'è solo onload();
</script>
</head>
<body onload();>
<p id="paragrafo">
testo del paragrafo che verrà cambiato al caricamento del documento
</p>
</body>
</html>
e questo il commento dell'Autore:testo del paragrafo che verrŕ cambiato al caricamento del documento
Alla prossima.A caricamento pagina quindi è possibile creare un elemento html, uno <span>, con un id univoco, "span0" in questo esempio, ed impostare un evento, onclick, in grado di richiamare una funzione che cambierà il testo dell' elemento inserito nel documento attravero l'utilizzo di innerHTML e che non era quindi presente se non dopo l'utilizzo della funzione onLoad().
Sebbene si possa avere, inizialmente, un pò di confusione, questi concetti sono molto utili per creare interazioni base e medie poichè grazie agli stessi si ha la consapevolezza di non avere un limite teorico sui cambiamenti possibili del documento o dell' elemento che sfrutteremo in seguito attraverso l'utilizzo di AJAX.
GRAZIE.
Cordialmente.
Cicerone80
Rispondi quotando
pero' una tiratina d'orecchi sul titolo... 
