AJAX sta per Asynchronous Javascript And XML, che significa JavaScript e XML asincroni. AJAX ti consente di aggiornare i dati della pagina HTML senza ricaricarla completamente. Inoltre, la tecnologia consente di lavorare con le pagine Internet in modo asincrono. Cioè, mentre JavaScript interagisce con il server Web, l'utente può continuare a lavorare con la pagina web.
Un esempio di utilizzo della tecnologia AJAX è Suggerimento Google. Il funzionamento di Google Suggest è che mentre digiti una parola o una frase da cercare, JavaScript va al database di Google e gli chiede le prime 10 query più popolari che iniziano con le stesse lettere. E quindi visualizza questo elenco senza ricaricare la pagina.
Per considerare i principi di funzionamento della tecnologia AJAX, implementeremo un meccanismo simile a Google Suggest sul nostro sito web. Diciamo che abbiamo un sito web di un tour operator. Il sito ha un campo di ricerca per suggerimenti per nome del paese. Aggiungiamo un elenco a discesa a questo campo con il completamento automatico in base alle lettere immesse. Iniziamo a risolvere questo problema. Dirò subito che per implementare questo compito è necessaria la conoscenza dell'HTML e un po' di JavaScript (non è necessario essere un esperto). PHP verrà utilizzato come linguaggio del server.
Innanzitutto, creiamo un modulo di ricerca. Per fare ciò, crea un file index.html sul tuo server web, aprilo utilizzando un qualsiasi editor di testo e inserisci il seguente codice html.
Cerca offerte.
Vacanze al mare
Cerca offerte:
In questo elenco, abbiamo creato un modulo di ricerca con un campo di immissione del testo e un pulsante di invio e abbiamo creato un livello div per visualizzare i risultati. A questa pagina è allegato anche un file ajax.js, che conterrà le funzioni JavaScript.
Successivamente, scriveremo funzioni JavaScript che invieranno richieste al server e aggiorneranno la pagina. Per non dover sovraccaricare completamente il documento HTML, abbiamo bisogno della tecnologia Ajax. Quindi iniziamo. Crea un file ajax.js, inseriscilo nella stessa cartella di index.html e aprilo in un editor di testo.
Innanzitutto, devi creare un oggetto che invierà richieste al server e riceverà risposte. Questo oggetto viene creato in modo diverso nei diversi browser. Scriveremo una funzione universale che dovrebbe funzionare in diversi browser. Aggiungi il seguente codice JavaScript al tuo file ajax.js.
/*variabile per memorizzare l'oggetto della richiesta*/
richiesta var;
/*funzione per creare un oggetto di richiesta*/
funzione CreaRichiesta()
{
richiesta var=null;
Tentativo
{
//crea un oggetto di richiesta per Firefox, Opera, Safari
richiesta = new XMLHttpRequest();
}
catturare (e)
{
//crea un oggetto richiesta per Internet Explorer
Tentativo
( richiesta=nuovo ActiveXObject("Msxml2.XMLHTTP");
}
catturare (e)
{
richiesta=nuovo ActiveXObject("Microsoft.XMLHTTP");
}
}
richiesta di reso;
}
È necessario visualizzare un elenco di risultati ogni volta che si modifica il campo di ricerca. Per fare ciò, utilizzeremo un gestore di eventi JavaScript. Rileveremo le modifiche ad ogni keyup dell'evento della tastiera. Per fare ciò, nel nostro codice HTML del file index.html, nella riga in cui viene creato un campo di ricerca con il nome paese, aggiungiamo l'attributo onkeyup="KeyPress(this.value)":
Cioè, quando si preme un tasto qualsiasi, verrà chiamata la funzione JavaScript KeyPress(), alla quale vengono passati come parametro i caratteri immessi nella stringa di ricerca. La funzione KeyPress() deve eseguire le seguenti attività:
- Crea un nuovo oggetto richiesta chiamando la funzione CreateRequest();
- Genera l'URL a cui devi connetterti per ottenere risultati;
- Configurare un oggetto di richiesta per stabilire una connessione con il server;
- Invia una richiesta al server.
Iniziamo a creare la funzione KeyPress(). Per creare un nuovo oggetto request dobbiamo semplicemente assegnare alla variabile request il valore restituito dalla funzione CreateRequest() creata in precedenza. E per essere sicuri, controlliamo la variabile request. Se è NULL, non è stato possibile creare l'oggetto della richiesta. Ecco come apparirà il codice JavaScript per risolvere questo problema:
Tasto funzionePremere(termine) (
richiesta=CreaRichiesta();
se(richiesta==null)
{
ritorno;
}
}
Successivamente, è necessario indicare all'oggetto richiesta quale funzione JavaScript elaborerà la risposta del server. Per fare ciò è necessario assegnare alla proprietà onreadystatechange il nome della funzione corrispondente. Questa proprietà indica al browser quale funzione eseguire ogni volta che cambia lo stato pronto della richiesta. La nostra funzione LoadResults() elaborerà la risposta. Aggiungere la seguente riga alla funzione: request.onreadystatechange = LoadResults; . Tieni presente che non ci sono parentesi dopo il nome della funzione.
Quindi impostiamo la connessione. Per fare ciò, devi prima dire all'oggetto dove inviare questa richiesta. Creiamo l'URL dello script che calcolerà i risultati e assegniamolo alla variabile url. Diciamo che lo script php country.php sarà responsabile del calcolo dei risultati lato server. Quindi il nostro URL sarà simile a questo: var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random(); , dove la variabile s contiene i caratteri immessi nel campo di ricerca e a sid viene assegnato un numero casuale in modo che il browser non memorizzi la pagina nella cache. Aggiungi questa riga al corpo della funzione KeyPress().
Successivamente, è necessario inizializzare la connessione utilizzando il metodo open("GET", url, true) dell'oggetto richiesta. Questo metodo ha tre parametri. Il parametro "GET" specifica come inviare i dati al server. Utilizziamo il metodo GET perché i caratteri immessi nella stringa di ricerca vengono passati allo script del server tramite l'URL. Il secondo parametro specifica l'URL dello script del server. Memorizziamo l'indirizzo URL nella variabile url, quindi specifichiamo questa variabile nel secondo parametro. Il terzo parametro può avere due valori: true - modalità asincrona e false - modalità sincrona. La nostra applicazione funzionerà in modalità asincrona, quindi specifichiamo true . Dopo aver inizializzato la connessione, è necessario creare la connessione ed eseguire una query sui risultati. Per fare ciò, devi semplicemente chiamare la funzione send(null) sull'oggetto della richiesta. Il parametro null indica che la richiesta non contiene dati.
Dopo aver apportato tutte le modifiche, la funzione KeyPress(this.value) sarà simile a questa:
Tasto funzione (termine)
{
/*crea un nuovo oggetto di richiesta*/
richiesta=CreaRichiesta();
/*se non è stato possibile creare un oggetto di richiesta, allora terminiamo di eseguire la funzione*/
se(richiesta==null)
{
ritorno;
}
/*forma l'URL*/
var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random();
/*imposta un oggetto di richiesta per stabilire una connessione*/
request.onreadystatechange = Carica risultati;
request.open("GET", url, true);
/*invia una richiesta al server*/
richiesta.invia(null);
}
Quindi viene stabilita la connessione, viene inviata la richiesta, il server elabora i dati e restituisce il risultato. Successivamente, è necessario ricevere una risposta, elaborare e visualizzare i risultati su una pagina web. Tutto ciò verrà fatto dalla funzione LoadResults(), che verrà chiamata ogni volta che cambia lo stato di disponibilità della richiesta. Diamo un'occhiata a come dovrebbe funzionare questa funzione.
Innanzitutto, è necessario verificare lo stato attuale di preparazione. Lo stato pronto viene memorizzato dalla proprietà readyState dell'oggetto richiesta. Quando la richiesta viene elaborata, lo stato pronto è 4. Cioè, se request.readyState == 4 , puoi elaborare la risposta:
Funzione CaricaRisultati()
{
/*elabora la risposta*/
}
}
Funzione CaricaRisultati()
{
/*Controlla lo stato di preparazione*/
if (request.readyState == 4)(
/*Verifica lo stato della richiesta*/
if (richiesta.status == 200)(
/*tutto va bene, sto elaborando la risposta*/
}
}
}
Se il controllo dello stato e dello stato della richiesta viene completato con successo, puoi iniziare a elaborare i dati ricevuti dal server. Puoi ricevere dati in due modi: request.responseText - ricevendo dati sotto forma di testo, o request.responseXML - ricevendo dati sotto forma di un oggetto XMLDocument. Supponiamo che il nostro server invii una risposta sotto forma di un elenco testuale di paesi separati da virgole. Quindi otteniamo i dati: var risposta = request.responseText . Successivamente, elaboriamo i dati e li visualizziamo in un livello con id="searchresults" .
Non entrerò nei dettagli del trattamento dei dati, ma fornirò semplicemente il codice della funzione con i commenti:
Funzione CaricaRisultati()
{
/*Controlla lo stato di preparazione*/
if (request.readyState == 4)(
/*Verifica lo stato della richiesta*/
if (richiesta.status == 200)(
//rende visibile il livello dei risultati della ricerca
ShowDiv("risultatiricerca");
//cancella i risultati
CancellaRisultati();
//ottieni i dati
var risposta = request.responseText;
//converte una stringa di testo in un array
var array = risposta.split(",");
//determina la dimensione dell'array
conteggio var = array.lunghezza;
//trova il livello dei risultati della ricerca
//crea una tabella nel modello a oggetti del documento
var tbl = document.createElement("tabella");
var tblbody = document.createElement("tbody");
var tblRow, tblCell, tblNode;
// scorre tutti gli elementi dell'array array
for(var i = 0; i (
var testo = array[i];
//crea righe della tabella e le aggiunge al suo corpo
tblRow = document.createElement("tr");
tblCell = document.createElement("td");
//imposta gli attributi e le funzioni delle celle
tblCell.onmouseover = function())(this.className="mouseOver";);
tblCell.onmouseout = function())(this.className="mouseOut";);
tblCell.setAttribute("bordo", "0");
tblCell.onclick = function())(Sostituisci(this););
tblNode = document.createTextNode(testo);
tblCell.appendChild(tblNode);
tblRow.appendChild(tblCell);
tblbody.appendChild(tblRow);
}
//aggiungi il suo corpo al tavolo
tbl.appendChild(tblbody);
//posiziona la tabella nel livello
div.appendChild(tbl);
}
}
}
E un paio di altre funzioni di supporto JavaScript per la visualizzazione dei risultati sullo schermo:
/*rende visibile il livello dei risultati*/
funzione ShowDiv(id)
{
if (document.layers) document.layers.visibility="mostra";
else document.getElementById(id).style.visibility="visible";
}
/*rende invisibile il livello con i risultati*/
funzione NascondiDiv(id)
{
if (document.layers) document.layers.visibility="nascondi";
else document.getElementById(id).style.visibility="hidden";
}
/*risultati cancellati*/
funzione CancellaRisultati()
{
/* Rimuove le righe esistenti dalla tabella dei risultati
var div = document.getElementById("searchresults");
contatore var = div.childNodes.length;
for(var i = contatore-1; i >= 0; i--)
{
div.removeChild(div.childNodes[i]);
}
}
/*Sostituisci il valore nel campo di input con il valore selezionato con il clic del mouse*/
funzione Sostituisci(tblCell)
{
var inputbox = document.getElementById("paese");
inputbox.value = tblCell.firstChild.nodeValue;
CancellaRisultati();
HideDiv("risultatidellaricerca");
}
Anche nel nostro file html index.html tra i tag aggiungiamo le seguenti regole CSS:
.mouseOut( sfondo: #ffffff; colore: #0000000; )
.mouseOver( sfondo: #ccccff; colore: #0000000; )
tavolo (larghezza: 250px)
È tutto. In questo articolo abbiamo esaminato le basi della tecnologia Ajax utilizzando un esempio.
AJAX è un acronimo che sta per Asynchronous Javascript e XML. In effetti, AJAX non è una tecnologia nuova, poiché sia Javascript che XML esistono da molto tempo e AJAX è una sintesi delle tecnologie designate. AJAX è spesso associato al termine Web 2.0 ed è pubblicizzato come l'ultima applicazione Web.
Quando si utilizza AJAX, non è necessario aggiornare ogni volta l'intera pagina, poiché viene aggiornata solo una parte specifica di essa. Questo è molto più conveniente, poiché non devi aspettare a lungo, ed è più economico, poiché non tutti hanno Internet illimitato. È vero, in questo caso lo sviluppatore deve assicurarsi che l'utente sia a conoscenza di ciò che sta accadendo sulla pagina. Ciò può essere implementato utilizzando indicatori di caricamento e messaggi di testo che indicano che i dati vengono scambiati con il server. Devi anche comprendere che non tutti i browser supportano AJAX (versioni precedenti di browser e browser di testo). Inoltre Javascript può essere disabilitato dall'utente. Pertanto, non si dovrebbe abusare dell'uso della tecnologia e ricorrere a metodi alternativi per presentare le informazioni su un sito Web.
Riassumiamo i vantaggi di AJAX:
- Possibilità di creare una comoda interfaccia Web
- Interazione attiva dell'utente
- Facilità d'uso
Per poter scambiare dati è necessario creare sulla pagina un oggetto XMLHttpRequest, che costituisce una sorta di intermediario tra il Browser dell'utente e il server (Fig. 1). Utilizzando XMLHttpRequest è possibile inviare una richiesta al server e anche ricevere una risposta sotto forma di vari tipi di dati.
Esistono due modi per scambiare dati con il server. Il primo metodo è una richiesta GET. In questa richiesta, accedi a un documento sul server, passandogli gli argomenti attraverso l'URL stesso. In questo caso lato client sarebbe logico utilizzare la funzione di escape Javascript in modo che alcuni dati non interrompano la richiesta.
La parte client, scritta in Javascript, deve fornire le funzionalità necessarie per lo scambio sicuro con il server e fornire metodi per lo scambio di dati in uno qualsiasi dei modi sopra indicati. La parte server deve elaborare i dati di input e, in base ad essi, generare nuove informazioni (ad esempio, lavorare con un database) e inviarle al client. Ad esempio, per richiedere informazioni al server, è possibile utilizzare una normale richiesta GET con il trasferimento di numerosi piccoli parametri, ma per aggiornare informazioni o aggiungere nuove informazioni sarà necessario utilizzare una richiesta POST, poiché consente di trasferire grandi quantità di dati.
Come già accennato, AJAX utilizza il trasferimento dati asincrono. Ciò significa che durante il trasferimento dei dati, l'utente può eseguire altre azioni necessarie. In questo momento, l’utente dovrebbe essere avvisato che è in corso un qualche tipo di scambio di dati, altrimenti l’utente penserà che sia successo qualcosa di sbagliato e potrebbe abbandonare il sito, o richiamare la funzione che ritiene “congelata”. L'indicazione durante la comunicazione in un'applicazione Web 2.0 gioca un ruolo molto importante: i visitatori potrebbero non essere ancora abituati a questo modo di aggiornare la pagina.
La risposta del server può non essere solo XML, come suggerisce il nome della tecnologia. Oltre a XML, puoi ricevere la risposta in testo semplice o JSON (Javascript Object Notation). Se la risposta è stata ricevuta in testo semplice, può essere immediatamente visualizzata in un contenitore sulla pagina. Quando si riceve una risposta sotto forma di XML, il documento XML ricevuto viene solitamente elaborato sul lato client e i dati vengono convertiti in (X)HTML. Quando riceve una risposta in formato JSON, il client deve solo eseguire il codice ricevuto (funzione eval di Javascript) per ottenere un oggetto Javascript completo. Ma qui devi stare attento e tenere conto del fatto che utilizzando questa tecnologia è possibile trasmettere codice dannoso, quindi prima di eseguire il codice ricevuto dal server, dovresti controllarlo ed elaborarlo attentamente. Esiste una pratica come una richiesta "inattiva", in cui non viene ricevuta alcuna risposta dal server, vengono modificati solo i dati sul lato server.
Nei diversi browser questo oggetto ha proprietà diverse, ma in generale è lo stesso.
Metodi dell'oggetto XMLHttpRequestTieni presente che i nomi dei metodi sono scritti nello stesso stile Camel delle altre funzioni Javascript. Fai attenzione quando li usi.
interrompere()- annullando la richiesta corrente al server.
getAllResponseHeaders()- ottieni tutte le intestazioni di risposta dal server.
getResponseHeader("nome_intestazione")- ottieni l'intestazione specificata.
open("request_type", "URL", "asincrono", "nome utente", "password")- inizializzare una richiesta al server, specificando il metodo di richiesta. Il tipo di richiesta e l'URL sono parametri obbligatori. Il terzo argomento è un valore booleano. Di solito true viene sempre specificato o non specificato affatto (il valore predefinito è true). Il quarto e il quinto argomento vengono utilizzati per l'autenticazione (è molto pericoloso memorizzare i dati di autenticazione in uno script, poiché lo script può essere visualizzato da qualsiasi utente).
invia("contenuto")- invia una richiesta HTTP al server e ricevi una risposta.
setRequestHeader("nome_intestazione", "valore")- impostare i valori dell'intestazione della richiesta.
Proprietà dell'oggetto XMLHttpRequestgià pronto per il cambio di stato- una delle proprietà più importanti dell'oggetto XMLHttpRequest. Utilizzando questa proprietà, viene specificato un gestore che viene chiamato ogni volta che cambia lo stato di un oggetto.
readyState- un numero che indica lo stato dell'oggetto.
rispostaTesto- rappresentazione della risposta del server come testo semplice (stringa).
rispostaXML- un oggetto documento compatibile con DOM ricevuto dal server.
stato- stato della risposta dal server.
statusText- rappresentazione testuale dello stato della risposta dal server.
Dovresti dare un'occhiata più da vicino alla proprietà readyState:
- 0: l'oggetto non è inizializzato.
- 1 - L'oggetto sta caricando i dati.
- 2 - L'oggetto ha caricato i suoi dati.
- 3 - L'oggetto non è completamente caricato, ma è possibile interagire con l'utente.
- 4 - L'oggetto è completamente inizializzato; è stata ricevuta una risposta dal server.
Come accennato in precedenza, la creazione di questo oggetto per ciascun tipo di browser è un processo unico.
Ad esempio, per creare un oggetto nei browser compatibili con Gecko, Konqueror e Safari, è necessario utilizzare la seguente espressione:
Richiesta Var = new XMLHttpRequest();
E per Internet Explorer viene utilizzato quanto segue:
Richiesta Var = nuovo ActiveXObject("Microsoft.XMLHTTP");
Richiesta Var = new ActiveXObject("Msxml2.XMLHTTP");
Ora, per ottenere la compatibilità tra browser, è necessario combinare tutte le funzioni in una sola:
Funzione CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( //Browser compatibili con Gecko, Safari, Konqueror Request = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( //Internet Explorer try ( Request = nuovo ActiveXObject("Microsoft.XMLHTTP"); ) catch (CatchException) ( Richiesta = nuovo ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( alert("Impossibile creare XMLHttpRequest"); ) return Richiesta; )
Dopo tutto ciò, puoi creare questo oggetto e non preoccuparti delle prestazioni sui browser più diffusi. Ma puoi creare un oggetto in posti diversi. Se lo crei a livello globale, a un certo punto nel tempo sarà possibile solo una richiesta al server. Puoi creare un oggetto ogni volta che viene fatta una richiesta al server (questo risolverà quasi completamente il problema).
Richiesta al serverL'algoritmo di richiesta del server è simile al seguente:
- Verifica dell'esistenza di XMLHttpRequest.
- Inizializzazione di una connessione al server.
- Invio di una richiesta al server.
- Elaborazione dei dati ricevuti.
/* Funzione per inviare una richiesta a un file sul server r_method - tipo di richiesta: GET o POST r_path - percorso del file r_args - argomenti come a=1&b=2&c=3... r_handler - funzione che gestisce la risposta dal server */ function SendRequest(r_method , r_path, r_args, r_handler) ( //Crea una richiesta var Request = CreateRequest(); //Verifica nuovamente l'esistenza della richiesta if (!Request) ( return; ) //Assegna un valore personalizzato handler Request.onreadystatechange = function() ( // Se lo scambio dati è completato if (Request.readyState == 4) ( //Passa il controllo all'handler utente r_handler(Request); ) ) //Controlla se è necessario effettua una richiesta GET if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Inizializza la connessione Request.open(r_method, r_path, true); if ( r_method.toLowerCase() == "post") ( //Se questa è una richiesta POST //Imposta l'intestazione Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf- 8"); //Invia la richiesta Request.send(r_args); ) else ( //Se questa è una richiesta GET //Invia una richiesta nulla Request.send(null); ) )
Creare una richiesta è diventato molto più semplice. Ad esempio, scriviamo una funzione che riceverà il contenuto di un file sul server e lo emetterà in un contenitore.
Function ReadFile(filename, container) ( //Crea un gestore function var Handler = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //Invia la richiesta SendRequest("GET",filename," ", Gestore); )
Ecco come avviene l'interazione con il server.
Elaborazione della rispostaNell'esempio precedente, abbiamo effettuato una funzione di richiesta al server. Ma essenzialmente non è sicuro, poiché non elaboriamo lo stato dell'oggetto e lo stato della risposta dal server.
Aggiungiamo al nostro codice in modo che possa visualizzare una notifica visiva sul processo di caricamento.
Request.onreadystatechange = function() ( //Se lo scambio di dati è stato completato if (Request.readyState == 4) ( //Passa il controllo all'handler utente r_handler(Request); ) else ( //Informa l'utente del download ) ) ...
Come già saprai, l'oggetto XMLHttpRequest ti permette di conoscere lo stato della risposta dal server. Approfittiamo di questa opportunità.
Request.onreadystatechange = function() ( //Se lo scambio di dati è completato if (Request.readyState == 4) ( if (Request.status == 200) ( //Passa il controllo al gestore dell'utente r_handler(Request); ) else ( // Avvisiamo l'utente dell'errore che si è verificato) ) else ( // Avvisiamo l'utente del download ) ) ...
Opzioni di risposta del serverÈ possibile ricevere diversi tipi di dati dal server:
- Testo semplice
JSONè la notazione dell'oggetto Javascript. Con il suo aiuto, puoi rappresentare un oggetto come una stringa (qui puoi fornire un'analogia con la funzione di serializzazione). Quando ricevi dati JSON, devi eseguirli per ottenere un oggetto Javascript completo ed eseguire su di esso le operazioni necessarie. Si tenga presente che tale trasmissione ed esecuzione dei dati non sono sicure. Devi tenere traccia di ciò che arriva per l'esecuzione.
Codice JSON di esempio:
( "dati": ( "misc": [ ( "nome" : "JSON elemento uno", "tipo" : "Sottotitolo 1" ), ( "nome" : "JSON elemento due", "tipo" : " Sottotitolo 2 " ) ] ) )
Quando ricevi un codice di questo tipo, esegui la seguente azione:
Var rispostadata = eval("(" + Request.responseText + ")")
Dopo aver eseguito questo codice, l'oggetto sarà a tua disposizione rispostadata.
Lavorare con linguaggi di programmazione lato serverQuesto tipo di lavoro non è diverso dal lavoro ordinario. Ad esempio, prenderò PHP come linguaggio lato server. Dal lato client non è cambiato nulla, ma il lato server è ora rappresentato da un file PHP.
Come da tradizione, cominciamo con i saluti al nostro meraviglioso mondo:
Echo "Ciao, mondo!";
Quando si accede a questo file, la stringa Hello, World verrà restituita al client. Come puoi immaginare, questo offre enormi opportunità per la creazione di applicazioni. Passando argomenti quando si chiama il server utilizzando XMLHttpRequest, è possibile parametrizzare l'output, fornendo così funzionalità estese all'applicazione Web.
Oltre a PHP, puoi utilizzare qualsiasi altro linguaggio di programmazione lato server.
Ultimo aggiornamento: 1/11/2015
La tecnologia AJAX è una tecnologia per l'interazione asincrona con il server. Grazie a questa tecnologia, possiamo inviare richieste al server e ricevere risposte da esso senza ricaricare la pagina in background, e creare ricche applicazioni web interattive, come le chat web.
Inizialmente, la capacità di interagire in modo asincrono con il server veniva utilizzata sotto forma di oggetto ActiveX presso Microsoft. Successivamente l’idea dell’interazione asincrona è stata ripresa anche da altre aziende. E attualmente, la funzionalità delle richieste asincrone nei browser è disponibile per gli sviluppatori web tramite l'oggetto XMLHttpRequest.
Poiché questo articolo riguarda jQuery, non entrerò nei dettagli sull'oggetto XMLHttpRequest. Ma mostrerò brevemente l'essenza del suo utilizzo.
Quindi, prima di tutto, per lavorare con AJAX abbiamo bisogno di un server web. Potrebbe essere Node.js, IIS, Apache, nginx. In futuro utilizzerò il web server Apache.
Creiamo una pagina web in cui verrà utilizzato XMLHttpRequest:
Carica nessuna funzione di notizie ajaxload())( var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function())( if(this.readyState==4)( if(this.status >=200 && xhr.status< 300){ document.getElementById("news").innerHTML=this.responseText; } } } xhr.open("GET", "ajax.php"); xhr.send(); }
In termini di markup, abbiamo due elementi: un pulsante, quando viene cliccato, viene eseguita la funzione ajaxload, e un blocco div in cui verranno caricati i dati quando richiesto.
Tutta la nostra azione principale avviene nella funzione ajaxload. Per prima cosa creiamo un oggetto XMLHttpRequest: var xhr=new XMLHttpRequest(); .
Invieremo le richieste tramite questo oggetto. Quando viene ricevuta una risposta, verrà attivato l'evento onreadystatechange. E per elaborare questo evento, assegniamo alla proprietà xhr.onreadystatechange una funzione di elaborazione della risposta.
Nella funzione di elaborazione controlliamo innanzitutto la disponibilità della risposta tramite la proprietà readyState (lo stato this.readyState==4 significa che la richiesta è completata). Successivamente controlliamo il codice di stato della risposta: se il server ha restituito un codice di stato compreso tra 200 e 300, la richiesta ha avuto successo.
E poi passiamo il testo della risposta al div che abbiamo sulla pagina tramite la proprietà ResponseText.
Nella riga xhr.open("GET", "ajax.php"); impostiamo il metodo di richiesta e la risorsa a cui andrà la richiesta.
Bene, con l'ultima riga xhr.send() inviamo la richiesta. Abbiamo finito per scrivere molto codice per eseguire una semplice query.
Diciamo che abbiamo un gestore di richieste in PHP sul nostro server. Lo renderò estremamente semplice. Risponderà semplicemente con il markup html:
Ora, quando si fa clic sul pulsante, si verificherà una richiesta Ajax, i cui risultati verranno caricati nella pagina:
Ora riscriviamo il codice della pagina utilizzando jQuery:
Carica Nessuna notizia $(function())( $("button").click(function())( $("#news").load("ajax.php"); )); ));
Pertanto, il codice diventa più pulito e semplice utilizzando la libreria jQuery. Dobbiamo solo utilizzare il metodo load, passando l'indirizzo della risorsa come parametro. E il risultato finale sarà lo stesso.
AJAX (Asynchronous JavaScript and XML) è una tecnologia che fornisce richieste dinamiche al server, durante le quali non è necessario ricaricare la pagina. Il sito funziona molto più velocemente perché l'intera pagina non necessita di essere aggiornata regolarmente, quindi il suo utilizzo diventa più conveniente per l'utente, ma non per i motori di ricerca.
Un numero enorme di tecnologie simili iniziarono ad essere utilizzate nei lontani anni '90 del secolo scorso. Ad esempio, nel 1996, l'elemento IFRAME HTML è stato introdotto nel browser Internet Explorer 3 e due anni dopo Microsoft ha implementato il meccanismo di scripting remoto.
Tuttavia, il termine “JavaScript asincrono e XML” divenne noto al mondo solo all’alba del 2005, quando Jesse Garrett pubblicò un articolo intitolato “Ajax: un nuovo approccio alle applicazioni web”. Nel suo materiale, Garrett ha descritto in dettaglio come vengono create le applicazioni Internet per Google Maps e Gmail. Ha affermato con sicurezza che questo è stato l'inizio di un rapido sviluppo delle capacità a disposizione degli utenti nelle applicazioni.
Jesse James Garrett
Jesse Garrett ha prestato particolare attenzione alla tecnologia AJAX, le ha dato un nome e ha descritto dettagliatamente la nuova tendenza. Ma vale la pena notare che non ha inventato questa tecnologia, le ha solo dato un nome.
Successivamente, il campo dello sviluppo di applicazioni Internet è diventato molto più avanzato. D'ora in poi gli utenti potranno vedere sui loro display i risultati dello scambio di dati tra il browser e il server.
Quando visiti un determinato sito web, capirai immediatamente che utilizza la tecnologia AJAX. In precedenza, gli utenti dovevano fare clic su vari pulsanti e seguire i collegamenti per confermare le proprie azioni. Oggi la pagina web accetta autonomamente nuovi dati in tempo reale senza ricaricare da parte dell’utente.
Tutto ciò garantisce un utilizzo più conveniente della risorsa web, poiché il tempo dedicato all'interazione con essa è notevolmente ridotto. In sostanza, iniziamo a comunicare con un'applicazione ad alta velocità. E affinché funzioni completamente, hai solo bisogno dell'accesso a Internet e di un browser che funzioni con JavaScript.
Come funziona la tecnologiaPer comprendere nello specifico come funziona AJAX, esaminiamo 4 passaggi critici:
Se spieghiamo visivamente l'essenza della tecnologia, nell'immagine questo processo apparirà così: 
Senza l'oggetto XMLHttpReques, le informazioni non possono essere scambiate, quindi sono pre-inserite nella pagina stessa. L'oggetto funge da collegamento tra il server e il browser web. Le richieste stesse passano dal sistema al server in formato POST o GET. Il tipo GET si riferisce intrinsecamente a un documento situato sul server e riceve l'indirizzo del sito come argomento. Per evitare che la richiesta venga interrotta, è stata creata una robusta funzione JavaScript Escape per prevenire tali casi.
Se i dati vengono trasferiti in grandi quantità, non puoi fare a meno della funzione POST. Il server elabora le informazioni che riceve e quindi, sulla base di esse, genera dati aggiornati che vengono inviati all'utente.
L'approccio AJAX prevede il trasferimento di informazioni in momenti diversi. Grazie a questo client sono disponibili numerose funzioni durante il trasferimento dei dati “in background”. L'utente riceve un messaggio sul processo di trasferimento delle informazioni in modo che non lo consideri bloccato: questo gli consente di rimanere sul sito.
Per inviare la risposta, il server utilizza testo JSON o XML standard. Quando si riceve un documento JSON, questo viene immediatamente visualizzato sullo schermo. Ma l'utente è anche tenuto ad eseguire il codice che riceve, dopodiché verrà generato un oggetto JavaScript. E se il testo viene inviato in formato XML, deve prima essere sostituito con HTML e quindi visualizzato sulla pagina.
Quali sono i vantaggi di AJAX?- Riduce il carico sul server. Ma questo è possibile solo se la tecnologia viene utilizzata correttamente. Puoi utilizzare un modello che ti aiuterà a creare elementi permanenti di una risorsa web: menu, logo, intestazione, ecc. E per soddisfare le richieste dei visitatori non è necessario ricaricare l'intera pagina. Ad esempio, hai creato un blocco con votazione e al visitatore viene chiesto di selezionare l'opzione ottimale per lui per votare. Non appena si preme il pulsante, le informazioni andranno immediatamente al server e quindi la persona riceverà una risposta. E tutto questo avviene senza aggiornare la pagina.
- Migliora le prestazioni del server. Perché viene caricato solo il contenuto della pagina e gli utenti ricevono i risultati delle loro azioni molto più velocemente.
- Riduce il traffico. La quantità di dati quando si lavora con le applicazioni è notevolmente ridotta. Ciò è garantito dal fatto che non viene ricaricata l'intera pagina, ma solo gli elementi o i dati modificati. Lo script modifica quindi le informazioni sulla pagina nel browser.
- Apre un'ampia varietà di possibilità. Una volta scelto AJAX, avrai a disposizione una miriade di azioni. Pertanto, quando si registra sui siti, un visitatore, indicando il login, scopre immediatamente se è occupato o meno. E quando si inserisce una query nella barra di ricerca di Google o Yandex, dopo ogni parola o lettera successiva, di seguito vengono visualizzate le opzioni di query già pronte. Naturalmente, questo rende il compito molto più semplice per gli utenti di Internet.
- JavaScript deve essere sempre abilitato. Senza questo supporto, la tecnologia AJAX sulle pagine pertinenti è praticamente inutile.
- Problemi con . Spesso i contenuti inseriti dinamicamente nelle pagine passano inosservati dai robot di ricerca. Per questo motivo, è consigliabile applicare il caricamento dinamico solo a determinati contenuti. Questo è l’unico modo per ridurre al minimo l’impatto negativo della tecnologia sulla promozione SEO.
- Non può essere combinato con gli strumenti del browser. Se crei pagine in modo dinamico, il browser non le ricorderà e le mostrerà nella cronologia, e quindi, quando clicchi sul pulsante “Indietro”, non tornerai alla pagina visitata in precedenza. Ma il problema si risolve con script speciali. Inoltre, non avrai la possibilità di aggiungere alcun contenuto ai segnalibri.
- Mancanza di numero di richieste. A causa del caricamento dinamico dei materiali, il sistema non può visualizzare con precisione le statistiche perché quando l'utente naviga attraverso pagine diverse, queste non si ricaricano e il contatore non conta queste transizioni. Per questo motivo potrebbero sorgere problemi durante la valutazione delle analisi sul sito.
- Il livello di sicurezza è ridotto. Installando AJAX, qualsiasi utente può visualizzare il codice sorgente della pagina e questo non è sicuro.
È già stato detto sopra che le pagine basate su questa tecnologia sono indicizzate molto male. Per evitare ciò è meglio assicurarsi in anticipo che i dati caricati dinamicamente siano disponibili anche tramite collegamenti. Avendo previsto questa possibilità, le pagine della risorsa web verranno visualizzate normalmente anche per quegli utenti che utilizzano un browser senza JavaScript.
I proprietari di siti in cui il contenuto viene caricato dinamicamente devono assicurarsi che i robot dei motori di ricerca, oltre a comprendere il contenuto delle pagine, determinino correttamente anche le regole per la navigazione nel sito.
Per ridurre al minimo l'impatto negativo di AJAX sulla promozione del sito web, è necessario ottimizzarlo:
Spesso i motori di ricerca trattano le risorse AJAX peggio dei siti che non utilizzano questa tecnologia. Ci sono diverse ragioni per questo:
- alcuni contenuti potrebbero non essere indicizzati dai robot;
- tutte le pagine hanno lo stesso URL;
- Alcune pagine potrebbero apparire in modo diverso ai robot di ricerca rispetto agli utenti.
Ma se usi saggiamente la tecnologia AJAX, cioè la usi solo per alcuni frammenti del sito, non avrai problemi con l'indicizzazione.
Non consiglierei di utilizzare la tecnologia AJAX per l'intero sito; tali siti sono scarsamente indicizzati dai motori di ricerca. Ma per alcuni elementi utente (ad esempio sondaggi, aggiunta di commenti), questa tecnologia è utile e, al contrario, può aumentare l'usabilità del tuo progetto.
ConclusioneLa tecnologia AJAX apre enormi opportunità agli utenti, rende la comunicazione con i siti web molto più veloce e comoda e aumenta la velocità del loro funzionamento. Ma presenta anche notevoli svantaggi che possono essere evitati se usati correttamente. Solo con un approccio competente il tuo sito web raggiungerà posizioni elevate nei risultati di ricerca e sarà in regola con i motori di ricerca.
La maggior parte dei siti Web moderni utilizza una tecnologia chiamata AJAX per interagire in modo rapido ed efficiente con il visitatore. AJAX è diventato un metodo molto popolare per recuperare dati da un server in background e aggiornare dinamicamente la pagina.
Lo sviluppo di codice JavaScript per implementare AJAX da zero è un processo molto lungo e noioso. Tuttavia, molte librerie JavaScript, incluso jQuery, dispongono di eccellenti implementazioni di alto livello di AJAX sotto forma di un insieme di metodi e funzioni che rendono la creazione di siti Web più semplice e veloce.
In questa serie di tutorial esamineremo le nozioni di base per creare richieste AJAX utilizzando jQuery. Verranno trattati i seguenti argomenti:
- Cos'è la tecnologia AJAX? Come funziona? Quali sono i suoi vantaggi?
- Come effettuare diversi tipi di richieste AJAX utilizzando jQuery?
- Invio di dati al server utilizzando richieste AJAX.
- Elaborazione ed estrazione dei dati dalle risposte AJAX dal server.
- Come personalizzare l'elaborazione AJAX in jQuery e modificare le impostazioni predefinite?
Nota: i tutorial si concentrano sulla parte lato client di JavaScript. Ma anche sviluppare il lato server è abbastanza semplice. Per informazioni più complete, dovresti studiare materiali sui linguaggi di programmazione lato server, come PHP.
Cos'è AJAX e a cosa serve?AJAX è una tecnica di sviluppo di applicazioni web in cui il codice JavaScript in esecuzione nel browser del visitatore comunica con il server web in modo asincrono, cioè in background. Le differenze rispetto alle normali applicazioni web sono le seguenti:
- Una tipica pagina web contiene collegamenti o moduli che, se cliccati o inviati, creano una richiesta a un nuovo URL sul server web. Il server invia una pagina HTML completamente nuova, che il browser poi esegue il rendering, sostituendo la pagina originale. Questo approccio richiede molto tempo ed è dannoso per il visitatore, poiché deve attendere il caricamento della nuova pagina.
- Quando si utilizza la tecnologia AJAX, il codice JavaScript effettua una richiesta a un URL sul server. Il codice può anche inviare dati insieme alla richiesta. Il codice JavaScript elabora quindi la risposta del server e agisce di conseguenza. Ad esempio, è possibile eseguire calcoli con i dati restituiti, aggiungere o aggiornare un widget sulla pagina oppure inviare un messaggio al visitatore sull'aggiornamento del database sul server.
Poiché la richiesta AJAX viene eseguita in background, il codice JavaScript (e il visitatore) possono continuare a interagire con la pagina mentre la richiesta viene elaborata. Il processo è nascosto al visitatore, che non ha bisogno di lasciare la pagina che sta attualmente visualizzando. Questo approccio rende le pagine AJAX molto piacevoli con cui lavorare.
Il punto fondamentale di AJAX è l'oggetto JavaScript XMLHttpRequest. Fornisce una serie di metodi come open() , send() e onreadystatechange() che possono essere utilizzati quando si inviano richieste AJAX al server e si elaborano le risposte in background.
Lo sviluppo di codice JavaScript AJAX cross-browser può essere un processo piuttosto noioso. Fortunatamente, jQuery ti offre diversi metodi AJAX facili da usare che ti consentono di astrarre molte operazioni di basso livello.
Per i più curiosi, la parola AJAX è l'abbreviazione delle prime lettere dell'espressione in inglese "A synchronous JavaScript A and X ML" (Asynchronous JavaScript and XML). Tuttavia, il termine può essere fuorviante: la richiesta non deve essere asincrona e non deve utilizzare XML per inviare i dati.
Effettuare una richiesta GET utilizzando $.get()Il metodo jQuery $.get() fornisce un modo semplice e conveniente per effettuare una semplice richiesta AJAX. Effettua la richiesta utilizzando il metodo HTTP GET (utilizzato per recuperare URL come pagine e immagini), anziché il metodo POST (tradizionalmente utilizzato per inviare i dati del modulo).
Nella sua forma più semplice, puoi chiamare un metodo come questo:
Dove url è l'URL della risorsa da cui è prevista la risposta. In genere si tratta di uno script lato server che esegue alcune azioni e può restituire alcuni dati:
$.get("http://example.com/getForecast.php");
Sebbene sia possibile richiedere anche un documento statico:
$.get("http://example.com/miapagina.html");
Quando richiedi un URL, puoi inviare dati con la richiesta. Puoi passare i dati nella stringa di query, proprio come con una normale richiesta GET:
$.get("http://example.com/getForecast.php?city=rome&date=20120318");
Il modo corretto per fare lo stesso è passare l'oggetto dati come secondo parametro al metodo $.get(). L'oggetto dati deve contenere informazioni sotto forma di coppie nome proprietà/valore proprietà. Per esempio:
Dati Var = (città: "roma", data: "20120318" ); $.get("http://example.com/getForecast.php", dati);
In alternativa, puoi passare i dati al metodo $.get() come stringa:
Dati var = "città=roma&data=20120318"; $.get("http://example.com/getForecast.php", dati);
Ricezione dei dati dal serverFinora abbiamo esaminato esempi di utilizzo di $.get() solo per inviare richieste al server, ignorando qualsiasi risposta che lo script lato server potrebbe generare. Ma nella maggior parte dei casi, il tuo codice JavaScript attenderà una risposta da uno script lato server ed elaborerà i dati ricevuti.
Una richiesta AJAX è asincrona, il che significa che viene eseguita in background mentre il resto del codice JavaScript continua a essere eseguito. Come, quindi, ricevere una risposta dal server una volta completata la richiesta?
È necessario scrivere una funzione di callback che verrà eseguita automaticamente al completamento della richiesta AJAX e il server invia una risposta. Come minimo, la tua funzione dovrebbe accettare i dati restituiti dal server come primo argomento:
Funzione myCallback(returnedData) ( // Elaboriamo i dati restituitiData )
Una volta creata la funzione di callback, puoi passarla come terzo argomento al metodo $.get():
Dati Var = (città: "roma", data: "20120318" ); $.get("http://example.com/getForecast.php", data, myCallback);
Determinazione del tipo di dati di rispostaIn genere, il lato server invia i dati in uno dei numerosi formati comuni, tra cui XML, JSON, JavaScript o HTML. Per impostazione predefinita, jQuery tenta di determinare il formato più appropriato e di analizzare i dati di conseguenza. Ma è meglio definire esplicitamente il formato.
Per specificare il formato, è necessario passare il quarto argomento al metodo $.get(). Questo argomento può essere una stringa dal seguente elenco:
- "xml"
- "json"
- "copione"
- "html"
Ad esempio, se sai che lo script del server restituisce dati in formato JSON, chiami il metodo $.get() in questo modo:
$.get("http://example.com/getForecast.php", data, myCallback, "json");
Esempio di utilizzo del metodo $.get()Ecco un esempio di creazione di una richiesta AJAX utilizzando il metodo $.get() e di semplice elaborazione della risposta. Affinché l'esempio funzioni, è necessario creare un semplice file di testo sul server chiamato getForecast.txt contenente il seguente testo:
( "città": "Vasyuki", "data": "18 marzo 2012", "previsione": "Freddo e fango", "maxTemp": +1)
Questo file simulerà una risposta in formato JSON che potrebbe essere generata da uno script di previsioni del tempo sul server.
Quindi creiamo la pagina showForecast.html nella stessa cartella di getForecast.txt:
Previsioni del tempo $(function() ( $("#getForecast").click(function() ( var data = ( city: "Vasyuki", date: "20120318" ); $.get("getForecast.txt", data , success, "json"); )); function success(forecastData) ( var previsione = previsioneData.city + " previsione per " + previsioneData.date; previsione += ": " + previsioneData.forecast + ". Temperatura massima: " + previsioneData.maxTemp + "C"; alert(previsione); ) )); Ottieni le previsioni del tempo
Apri showForecast.html nel browser e fai clic sul pulsante "Ottieni previsioni del tempo". Nella finestra del messaggio riceveremo le previsioni del tempo dal nostro server.
Ecco come funziona il codice:
Un semplice esempio di poche righe dimostra come funziona una richiesta AJAX utilizzando il metodo $.get().
