Diario di un programmatore qualunque

3. AJAX for dummies 3: XMLHttpRequest

dani1302 — Sun, 03 Feb 2008 01:19:44 +0000

L’oggetto XMLHttpRequest è il tramite delle richieste verso l’application server.

I metodi di XHR sono:

open (method, uri [,async][,user][,password])
E’ il primo metodo utilizzato, e racchiude una serie di parametri, di cui alcuni opzionali.
method indica il metodo di invio dei dati(GET o POST). Le differenze tra queste metodologie sono principalemente due: GET mostra all’utente nell’url i parametri inviati, con la sintassi pagina.jsp?parametro=valore, questo limita la dimensione della richiesta a 256 caratteri. Il metodo POST permette di inviare una quantità maggiore di dati.

uri è l’url della chiamata, sia essa una pagina html, un file xml, una pagina jsp od una servlet. Se il metodo è GET l’uri conterrà i parametri passati, nella sintassi pagina?parametro1=valore¶metro2=valore… Il path della pagina può essere relativo od assoluto.

async indica se la richiesta è di tipo asincrono o meno. Solitamente è true.

Il secondo metodo visto nell’esempio (linkare) è send (ajax.send(null)).

Open e send sono sufficienti a effettuare una chiamata completa di tipo GET.

Per effettuare una chiamata POST la sintassi è la seguente:

ajax.open("post","cartella/pagina.jsp", true); ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); ajax.send("parametro=valore"); ajax.send("parametro2=valore2");

Per chiudere la connessione con il server, oltre al tipo di contenuti è consigliabile impostare un’altro header dal nome connection e con contenuto pari a close.
ajax.setRequestHeader("connection", "close");

2. AJAX for dummies 2: il DOM

dani1302 — Sun, 06 Jan 2008 16:06:22 +0000

Continua da qui.

Il DOM(Document Object Model) è una rappresentazione logica della pagina HTML. E’ assimilabile ad un albero i cui nodi sono i tag.

E’ possibile visualizzare il DOM delle pagine con Mozilla Firefox, dal menù Strumenti – DOM Inspector, come nell’esempio.

Quindi gli elementi dell’albero sono di due tipi: i tag, che hanno degli attributi e possono avere figli, e i textNode, che rappresentano il testo contenuto tra i tag.

Ogni tag è un elemento, recuperabile tramite le funzioni dell’oggetto document:

`getElementById()`	(es: `var elem = document.getElementById(id)` )
`getElementsByTagName()`	(es: `var elem = document.getElementsByTagName(tagname)[0]` – E’ un array)

E’ possibile creare nuovi elementi:

`createElement(tagname)`	(es: `var elem = document.createElement("div")`)
`createTextNode(testo da inserire)`	(es: `var textnode = document.createTextNode("Hello World!")`)

Ma questi non saranno inseriti nel DOM, finchè non verranno chiamati i metodi opportuni.
Anche gli elementi hanno dei metodi che sono:

`getElementsByTagName()`	(es: `var elem = elem2.getElementsByTagName("td")[0]`, identico a document, restringe la ricerca degli elementi tra i figli dell’elemento)
`setAttribute`, `getAttribute`, `removeAttribute`	(gestione degli attributi dei tag, nell’esempio la tabella aveva gli attributi `width`, `border`, `cellpadding`, `cellspacing`)

C’è inoltre un attributo speciale, ovvero il nome del tag, che si recupera direttamente: elem.tagName.

Parentele: ogni nodo quindi ha una relazione con gli altri nodi dell’albero. Queste parentele sono utilizzabili per navigare tra i nodi, utilizzando alcune proprietà degli elementi:
childNodes,
firstChild,
lastChild,
nextSibling,
previousSibling,
parentNode
Nell’esempio potremmo applicare il seguente codice Javascript:
var body = document.getElementsByTagName("body")[0]; var array_figli = body.childNodes; //è un array da due elementi, i tag

e



var tag_p = array_figli.firstChild;

var tag_table = array_figli.lastChild;

var tag_head = body.previousSibling;

var elem = body.nextSibling; //restituisce null

