Ajax è una tecnica di programmazione (non un linguaggio) che ti permette di sviluppare applicazioni web interattive. In pratica, grazie ad Ajax puoi aggiornare alcuni dati della pagina senza ricaricare completamente la pagina, migliorando le prestazioni del tuo sito.

In questo articolo: effettuare le richieste e gestire le risposte, formati per lo scambio dati, utilizzare librerie e framework javascript, memorizzare Ajax in cache, evitare risposte duplicate, migliorare l’usabilità delle applicazioni ajax.

Il termine “Ajax” è l’acronimo di Asynchronous JavaScript and XML.

Vedremo che, nonostante la tecnica Ajax preveda l’utilizzo di XML, si potranno utilizzare altri formati per lo scambio dati.

Il termine “Ajax” è stato coniato da Jesse James Garret nel post “Ajax: A New Approach to Web Applications“, il 18 febbraio 2005.

Cosa succede con e senza Ajax

Supponiamo di avere una pagina con un form composto da tre campi di testo: nome, cognome e telefono. Lo script lato-server deve ricevere i tre dati, cercarli nel database e stampare l’indirizzo associato.

Importante. Generalmente, lo script utilizzato con una chiamata Ajax è diverso da quello utilizzato per l’esecuzione senza javascript.

L’esecuzione standard dello script

N.B. i rettangoli tratteggiati indicano cosa viene caricato.

Prima fase. Si carica la pagina html, si scrivono i dati nel form e si inviano al server premendo il pulsante “invia”. Oltre a quelle dei dati, il server riceverà le richieste http degli altri componenti della pagina che dovranno essere ricaricati.

Seconda fase. Il server cerca l’indirizzo nel database, e il browser ricarica completamente la pagina con i nuovi dati o con un messaggio di errore (es. “indirizzo non trovato”).

L’esecuzione dello script utilizzando Ajax

Prima fase. Si carica la pagina html, si scrivono i dati nel form e si inviano al server premendo il pulsante “invia”. Al server arriva solo una richiesta http: quella dei dati inviati. Inoltre vengono stampati i componenti da mostrare successivamente (“tutto ok!”, “i dati … correttamente”, ecc.) nascondendoli con le regole dei css.

Seconda fase. Il server cerca l’indirizzo nel database e, una volta trovato, viene rispedito al browser che aggiornerà il componente riservato all’indirizzo. Gli altri contenuti stampati precedentemente (“tutto ok!”, “i dati … correttamente”, ecc.), vengono resi visibili, mentre i componenti relativi al form vengono nascosti. Per nascondere e mostrare i componenti si utilizzano le regole dei css.

Framework e librerie javascript

Un framework javascript è un insieme di librerie che facilita la scrittura di codice e applicazioni javascript.

Perché utilizzare un framework?

• Ti permette di scrivere in poche righe quello che in javascript “puro” richiderebbe centinaia di righe
• Elimina il problema della compatibilità browser-javascript eseguendo istruzioni diverse a seconda del browser che si sta utilizzando

Ecco i framework più famosi.

Prototype

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

http://www.prototypejs.org/

jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

http://jquery.com/

MooTools

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

http://mootools.net/

Dojo

Solve problems faster. Create better user experiences. Liberally licensed. Everything you need, all in one place.

http://dojotoolkit.org/

Ajax, jQuery e Php all’opera

Generalmente un’applicazione Ajax è composta dalla pagina html e dallo script lato-server da richiamare successivamente via javascript.

Il framework che utilizzo è jQuery, soprattutto perché, nel complesso, è molto più leggero e veloce rispetto agli altri.

Analizziamo ora il codice dell’applicazione Ajax di cui ho parlato prima.

Requisiti. Php 5.2, MySql 5, jQuery 1.3.

Demo dell’applicazione. Puoi provare l’applicazione Ajax qui.

Pagina html e codice javascript

Questa pagina si può dividere in due parti.

• codice html
• codice javascript per la gestione delle chiamate ajax e del codice html

Puoi vedere il file completo qui.

Html

All’interno del tag <body> si possono distinguere due <div>. Il primo (id=”form_panel”) ospita il form e un <h3> per la scrittura degli errori (id=”errors”); il secondo (id=”address_panel”) ospita un <div> (id=”the_address”) in cui si scriverà l’indirizzo trovato.

<body>
	<!-- Area del form -->
	<div id="form_panel">
		<h1>INSERISCI I DATI</h1>
		<h3 id="errors" style="display:none;color:#CC0000;"></h3>
		<form action="">
			<p>
				<div><b>Nome</b> <small>(solo lettere)</small></div>
				<input id="firstname" name="firstname" type="text" value="" />
				<small id="firstname_msg" style="color:#CC0000;"></small>
			</p>
			<p>
				<div><b>Cognome</b> <small>(solo lettere)</small></div>
				<input id="lastname" name="lastname" type="text" size="30" value="" />
				<small id="lastname_msg" style="color:#CC0000;"></small>
			</p>
			<p>
				<div><b>Telefono</b> <small>(numeri, trattino "-", parentesi "(" e ")", spazio " ")</small></div>
				<input id="phone" name="phone" type="text" value="" />
				<small id="phone_msg" style="color:#CC0000;"></small>
			</p>
			<p><input id="send" name="send" type="button" value="Invia" /></p>
		</form>
	</div>

	<!-- Area dell'indirizzo (trovato) -->
	<div id="address_panel" style="display:none;">
		<h1>INDIRIZZO</h1>
		<p id="the_address"></p>

		<a href="#" id="back_to_form">&lt; indietro</a>
	</div>
</body>

Javascript

Il codice javascript viene scritto direttamente nel codice html, ma potrebbe essere scritto in un file esterno (.js).

Vengono specificate 3 funzioni e 3 variabili.

$(document).ready(function(){ … }). In realtà, questa non è una funzione, ma un metodo di jQuery che, al posto dei “…”, consente di specificare il codice javascript da eseguire quando la pagina ha completato il caricamento.

function form_check(). Esegue dei controlli sui valori dei campi e restituisce “true” se non ci sono errori, altrimenti “false”.

function form_ajax_send(). Invia i dati del form allo script “myscript.php”, attende e gestisce la risposta.

var form_msgs = new Array(…). Array degli errori relativi al form (es. “dati non corretti”).

var error_msgs = new Array(…). Array degli errori relativi all’invio e alla risposta dei dati (es. “errore del db”).

var regexps = new Array(…). Espressioni regolari utilizzate in form_check() per controllare i caratteri dei dati inseriti.

L’oggetto XMLHttpRequest

Per inviare richieste http dinamiche bisogna utilizzare l’oggetto XMLHttpRequest. Questo oggetto ha una serie di proprietà e metodi.

Uno dei principali svantaggi legati all’utilizzo di questo oggetto sta nel fatto che non è standardizzato, quindi non è riconosciuto universalmente da tutti i browser. Infatti, Internet Explorer 6 e precedenti lo vedono come un ActiveX da richiamare in maniera diversa rispetto ai browser Mozilla.

La soluzione è quella di utilizzare un framework e lasciare che sia lui a occuparsi di effettuare i controlli di compatibilità e differenziare la chiamata e il funzionamento dell’oggetto XMLHttpRequest.

Per conoscere meglio l’oggetto XMLHttpRequest puoi consultare la pagina ufficiale del w3c (in inglese) oppure la pagina su Wikipedia.

Per approfondire la gestione di Ajax con jQuery puoi leggere la pagina della documentazione ufficiale di jQuery relativa ad Ajax: http://docs.jquery.com/Ajax.

Ajax

Analizziamo le righe di codice javascript relative alla gestione della richiesta e della risposta asincrona.