var tag_html = body.parentNode;

Inoltre abbiamo i metodi:

`hasChildNodes()`	(restituisce `true` o `false`)
`appendChild()`	(es: `body.appendChild(document.createElement("div"))`, crea un tag vuoto, e lo inserisce all’interno del , nell’ultima posizione)
`insertBefore()`	(inserisce prima, sullo stesso livello gerarchico)
`replaceChild()`	(`elem.replaceChild(elem2)`, sostituisce l’elemento nell’albero, i figli dell’elemento sostituito, se non recuperati in precedenza, vanno persi)
`removeChild()`	(`elem.removeChild(another_elem)`, rimuove l’elemento)
`cloneNode(true/false)`	(restituisce un elemento identico, il booleano indica se copiare anche i figli)

Appendice: innerHTML
Nell’esempio della prima parte, viene usato innerHTML. Questa proprietà, accessibile sia in lettura che in scrittura, è la rappresentazione testuale di tutto il contenuto di un elemento.

1. AJAX for dummies 1: Hello world

dani1302 — Sat, 05 Jan 2008 21:48:37 +0000

Conoscenze necessarie: HTML, JavaScript, CSS, un linguaggio server-side (per noi Java e suo uso in JSP), DOM.

Fonti:
http://javascript.html.it/guide/leggi/95/guida-ajax/

http://javascript.html.it/guide/leggi/24/guida-dom/

Teoria: AJAX sta per Asynchronous JavaScript And XML. Non si tratta di una tecnologia vera e propria, ma di un utilizzo di linguaggi esistenti, quali il JavaScript e XML per ottenere un dialogo client-server di tipo asincrono, ovvero scambio di dati che avviene in modo veloce e trasparente, in tempi separati dal caricamento della pagina.

Pratica:

pagina.html

La mia prima applicazione AJAX

documento.txt
Hello AJAX World!!!

Analisi del codice:

La funzione getById(id) serve a recuperare un elemento in pagina tramite l’id (non il name!) e usa due metodologie per ottenere la compatibilità su più browser.

La funzione getXHR() recupera l’oggetto XMLHttpRequest, ovvero il tramite delle transazioni con l’application server. Anche questa fa delle operazioni per estendere la compatibilità con il browser. Questo oggetto è il fulcro di tutto il mondo AJAX, e i suoi metodi servono a effettuare le chiamate, monitorare lo stato della transazione, etc. etc.

La funzione clicca():

var ajax = getXHR(); recupero l’oggetto XMLHttpRequest.

if(ajax) se l’oggetto è stato recuperato (se il browser supporta XHR)

ajax.open("get", "documento.txt", true); chiamo il file documento.txt, utilizzando il metodo GET(come nei form, get mostra i parametri, post li nasconde, get ha limite di dimensione dati inviati, post è “un po’ più grosso”). i dettagli più in là

ajax.onreadystatechange = function() ridefinisco la funzione dell’oggetto ajax, che viene eseguita ad ogni cambiamento di stato della chiamata

if(ajax.readyState === 4) { if (ajax.status == 200) { se readyState è 4 (operazione terminata) e lo status è 200 (200 OK, come nell’http, ossia operazione terminata con successo) eseguo il codice

getById("contenitore").innerHTML = ajax.responseText; prendi il testo inviato e “innestalo” nel tag con id contenitore (il div vuoto sotto il pulsante)

innerHTML è una proprietà di ogni tag della pagina, che indica i il contenuto del tag dall’apertura alla chiusura

nell’esempio:

ha un .innerHTML uguale a una stringa vuota(per la precisione è una battuta di invio). Dopo il clic sul pulsante sarà

Hello AJAX World!!!

Continua qui.

0. Presentazioni

dani1302 — Fri, 04 Jan 2008 19:27:37 +0000

Oggi tutto bene. Domani? Boh. Comunque se sei arrivato fino a qui vuol dire che il blog è finito, spero tu abbia trovato interessanti gli articoli. Sennò no. Le uscite di sicurezza sono in fondo al corridoio e ai vostri lati, in caso di necessità gettate la vecchia dal finestrino. More info.