$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
	// funzione "callback", cioé eseguita quando vengono restituiti i dati dallo script "myscript.php"
	function(data,status)
	{
		if(status=="success") { ... }
		else { ... } // status=="failure"
	}
);

$.get. Questa funzione effettua una richiesta GET. Alternativamente si poteva utilizzare $.post. A seconda del tipo di richiesta, nell0 script lato server bisogna utilizzare gli array $_GET e $_POST per ottenere i dati inviati.

“myscript.php”. Il primo argomento della funzione $.get. Specifica lo script da utilizzare.

{firstname_get:firstname,lastname_get:lastname,phone_get:phone}. Il secondo argomento della funzione $.get. Questo è un tipo di dati chiamato “Map”, dove “firstname”, “lastname” e “phone” sono le variabili riempite con i valori del form, e “firstname_get”, “lastname_get” e “phone_get” sono i nomi delle variabili passate allo script. Quindi, in myscript.php per leggere il cognome non utilizzeremo $_GET['lastname'] ma $_GET['lastname_get'].

function(data,status). Il terzo argomento della funzione $.get. Rappresenta la funzione “callback”, ovvero la funzione da utilizzare quando si riceve la risposta. Poiché la risposta è asincrona, cioé avviene in un secondo momento rispetto all’invio dei dati, non possiamo scrivere:

if(form_check())
{
	ajax_invia_dati();
	ajax_gestisci_risposta();
}

poiché, quando verrà chiamata la funzione ajax_gestisci_risposta() sicuramente la risposta non sarà ancora arrivata.

Per questo motivo è necessario specificare la cosiddetta funzione “callback” che verrà eseguita non appena ajax fornirà una risposta. Questa funzione ha due parametri: data (dati ricevuti), status (stato della risposta). Se status è “success” significa che tutto è andato a buon fine, altrimenti status sarà “failure”.

Come ottenere l’oggetto XMLHttpRequest. Le funzioni $.get, $.post, ecc. restituiscono l’oggetto XMLHttpRequest che potrà essere utilizzato con tutti i suoi metodi e le sue proprietà.

Script lato server (php)

• Effettua una connessione al database
• Esegue la query con i dati ricevuti
• Stampa una stringa fra queste: “db error”, “no data”, o l’indirizzo trovato

Puoi vedere il file completo qui.

<?php

header('Expires:'.date("D, d M Y H:i:s",time()+2600000).' GMT');
header('Cache-Control:public,max-age=2600000');

$mydb = @new mysqli('localhost', 'root', 'root', 'mydb');

if(mysqli_connect_errno()!=0) { echo 'db error'; }
else
{
	// effettua la query
	$result = @$mydb->query("
	SELECT	`Address`
	FROM	`info`
	WHERE	`Lastname`='".$_GET['lastname_get']."' AND
		`Firstname`='".$_GET['firstname_get']."' AND
		`Phone`='".$_GET['phone_get']."'		;");

	// controlla quanti record sono stati trovati (se 0: indirizzo non trovato)
	if($mydb->affected_rows==0)	{ echo 'no data'; }

	// indirizzo trovato
	else
	{
		$address = $result->fetch_array(MYSQLI_NUM);
		echo $address[0];
	}
}
?>

Dati restituiti dallo script

• “db error”, se si verifica un errore relativo al database (in fase di connessione)
• “no data”, se non viene trovato l’indirizzo
• stringa dell’indirizzo, se viene trovato l’indirizzo

Come impostare lo script per i test

Se vuoi testare lo script è necessario effettuare alcune semplici operazioni.

• All’interno di myscript.php individua la riga $mydb = @new mysqli(‘localhost’, ‘root’, ‘root’, ‘mydb’); e sostituisci i valori del tuo database: host, username, password, database.
• Crea la tabella “info” nel tuo database. Nello script c’è una query (CREATE TABLE … ) da copiare e far eseguire subito dal tuo dbms (es. phpMyAdmin). Se la crei manualmente è necessario creare 5 campi chiamati ID, Lastname, Firstname, Phone, Address.
• Infine, inserisci un paio di record in modo che l’applicazione Ajax possa trovare qualc0sa nella tabella.

Formati di scambio dati

Per i dati da inviare come risposta possono essere utilizzati vari formati: testo semplice, html, xml, json, ebml.

Lo script dell’esempio precedente stampa testo semplice.

Testo semplice e html

Preferibile se si devono sviluppare applicazioni semplici che non richiedono massicci scambi di dati e complesse elaborazioni.

Il maggior vantaggio sta nel fatto che testo semplice e codice html non richiedono ulteriori elaborazioni per rendere i dati rappresentabili all’interno di una pagina xhtml o html.

Json

Json, acronimo di JavaScript Object Notation,  è un ottimo formato per lo scambio dati.

Si possono rappresentare oggetti e array:

var object = { name : "Giacomo", phone: "123456789", object2: { msg: "Ciao" } };
var array = ["mystring", 100, { msg: "Ciao" }, object, 5*2, 0.134];

Per processare una risposta in formato Json, anziché $.get è necessario utilizzare$.getJson. Questa funzion processa automaticamente una risposta in formato Json in modo da poter utilizzare subito i dati.

Ad esempio, se la risposta è:

var object = { name : "Giacomo", phone: "123456789", object2: { msg: "Ciao" } };
var array = ["mystring", 100, { msg: "Ciao" }, object, 5*2, 0.134];

all’interno della funzione “callback” potremmo utilizzare le due variabili scrivendo semplicemente:

object.name.length; // per ottenere la lunghezza della stringa "Giacomo"
alert(object.object2.msg); // per stampare un alertbox con il messaggio "Ciao"
newvar = array[4] + 3; // per assegnare alla variabile newvar il valore (5*2)+3, cioé 13

Per saperne di più vai alla pagina ufficiale di Json: http://json.org/.

XML

XML, acronimo di eXtensible Markup Language, è un metalinguaggio di markup che permette di definire tag personalizzare per strutturare documenti complessi. Una volta ottenuta una risposta formattata in XML è necessario elaborarla per poterla gestire.

La lettura e l’elaborazione di un testo XML consiste nello scorrere la struttura del documento per recuperare i dati contenuti nei tag XML. Per scorrere la struttura del documento esistono librerie javascript che consentono di farlo semplicemente.

Utilizzare questo formato è vantaggioso nel caso in cui ci siano molti dati da ricevere, mentre è sconsigliabile nel caso in cui ricevano pochi dati in quanto i caratteri per i tag XML potrebbero superare quelli per i dati effettivi.

Memorizza le risposte Ajax in cache per evitare richieste duplicate

Come detto prima, le risposte Ajax non sono altro che risposte HTTP e, come in tutte le risposte HTTP, possono essere inviati gli header.

Naturalmente, gli header devono essere inviati dallo script lato server, prima di qualsiasi output.

Per memorizzare le risposte Ajax nella cache si possono utilizzare i campi di intestazione Cache-Control, Expires, Pragma, ETag. Nei casi in cui non si possa utilizzare la cache del browser ricorreremo a una tecnica javascript.

Per approfondire la gestione della cache dai uno sguardo al post precedente: http://jblog.it/2009/04/24/ridurre-richieste-http-come-utilizzare-cache-browser_124.html.

Richieste GET e POST: come si comporta il browser

Nell’esempio, utiliziamo un solo script lato server che restituisce 3 output diversi a seconda dell’esito dell’operazione: “db error” per l’errore del database, “no data” se non è stato trovato l’indirizzo, e la stringa dell’indirizzo trovato nel database.

Ti consiglio di leggere questo interessante articolo (in inglese) del w3c: URI, indirizzabilità, e l’uso di GET e POST.

Il comportamento del browser cambia in base al tipo di richiesta (GET e POST) e agli header inviati dallo script lato server. Analizziamo alcuni casi più da vicino.

Le richieste GET

L’indirizzo di una richiesta GET ha la forma:

http://localhost/ajax_phone/myscript.php?par1=ciao&par2=hello

Il comportamento di default del browser consiste nell’inviare sempre una nuova richiesta.

Tuttavia, se vogliamo che il browser memorizzi per 1 ora la risposta dello script lato server, inviamo i seguenti header:

header('Expires:Sun, 03 May 2009 23:18:45 GMT');
header('Cache-Control:public,max-age=3600');
header('Pragma:public');

In questo caso, quando l’applicazione Ajax invia la prima richiesta, il browser legge lo script e lo memorizza in cache. La volta successiva possono verificarsi due casi:

• se si inviano dei dati diversi (ad es., se invece di “par2=hello” inviamo “par2=welcome”) il browser effettua una nuova richiesta e la memorizza in cache
• se si inviano gli stessi dati, il browser si accorge che l’indirizzo della richiesta è uguale, quindi legge i dati dalla cache evitando di effettuare una nuova richiesta

Differenziare gli header. Se alcune richieste non devono essere memorizzate in cache, puoi inviare degli header diversi a seconda dell’ouput generato dallo script (prima di stampare qualsiasi output). Ad esempio:

if($output!="error")
{
	header('Expires:Sun, 03 May 2009 23:18:45 GMT');
	header('Cache-Control:public,max-age=3600');
	header('Pragma:public');
}
else
{
	header('Expires:Sun, 01 Jan 1970 02:00:00 GMT');
	header('Cache-Control:no-cache');
	header('Pragma:no-cache');
}

Forzare la richiesta. Per fare in modo che il browser effettui una nuova richiesta, anche se questa è già presente nella cache, basta inviare un ulteriore parametro con un valore variabile, ad esempio un numero casuale.

$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone,random:Math.random()},
	function(data,status){...});

Le richieste POST

L’indirizzo di una richiesta POST ha la forma:

http://localhost/ajax_phone/myscript.php

E i parametri? Vengono inviati tramite protocollo HTTP, ma non sono visibili al browser.

Le richieste POST non possono essere memorizzate in cache.

Come evitare le richieste duplicate

Abbiamo visto che le richieste POST non possono essere memorizzate in cache.

Tuttavia è possibile evitare le richieste duplicate grazie a qualche riga di javascript.

Questa tecnica consiste nel memorizzare i dati inviati e ricevuti in un array, in modo che, prima di inviare una richiesta, si controlla se i dati da inviare sono già presenti nell’array. Se sono presenti, si leggono i dati ricevuti in corrispondenza dei dati richiesti e si procede con l’esecuzione dell’applicazione.

var my_array() = new Array();

/* Una volta riempito l'array avrà questo aspetto
myarray = Array(
	Array( Array('Mario','Rossi',3429752370), 'no data' ),
	Array( Array('Giacomo','Ratta',4325233), 'Via Beethoven, 21' ),
);
*/

Ogni elemento dell’array è un array di due elementi. Il primo è l’array dei dati inviati; il secondo è la stringa dell’output restituito.

// Esegue le operazioni con i dati ricevuti
function esegui_le_operazioni(data) { ... }

if(form_check())
{
	// Leggo i valori dei 3 campi del form
	firstname = $('#firstname').val();
	lastname = $('#lastname').val();
	phone = $('#phone').val();

	// Indica se sono state trovate i dati da inviare
	// Contiene l'indice dell'elemento contenente dati inviati e dati ricevuti
	found = -1;

	// Cerco i dati nell'array
	for(i=0;i<my_array.length;i++)
	{
		// (riga da adattare in base alle proprie esigenze)
		if(my_array[i][0][0]==firstname && my_array[i][0][1]==lastname && my_array[i][0][1]==phone)
		{ found=i; break; }
	}

	// I dati sono stati trovati
	if(found>=0)
	{
		esegui_le_operazioni(my_array[found][1]);
	}

	// Dati non trovati: nuova richiesta
	else {
		$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
		// funzione "callback", cioé eseguita quando vengono restituiti i dati dallo script "myscript.php"
		function(data,status)
		{
			if(status=="success")
			{
				// Inserisco dati inviati e dati ricevuti nell'array
				// riga da adattare in base alle proprie esigenze)
				my_array.push(new Array(new Array(firstname,lastname,phone), data));

				esegui_le_operazioni(data);
			}
			else { ... } // status=="failure"

		}); //end-callback

	} //end-if
}

Quando utilizzare GET e quando POST

• Il metodo GET è da preferire quando si devono inviare dati per il normale funzionamento della pagina e degli script
• Il metodo POST si deve utilizzare quando quelli da scambiare sono dei dati sensibili (username, password, telefono)

Migliorare l’usabilità e l’accessibilità delle applicazioni Ajax

Spesso nella progettazione delle applicazioni Ajax l’usabilità lascia un po’ a desiderare: nessun messaggio di successo/errore, caricamenti infiniti senza segni di vita, ecc.

Certo, l’usabilità è un tema complesso e progettare siti e applicazioni usabili richiede tempo e buone competenze.

Tuttavia, ci sono alcune cose che devono essere fatte e che, fortunatamente, non richiedono troppo tempo.

Potrai vedere queste modifiche nello script di esempio.

Errori e messaggi

• Ogni campo di input deve avere la relativa area dedicata ai messaggi di errore (“dati obbligatori”, “caratteri non validi”, ecc.)
• La pagina deve avere un’area destinata ad ospitare i messaggi relativi all’esecuzione dello script (“ricerca eseguita con successo”, “errore dell’applicazione”, “errore del database”, ecc.)

Barra di caricamento

Nella maggior parte della applicazioni, per motivi tecnici, non è possibile inserire una barra di caricamento che rilevi la percentuale reale dei dati caricati fino a quel momento.

Generalmente, si preferisce mostrare un’immagine gif che può essere una barra di caricamento o un’animazione generica in modo che faccia sapere all’utente che l’applicazione sta lavorando.

Svantaggio. Durante il caricamento dei dati si potrebbe verificare un malfunzionamento che non blocca la richiesta. In questo caso il caricamento sarebbe infinito provocando l’abbandono del sito da parte dell’utente.

Soluzione 1. Puoi inserire un pulsante da far premere all’utente per fermare la richiesta http.

<button type="button" onclick="stopAjaxRequest();">Stop</button>

Soluzione 2. Analizza il tuo script e prevedi un tempo massimo entro cui restituire l’output, e, con javascript, impostare un timer che faccia fermare la richiesta Ajax una volta trascorso il tempo previsto.

// esegue la funzione stopAjaxRequest() dopo 10 secondi
setTimeout(stopAjaxRequest(),10000);

Come creare la funzione stopAjaxRequest().

• L’oggetto XMLHttpRequest ha il metodo abort() che permette di fermare una richiesta http.
• Le funzioni $.ajax, $.get, $.post, $.getScript, $.getJSON di jquery restituiscono un oggetto XMLHttpRequest.

1. Creiamo una variabile globale per l’oggetto XMLHttpRequest, che chiamiamo XHR

var XHR;

2. Creiamo la funzione stopAjaxRequest() che richiama XHR ed esegue il metodo abort()

function stopAjaxRequest() { XHR.abort(); }

3. Assegnamo a XHR l’oggetto restituito dalla funzione $.get che utilizziamo per inviare i dati

XHR = $.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
	function(data,status) { ... });

Se javascript è disabilitato…

Purtroppo, ancora oggi ci sono utenti che utilizzano browser che non eseguono codice javascript, che hanno scarsa compatibilità oppure con javascript disattivato.

La soluzione è quella di progettare applicazioni che funzionino sia con javascript che senza.

Questo potrebbe andare bene per la piccola applicazione Ajax realizzata per questo post. Tuttavia, se le applicazioni sono di un certo livello, il carico di lavoro aumenta notevolmente. Quindi progettare applicazioni ibride ha senso solo quando le applicazioni da realizzare devono offrire il massimo della compatibilità con i browser usati dagli utenti (ad es. siti governativi, pubblica amministrazione, ecc.)

Secondo me, data la piccola percentuale di browser non compatibili e di utenti che disattivano (erroneamente) javascript, e la presenza di siti importanti come ebay, microsoft, youtube che non offrono l’alternativa “no javascript”, si può benissimo sviluppare un sito senza preoccuparsi degli utenti che non potranno eseguire javascript.

Nel tag <noscript> è possibile inserire il codice html da eseguire in caso di “javascript disabilitato”.

Alcune volte l’ho utilizzato per nascondere dei componenti che avevano senso solo con javascript disabilitato. Lo so… sintatticamente non è corretto, però potrebbe esserti utile.

Supponiamo di avere un link che fa apparire un alert:

<a id="alert_click" href="#" onclick="javascript:alert('Ciao!');">Clicca qui</a>

Per nasconderlo, in caso di javascript disabilitato, scriviamo:

<noscript>
<style type="text/css">
#alert_click { display:none; }
</style>
</noscript>

Svantaggi di Ajax

• Le chiamate effettuate non vengono registrate nella cronologia, a differenza di quanto avviene utilizzando iframe nascosti
• I pulsanti “avanti” e “dietro” non sono utilizzabili poiché le chiamate Ajax non vengono memorizzate nella cronologia
• L’utilizzo esclusivo di javascript viola il requisito 15 della legge Stanca: “la pagina deve essere fruibile anche in assenza di script”
• L’oggetto XMLHttpRequest non è compatibile con tutti i browser. Internet Explorer 6 e precedenti lo vedono come oggetto ActiveX, e il browser potrebbe essere impostato a un livello di sicurezza tale da non permettere l’esecuzione di controlli ActiveX
• L’oggetto XMLHttpRequest può comunicare solo all’interno del dominio. Se la destinazione è esterna al dominio bisogna creare un proxy lato server per poter comunicare all’esterno.
• Poiché i motori di ricerca non eseguono codice javascript, essi non possono indicizzare i contenuti generati dinamicamente con javascript e Ajax

Libri e risorse utili

Ajax. Guida per lo sviluppatore. Seconda edizione. Hoepli (2007).

Con Ajax guida per lo sviluppatore scoprirete come sfidare le regole tradizionali di quello che può accadere sul Web e come liberarvi del consueto approccio “click and wait”, approfondendo le tecniche, i pattern e i casi di utilizzo di Ajax, così da crearvi un’esperienza d’uso senza precedenti nelle vostre applicazioni.

Link: http://www.hoepli.it/editore/visbook.asp?id=978-88-203-3923-4.

Ajax e Php. Sviluppare applicazioni web dinamiche. Hoepli (2007)

AJAX e PHP. Sviluppare applicazioni web dinamiche è la risorsa più pratica ed efficiente che possiate utilizzare per entrare nell’entusiasmante mondo di AJAX. Questo libro vi spiegherà infatti come creare applicazioni web in PHP che sfruttino al massimo le tecnologie Ajax.

Link: http://www.hoepli.it/libro/ajax-php.asp

Siti e pagine

Ajax: A New Approach to Web Applications

W3C: The XMLHttpRequest Object

Wikipedia: l’oggetto XMLHttpRequest

jQuery: Ajax

JSON.org

Ridurre le richieste HTTP (parte 1): come utilizzare la cache del browser

W3C: URIs, Addressability, and the use of HTTP GET and POST