AJAX: cos'è, l'impatto sul seo, i vantaggi e gli svantaggi della tecnologia. Usare Ajax

AJAX è un acronimo che sta per Asynchronous Javascript e XML. In realtà, AJAX non è una tecnologia nuova, poiché sia ​​Javascript che XML sono in circolazione da un po' di tempo, e AJAX è una sintesi di queste tecnologie. AJAX è spesso associato al termine Web 2.0 e pubblicizzato come l'applicazione Web più recente.

Con AJAX, non è necessario aggiornare l'intera pagina ogni volta, poiché viene aggiornata solo una parte specifica di essa. È molto più conveniente, dal momento che non devi aspettare a lungo, e più economico, dal momento che 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. Questo può essere fatto utilizzando indicatori di caricamento, messaggi di testo che indicano che i dati vengono scambiati con il server. Dovrebbe anche essere chiaro che non tutti i browser supportano AJAX (versioni precedenti di browser e browser di testo). Inoltre Javascript può essere disabilitato dall'utente. Pertanto, non dovresti abusare dell'uso della tecnologia e ricorrere a metodi alternativi di presentazione delle informazioni sul sito Web.

Per riassumere i vantaggi di AJAX:

• La possibilità di creare una comoda interfaccia Web
• Interazione attiva dell'utente
• La comodità d'uso

AJAX utilizza due metodi per lavorare con una pagina web: cambiare la pagina web senza ricaricarla e accedere dinamicamente al server. Il secondo può essere fatto in diversi modi, in particolare XMLHttpRequest, di cui parleremo, e l'uso della tecnica del frame nascosto.

Scambio di dati

Per poter scambiare dati, nella pagina deve essere creato un oggetto XMLHttpRequest, che è una sorta di mediatore tra il browser dell'utente e il server (Fig. 1). Usando XMLHttpRequest, puoi inviare una richiesta al server, così come ricevere una risposta sotto forma di vari tipi di dati.

Ci sono due modi per scambiare dati con il server. Il primo modo è una richiesta GET. In questa richiesta, si accede a un documento sul server passandogli argomenti tramite l'URL stesso. In questo caso, lato client, sarà logico utilizzare la funzione di escape di Javascript in modo che alcuni dati non interrompano la richiesta.

La parte client, scritta in Javascript, deve fornire le funzionalità necessarie per comunicare in modo sicuro con il server e fornire metodi per lo scambio di dati in uno dei modi sopra indicati. Il lato server deve elaborare i dati di input e sulla base di essi generare nuove informazioni (ad esempio, lavorando con un database) e restituirle al client. Ad esempio, per richiedere informazioni al server, è possibile utilizzare una normale richiesta GET con il trasferimento di diversi parametri di piccole dimensioni, e per aggiornare le informazioni, o aggiungere nuove informazioni, sarà necessario utilizzare una richiesta POST, poiché consente trasferire grandi quantità di dati.

Come già affermato, AJAX utilizza il trasferimento dati asincrono. Ciò significa che mentre è in corso il trasferimento dei dati, l'utente può eseguire altre azioni di cui ha bisogno. In questo momento, dovresti avvisare l'utente che è in corso un qualche tipo di scambio di dati, altrimenti l'utente penserà che sia successo qualcosa e potrebbe lasciare il sito, o richiamare una funzione che è "congelata", a suo avviso. L'indicazione durante lo scambio di dati 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 dal server può essere non solo XML, come suggerisce il nome della tecnologia. Oltre a XML, puoi ottenere una risposta in testo normale o JSON (Javascript Object Notation). Se la risposta è stata ricevuta in testo normale, può essere immediatamente visualizzata in un contenitore sulla pagina. Quando viene ricevuta una risposta XML, il documento XML risultante viene in genere elaborato sul lato client e i dati vengono convertiti in (X) HTML. Quando riceve una risposta JSON, il client deve solo eseguire il codice ricevuto (la funzione Javascript eval) per ottenere un oggetto Javascript completo. Ma qui è necessario fare attenzione e tenere conto del fatto che utilizzando questa tecnologia è possibile trasmettere codice dannoso, quindi, prima di eseguire il codice ricevuto dal server, dovrebbe essere attentamente controllato ed elaborato. Esiste una pratica come una richiesta "fittizia", ​​in cui non viene ricevuta alcuna risposta dal server, vengono modificati solo i dati sul lato server.

Questo oggetto ha proprietà diverse in browser diversi, ma in generale è lo stesso.

Metodi oggetto XMLHttpRequest

Nota che i nomi dei metodi sono scritti nello stesso stile Camel delle altre funzioni Javascript. Fai attenzione quando li usi.

interrompere ()- cancellazione della richiesta in corso al server.

getAllResponseHeaders ()- ottenere tutte le intestazioni di risposta dal server.

getResponseHeader ("nome_intestazione")- ottenere il titolo specificato.

open ("tipo_richiesta", "url", "asincrono", "nome utente", "password")- inizializzazione di una richiesta al server, indicazione della modalità di richiesta. Il tipo di richiesta e l'URL sono parametri obbligatori. Il terzo argomento è un valore booleano. Di solito è sempre specificato come vero o non specificato affatto (il valore predefinito è vero). Il quarto e il quinto argomento vengono utilizzati per l'autenticazione (è molto insicuro memorizzare i dati di autenticazione in uno script, poiché qualsiasi utente può visualizzare lo script).

inviare ("contenuto")- inviare una richiesta HTTP al server e ricevere una risposta.

setRequestHeader ("header_name", "value")- impostare i valori dell'intestazione della richiesta.

Proprietà oggetto XMLHttpRequest

onreadystatechangeè una delle proprietà più importanti dell'oggetto XMLHttpRequest. Con l'aiuto di questa proprietà, viene impostato un gestore, che viene chiamato ogni volta che cambia lo stato di un oggetto.

prontoStato- un numero che indica lo stato dell'oggetto.

testorisposta- presentazione della risposta del server sotto forma di testo normale (stringa).

responseXML- un oggetto documento conforme a DOM ricevuto dal server.

stato- lo 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 può interagire con l'utente.
• 4 - L'oggetto è completamente inizializzato; ricevuto una risposta dal server.

È in base allo stato di disponibilità dell'oggetto che è possibile fornire al visitatore informazioni sulla fase in cui si trova il processo di scambio di dati con il server e, eventualmente, informarlo visivamente.

Creazione di un oggetto XMLHttpRequest

Come accennato in precedenza, la creazione di questo oggetto per ogni tipo di browser è un processo unico.

Ad esempio, per creare un oggetto nei browser compatibili con Gecko, Konqueror e Safari, dovresti usare la seguente espressione:

Richiesta Var = new XMLHttpRequest ();

E per Internet Explorer, viene utilizzato quanto segue:

Richiesta Var = nuovo oggetto ActiveX ("Microsoft.XMLHTTP");

Richiesta Var = nuovo ActiveXObject ("Msxml2.XMLHTTP");

Ora, per ottenere la compatibilità tra browser, è necessario aggiungere tutte le funzioni in una:

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 = new ActiveXObject ("Microsoft.XMLHTTP");) catch (CatchException) (Request = new ActiveXObject ("Msxml2.XMLHTTP");)) if (! Request) (alert ("Impossibile creare XMLHttpRequest");) return Request; )

Dopo tutto questo, puoi creare questo oggetto e non preoccuparti delle prestazioni sui browser più diffusi. Ma puoi creare un oggetto in posti diversi. Se lo crei globalmente, a un certo punto sarà possibile solo una richiesta al server. È possibile creare un oggetto ogni volta che c'è una richiesta al server (questo risolverà quasi completamente il problema).

Richiesta del server

L'algoritmo per la richiesta al server è simile a questo:

• Verifica dell'esistenza di XMLHttpRequest.
• Inizializzazione della connessione al server.
• Invio di una richiesta al server.
• Elaborazione dei dati ricevuti.

Per creare una richiesta al server, creeremo una piccola funzione che combinerà funzionalmente le funzioni per le richieste GET e POST.

/* Funzione per inviare una richiesta a un file sul server r_method - tipo di richiesta: GET o POST r_path - percorso a un file r_args - argomenti della forma a = 1 & b = 2 & c = 3 ... r_handler - funzione che gestisce una 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 se (! Request) (return; ) // Assegna un gestore personalizzato Request.onreadystatechange = function () (// Se lo scambio di dati è completo if (Request.readyState == 4) (// Trasferisci il controllo al gestore utente r_handler (Request);)) // Verifica se è richiesta 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") (// If this is POST- request // Imposta Request.setRequestHeader ("Content-Type", "application / x-www-form-urlencoded; charset = utf -8"); // Invio m request Request.send (r_args); ) else (// Se questa è una richiesta GET // Invia una richiesta nulla Request.send (null);))

È diventato molto più facile creare una richiesta. 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 una funzione handler var Handler = function (Request) (document.getElementById (container) .innerHTML = Request.responseText;) // Invia una richiesta SendRequest ("GET", filename, " ", Gestore);)

Ecco come avviene l'interazione con il server.

Gestione della risposta

Nell'esempio precedente, abbiamo creato una funzione di richiesta del server. Ma di fatto non è sicuro, poiché non elaboriamo lo stato dell'oggetto e lo stato della risposta dal server.

Aggiorniamo il nostro codice in modo che possa visualizzare una notifica visiva sul processo di caricamento.

Request.onreadystatechange = function () (// Se lo scambio di dati è completo if (Request.readyState == 4) (// Trasferisci il controllo al gestore utente r_handler (Request);) else (// Notifica all'utente il caricamento)) ...

Come già sai, l'oggetto XMLHttpRequest ti consente di conoscere lo stato della risposta dal server. Cogliamo l'occasione.

Request.onreadystatechange = function () (// Se lo scambio dati è completo if (Request.readyState == 4) (if (Request.status == 200) (// Trasferisce il controllo al gestore utente r_handler (Request);) else (// Notifica all'utente l'errore)) else (// Notifica all'utente il download)) ...

Opzioni di risposta del server

Diversi tipi di dati possono essere ricevuti dal server:

• Testo normale

Se ricevi testo normale, puoi inviarlo immediatamente al contenitore, ovvero all'output. Quando si ricevono dati come XML, è necessario elaborare i dati utilizzando le funzioni DOM e presentare il risultato utilizzando HTML.

Jsonè la notazione dell'oggetto Javascript. Può essere usato per rappresentare un oggetto come una stringa (ecco un'analogia con una funzione di serializzazione). Quando ricevi dati JSON, devi eseguirli per ottenere un oggetto Javascript completo ed eseguire le operazioni necessarie su di esso. Si prega di essere consapevoli del fatto che tale trasmissione ed esecuzione di dati non è sicura. Devi tenere traccia di ciò che accade per l'esecuzione.

Codice JSON di esempio:
("data": ("misc": [("name": "JSON item uno", "type": "Subtitle 1"), ("name": "JSON item due", "type": " Sottotitolo 2 ")]))

Al ricevimento di tale codice, eseguiamo la seguente azione:

Var responsedata = eval ("(" + Request.responseText + ")")

Dopo aver eseguito questo codice, l'oggetto sarà disponibile per te dati di risposta.

Lavorare con linguaggi di programmazione lato server

Questo tipo di lavoro non è diverso dal solito. Ad esempio, prenderò PHP come linguaggio lato server. Nulla è cambiato sul lato client, ma il lato server è ora rappresentato da un file PHP.

Per tradizione iniziamo salutando il nostro meraviglioso mondo:

Echo "Ciao, mondo!";

Quando si accede a questo file, il client restituirà la stringa Hello, World. Come puoi immaginare, questo presenta le più ampie possibilità per la creazione di applicazioni. Passando argomenti quando si richiama il server utilizzando XMLHttpRequest, è possibile parametrizzare l'output, fornendo così funzionalità avanzate per l'applicazione Web.

Oltre a PHP, puoi utilizzare qualsiasi altro linguaggio di programmazione lato server.

AJAX - Che cos'è?

Quando le opportunità esistenti diventano poche e non c'è nessun posto dove migliorare quella esistente, si verifica una svolta tecnologica. Una tale svolta è AJAX (Asynchronous JavaScript and XML) - un approccio alla creazione di interfacce utente per applicazioni Web, in cui una pagina Web, senza ricaricare, carica i dati di cui l'utente ha bisogno. AJAX è uno dei componenti del concetto DHTML.

Cosa ci offre questa tecnologia? Attualmente lo sviluppo di applicazioni WEB tende a distinguere tra lato client e lato server, ed è per questo che si fa largo uso di template come Smarty e XSLT. Ora i progetti stanno diventando più complessi e l'intreccio di diverse tecnologie sta diventando troppo costoso per il tempo dello sviluppatore. Quindi, ad esempio, tutti gli stili di formattazione vengono eseguiti in file CSS o XSL, i dati HTML o XML sono archiviati in altre sezioni, gestori di server nella terza, database nella quarta. E se 5-6 anni fa quasi ovunque si vedeva l'intreccio di tutto questo in un unico file, ora sta diventando sempre più una rarità.

Quando si sviluppano progetti più complessi, è necessaria la strutturazione e la leggibilità del codice. Non dovresti sporcare il codice del programmatore con il codice del progettista del layout e il codice del progettista del layout con le modifiche del progettista e così via.

C'è bisogno di differenziare il lavoro. Quindi, ad esempio, il progettista farà il suo lavoro, il progettista di layout il suo, il programmatore il suo e nessuno interferirà l'uno con l'altro. Di conseguenza, ogni partecipante al progetto dovrà solo conoscere i dati con cui dovrà lavorare. In questo caso, la produttività del gruppo e la qualità del progetto aumentano notevolmente. Attualmente, questo problema viene risolto con successo utilizzando i modelli, ma questo crea anche alcune difficoltà, poiché per, ad esempio, collegare Smarty, è necessario collegare il modulo software di elaborazione dei modelli e collegarlo chiaramente alla struttura del progetto. E questo è tutt'altro che sempre possibile e richiede determinati costi. È un po' più semplice quando si utilizzano i bundle XML + XSL in quanto forniscono più opzioni, ma questa è un'alternativa, niente di più. Ma cosa succede se guardi verso qualcosa di radicalmente nuovo, che ti permetta di combinare tutto meglio, usando le possibilità di ciò che è? Prova a immaginare JavaScript, che ha tutte le funzionalità di PHP o Perl, inclusi grafica e database, che ha estensibilità e usabilità molto migliori ed è anche multipiattaforma.

Quindi cos'è esattamente AJAX? Di Ajax si è parlato per la prima volta dopo l'articolo del febbraio 2005 di Jesse James Garrett "A New Approach to Web Applications". Ajax non è una tecnologia a sé stante. Questa è un'idea basata su due principi fondamentali.

Utilizzo di DHTML per modificare dinamicamente il contenuto della pagina.

Utilizzo di XMLHttpRequest per accedere al server al volo.

L'utilizzo di questi due approcci consente di creare interfacce utente WEB molto più convenienti su quelle pagine di siti in cui è richiesta l'interazione attiva dell'utente. L'uso di Ajax è diventato più popolare dopo che Google ha iniziato a utilizzarlo attivamente nella creazione dei propri siti, come Gmail, Google Maps e Google Suggerisci. La creazione di questi siti ha confermato l'efficacia di questo approccio.

Quindi più in dettaglio: se prendi il modello classico di un'applicazione WEB:

Il cliente, digitando l'indirizzo della risorsa di suo interesse nella barra di ricerca, arriva al server e gli fa una richiesta. Il server esegue i calcoli in base alla richiesta, accede al database, e così via, dopodiché i dati ricevuti vanno al client e, se necessario, vengono sostituiti in modelli ed elaborati dal browser. Il risultato è la pagina che vediamo, e che l'80% della popolazione del paese nel WEB chiama Internet. Questo è un modello classico che è riuscito a mettersi alla prova e a guadagnarsi un posto d'onore al sole. Questo è il modello di interazione più semplice e, di conseguenza, il più diffuso. Tuttavia, sta diventando sempre più insufficiente. Immagina il gioco online "Sea Battle", che è giocato da due amici incalliti: un residente in Sudafrica e un residente in Giappone. Come puoi rendere il loro gioco il più divertente possibile utilizzando un modello del genere? In ogni caso, i dati delle navi affondate verranno conservati sul server, e per verificare se l'avversario non è di suo gradimento sarà necessario aggiornare ogni volta la pagina e aggiornare i dati obsoleti. "Ma la gente ha inventato la memorizzazione nella cache" - dici, e avrai assolutamente ragione, ma non lo rende affatto più facile. La memorizzazione nella cache accelererà solo il tempo di interazione del server, ma non eliminerà la necessità di ricaricare la pagina. In alternativa, puoi impostare un certo tempo di autoaggiornamento, ma in questo caso la pagina si ricaricherà completamente.

Ora diamo un'occhiata al modello di interazione AJAX:

La sequenza di azioni del cliente è preservata e lui, molto probabilmente, non capirà cosa accadrà e la parola AJAX sarà associata solo al nome della squadra di calcio. Ma le cose sembrano diverse sul lato server.

Quando si contatta il server, viene generata una pagina che verrà visualizzata all'utente e gli offrirà di eseguire la sequenza di azioni a cui è interessato. Con una scelta consapevole (sebbene non necessaria) di un client, la sua richiesta farà riferimento al modulo AJAX, che eseguirà tutti i calcoli di suo interesse e lavorerà con il server in quanto tale. Ma qual è l'innovazione? La differenza principale è che questo metodo ci consente di accedere dinamicamente al server ed eseguire le azioni di nostro interesse. Ad esempio, dobbiamo accedere al database e ottenere i dati che ci interessano, che poi utilizzeremo. Memorizzeremo i dati in un file XML che verrà generato dinamicamente, quindi:

Crea un nuovo oggetto JavaScript:

Var req = new ActiveXObject ("Microsoft.XMLHTTP"); (per IE) var req = new XMLHttpRequest (); (Per tutto il resto)

Quindi scriviamo una funzione usando questo oggetto

Var richiesta; funzione loadXMLDoc (url) (// branch per oggetto XMLHttpRequest nativo if (window.XMLHttpRequest) (req = new XMLHttpRequest (); req.onreadystatechange = processReqChange; req.open ("GET", url, true); req.send ( null); // branch per IE/Windows ActiveX version) else if (window.ActiveXObject) (req = new ActiveXObject ("Microsoft.XMLHTTP"); if (req) (req.onreadystatechange = processReqChange; req.open ("GET ", url, vero); req.send ();)))

Nel corpo del file HTML, scrivi uno script che:

Funzione checkName (input, response) (if (response! = "") (// Response mode message = document.getElementById ("nameCheckFailed"); if (response == "1") (message.className = "error"; ) else (message.className = "hidden";)) else (// Input mode url = "http: //localhost/xml/checkUserName.php? q =" \\ + input; loadXMLDoc (url);))

Nel file localhost / xml / checkUserName.php, elaboriamo i dati ricevuti dalla riga di comando in questo caso nella variabile q. E salviamo il risultato in una struttura XML, che memorizziamo nello stesso file. Quindi possiamo ricevere ed elaborare i dati ricevuti dal database, o qualsiasi altra cosa di cui abbiamo bisogno. Inoltre, il server elaborerà solo i dati che dobbiamo aggiornare e non l'intera pagina se viene ricaricata.

Ora torniamo ai nostri due amici - appassionati di combattimento navale: in vista della comparsa di questa innovazione, possiamo fare quanto segue: mettere un controllo ogni tre secondi del file XML, questo controllo implica il controllo del database per un nuovo record, che è, la mossa fatta dall'avversario. Se la mossa è stata fatta, la pagina affonda le navi senza ricaricare, rovinando così l'umore dei partecipanti alle battaglie sull'acqua. Questa funzionalità si ottiene con il semplice utilizzo di Javascript e fogli di stile. Questo esempio è abbastanza illustrativo, ma lungi dall'essere completo, l'applicazione di questa tecnologia è molto più significativa.

Tuttavia, non è tutto così semplice. Diamo ora un'occhiata ai tratti negativi.

In primo luogo, possiamo trasferire i dati solo utilizzando il metodo GET, quindi grandi quantità di dati dovranno essere lasciate sole. Questo problema è già stato sollevato più di una volta in varie fonti, ma signori, ci sono cookie che sono abbastanza accettabili in caso di trasferimento di dati di grandi dimensioni, che possono ospitare una richiesta GET e Javascript, a sua volta, ha funzioni per lavorare con essi.

Il secondo problema è la compatibilità tra browser. L'oggetto XMLHttpRequest non fa ancora parte di nessuno standard (sebbene qualcosa di simile sia già stato proposto nella specifica W3C DOM Level 3 Load and Save). Pertanto, esistono due metodi diversi per chiamare questo oggetto nel codice dello script. In Internet Explorer, un oggetto ActiveX viene richiamato in questo modo:

Var req = new ActiveXObject ("Microsoft.XMLHTTP");

In Mozilla e Safari, questo è più semplice (poiché è un oggetto incorporato in JavaScript):

Var req = new XMLHttpRequest ();

Tutti i browser moderni supportano questo oggetto e solo l'1,8% degli utenti (secondo le statistiche di SpyLog) che utilizzano versioni molto vecchie di browser che non supportano questo oggetto avranno problemi.

E infine, la sicurezza. Soffermiamoci su questo in modo più dettagliato. Il problema principale è che tutti i dati e il codice sorgente delle funzioni JavaScript possono essere visti visualizzando il codice sorgente della pagina; di conseguenza, un attaccante può tracciare la logica di esecuzione della richiesta e, in determinate circostanze, eseguire il set dei comandi di cui ha bisogno. Questo non gioca un ruolo speciale quando abbiamo un semplice confronto di dati, ma cosa fare in situazioni più complesse, ad esempio durante l'autorizzazione, e come, in questo caso, passare le password. Come accennato in precedenza, i cookie vengono in soccorso. I dati necessari possono essere inviati con il loro aiuto, nonché elaborati. Facciamo un esempio in cui un utente verrà autenticato utilizzando la tecnologia di cui tratta l'articolo.

Generando la pagina, formiamo valori univoci, che poi inseriamo nelle variabili del server. E nei Cookie del browser, quindi, previa autorizzazione, riceviamo il nome utente e la sua password, che dobbiamo trasferire al modulo di elaborazione sul server.

Dopo che l'utente ha inserito i dati e premuto il pulsante Invia, la sua password viene inserita in Cookie e il nome utente viene trasmesso apertamente, ad esempio con un collegamento http://www.mubestajax.com/ajax.php?login=pupkin durante la ricezione dei dati, il server verifica innanzitutto i dati ricevuti. Poiché i valori che abbiamo generato dall'inizio del lavoro del server e poi li abbiamo trasferiti alle variabili globali e ai cookie del server devono corrispondere, quando si verifica l'integrità dei dati trasmessi, se c'è una mancata corrispondenza, il programma smette di funzionare. Se tutto è andato bene, vengono estratti tutti i dati necessari e vengono eseguiti i calcoli e il lavoro necessari. Questo metodo di protezione è abbastanza semplice ed efficace. Ma per grandi progetti, non funzionerà.

Quando la sicurezza viene prima di tutto, è meglio utilizzare soluzioni più sofisticate e affidabili. Ma nella maggior parte dei casi, queste precauzioni saranno più che sufficienti, poiché l'utilizzo di moduli più complessi comporta l'utilizzo di tecnologie non sempre incluse nel software standard dei server moderni, la cui caratteristica principale è la semplicità. Ecco perché tecnologie come MySQL e PHP sono diventate molto diffuse, dal momento che forniscono facilità d'uso con il loro basso consumo di risorse e sufficiente affidabilità. E nell'ambito di questo software, la soluzione proposta sopra è la soluzione migliore.

In conclusione, vorrei dire che AJAX, da un lato, è un enorme passo avanti nell'ingegneria WEB, ma dall'altro è una fase di evoluzione attesa da tempo che ha aperto nuovi orizzonti nel campo dello sviluppo del software . Allo stesso tempo, questa tecnologia è ancora piuttosto "umida", poiché il suo utilizzo al momento è piuttosto una piacevole eccezione. Ma sono sicuro che tutti sentiranno parlare di lei più di una volta.

La maggior parte dei siti web moderni utilizza una tecnologia chiamata AJAX per interagire con il visitatore in modo rapido ed efficiente. AJAX è diventata una tecnica molto popolare per recuperare i dati da un server in background e aggiornare dinamicamente una pagina.

Lo sviluppo di codice JavaScript per implementare AJAX da zero è un processo molto noioso e noioso. Tuttavia, molte librerie JavaScript, tra cui jQuery, hanno eccellenti implementazioni AJAX di alto livello come un insieme di metodi e funzioni che rendono la creazione di siti Web più semplice e veloce.

In questa serie di tutorial, esamineremo le basi della creazione di richieste AJAX con jQuery. Verranno trattati i seguenti argomenti:

• Che cos'è la tecnologia AJAX? Come funziona? Quali sono i suoi vantaggi?
• Come posso effettuare diversi tipi di richieste AJAX utilizzando jQuery?
• Invio di dati al server tramite richieste AJAX.
• Elaborazione ed estrazione di dati dalle risposte AJAX dal server.
• Come posso personalizzare la gestione AJAX di jQuery e modificare le impostazioni predefinite?

Nota: le esercitazioni si concentrano sulla parte JavaScript lato client. Ma anche lo sviluppo lato server è piuttosto semplice. Per ulteriori informazioni, dovresti studiare i materiali sui linguaggi di programmazione lato server come PHP.

Che cos'è AJAX e in che modo è utile?

AJAX è una tecnica di sviluppo di applicazioni Web in cui il codice JavaScript in esecuzione nel browser di un visitatore comunica con un server Web in modo asincrono, ovvero in background. Le differenze rispetto alle applicazioni web convenzionali sono le seguenti:

• Pagina web normale contiene collegamenti o moduli che, se cliccati o inviati, generano una richiesta a un nuovo URL sul server web. Il server invia una pagina HTML completamente nuova, che viene quindi visualizzata dal browser, sostituendo la pagina originale. Questo approccio richiede tempo e ha un effetto negativo sul 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 quindi elabora la risposta del server e agisce di conseguenza. Ad esempio, è possibile eseguire calcoli con i dati restituiti, aggiungere o aggiornare un widget sulla pagina, inviare un messaggio al visitatore sull'aggiornamento del database sul server.

Poiché la richiesta AJAX viene eseguita in background, JavaScript (e il visitatore) possono continuare a interagire con la pagina durante l'elaborazione della richiesta. Il processo è nascosto al visitatore che non ha bisogno di lasciare la pagina che sta visualizzando in un dato momento. Questo approccio rende le pagine AJAX molto piacevoli con cui lavorare.

Il cuore 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 AJAX JavaScript cross-browser può essere un processo noioso. Fortunatamente, jQuery ti offre alcuni metodi AJAX di facile utilizzo che astraggono molte operazioni di basso livello.

Per i più curiosi, la parola AJAX è l'abbreviazione delle prime lettere di un'espressione in inglese " UN sincrono J avaScript UN nd X ML "(JavaScript asincrono e XML.) Tuttavia, il termine può essere fuorviante: la richiesta non deve essere asincrona e non è necessario utilizzare XML per inviare i dati.

Effettuare una richiesta GET con $ .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 ottenere URL come pagine e immagini) invece del metodo POST (che viene 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 una risposta. Di solito è 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://esempio.com/miapagina.html");

Quando si richiede un URL, è possibile inviare i dati con la richiesta. Puoi passare i dati in una stringa di query, proprio come una normale richiesta GET:

$ .get ("http://example.com/getForecast.php?city=rome&date=20120318");

Sarebbe corretto fare lo stesso passando un oggetto dati come secondo parametro al metodo $ .get(). L'oggetto dati deve contenere informazioni sotto forma di coppie nome proprietà/valore proprietà. Ad esempio:

Var data = (città: "roma", data: "20120318"); $ .get ("http://example.com/getForecast.php", dati);

In alternativa, puoi passare i dati al metodo $ .get() come stringa:

Var data = "città = roma & data = 20120318"; $ .get ("http://example.com/getForecast.php", dati);

Riceviamo dati dal server

Finora, abbiamo esaminato esempi di utilizzo di $ .get() solo per inviare richieste al server, ignorando qualsiasi risposta che potrebbe generare uno script lato server. Ma nella maggior parte dei casi, il tuo codice JavaScript si aspetterà 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 JavaScript continua a essere eseguito. Come, quindi, ottenere una risposta dal server una volta completata la richiesta?

devi scrivere funzione di ritorno che verrà eseguito automaticamente quando la richiesta AJAX viene completata e il server invia una risposta. Come minimo, la tua funzione dovrebbe accettare i dati restituiti dal server come primo argomento:

Funzione myCallback (returnedData) (// Elabora i dati restituiti)

Una volta creata la funzione di callback, puoi passarla come terzo argomento al metodo $ .get():

Var data = (città: "roma", data: "20120318"); $ .get ("http://example.com/getForecast.php", data, myCallback);

Determinazione del tipo di dati della risposta

In genere, il lato server trasferisce i dati in uno dei numerosi formati comuni, inclusi XML, JSON, JavaScript o HTML. Per impostazione predefinita, jQuery cerca di determinare il formato più appropriato e di analizzare i dati di conseguenza. Ma è meglio definire esplicitamente il formato.

Per specificare il formato, passare il quarto argomento al metodo $ .get(). Questo argomento può essere una stringa dal seguente elenco:

• "xml"
• "json"
• "sceneggiatura"
• "html"

Ad esempio, se sai che lo script del server restituisce dati in formato JSON, chiama il metodo $ .get() come segue:

$ .get ("http://example.com/getForecast.php", data, myCallback, "json");

Un esempio di utilizzo del metodo $ .get()

Ecco un esempio di creazione di una richiesta AJAX utilizzando il metodo $ .get() e la semplice gestione della risposta. Affinché l'esempio funzioni, è necessario creare un semplice file di testo sul server denominato getForecast.txt contenente il seguente testo:

("città": "Vasyuki", "data": "18 marzo 2012", "previsione": "Freddo da brivido e fango", "maxTemp": +1)

Questo file simulerà una risposta JSON che potrebbe essere stata generata da uno script di previsioni del tempo sul server.

Quindi creiamo la pagina showForecast.html nella stessa cartella di getForecast.txt:

Ottieni le previsioni del tempo

Apri showForecast.html in un 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 fornito:

1. showForecast.html contiene un elemento pulsante Ottieni previsioni del tempo con l'ID getForecast.
2. Il JavaScript nella parte superiore della pagina viene eseguito non appena la pagina viene caricata e il DOM è pronto.
3. Il codice JavaScript associa prima un gestore di eventi click al pulsante #getForecast. Questo gestore effettua una richiesta AJAX GET a getForecast.txt, passando il nome della città e la data per la previsione. Definisce anche una funzione di ritorno success() che verrà eseguita al completamento della richiesta. Il formato dei dati restituiti dal server è definito come JSON.
4. Il file getForecast.txt restituisce i dati di previsione in formato JSON al browser.
5. Viene chiamata la funzione success(). jQuery analizza i dati JSON ricevuti da getForecast.txt, li converte in un oggetto JavaScript e li passa alla funzione.
6. La funzione restituisce un oggetto dati forecastData e visualizza un messaggio che contiene diverse proprietà dell'oggetto, inclusi il nome della città, la previsione e la temperatura.

Un semplice esempio di poche righe mostra come funziona una richiesta AJAX utilizzando il metodo $ .get().

Cinque anni fa eri un brutto anatroccolo (nessuno parlava) se non conoscevi XML. Diciotto mesi fa, Ruby era sotto i riflettori e i programmatori che non sapevano cosa stesse succedendo non sono stati invitati a un serbatoio di acqua refrigerata. Oggi, se vuoi partecipare alla festa tecnologica, hai bisogno dell'Ajax.

Tuttavia, l'Ajax è molto lontano non solo un capriccio, ma un potente approccio alla creazione di siti Web che non è così difficile da imparare come una lingua completamente nuova.

Prima di immergermi nei dettagli dell'Ajax, prendiamoci qualche minuto per capire cosa fa Aiace. Quando scrivi un'applicazione in questi giorni, hai due opzioni principali:

• Applicazioni desktop
• Applicazioni web

Entrambe le opzioni sono familiari; le applicazioni desktop sono generalmente fornite su CD (o talvolta scaricate da un sito Web) e installate interamente sul computer. Possono utilizzare Internet per scaricare gli aggiornamenti, ma il codice che esegue queste applicazioni è sul desktop. Le applicazioni Web (non a caso) vengono eseguite da qualche parte su un server Web e si accede a tali applicazioni tramite il browser Web.

Ancora più importante, il punto in cui viene eseguito il codice per queste applicazioni determina come si comportano e come interagisci con esse. Le applicazioni desktop di solito sono abbastanza veloci (girano sul tuo computer, non ti aspetti una connessione a Internet), hanno ottime interfacce utente (di solito interagiscono con il tuo sistema operativo) e sono incredibilmente dinamiche. Puoi fare clic, inserire testo, utilizzare menu a discesa e pop-up, navigare tra le finestre praticamente senza alcun ritardo.

D'altra parte, le applicazioni Web sono solitamente le più recenti e forniscono funzionalità che non avresti mai sul tuo computer (pensa ad Amazon.com e eBay). Tuttavia, con la potenza del Web arriva l'attesa: l'attesa di una risposta dal server, l'attesa dell'aggiornamento di una schermata, l'attesa di una risposta a una richiesta e la generazione di una nuova pagina.

Chiaramente questa è una semplificazione, ma ti fai un'idea generale. Come potresti già sospettare, Ajax cerca di colmare il divario tra funzionalità e interattività in un'applicazione desktop e un'applicazione Web sempre aggiornata. È possibile utilizzare interfacce utente dinamiche simili a quelle presenti in un'applicazione desktop, ma disponibili in un'applicazione Web.

Allora, cosa stiamo aspettando? Iniziamo esaminando Ajax e come puoi trasformare le tue goffe interfacce Web in applicazioni Ajax reattive.

Vecchia tecnologia, nuovi trucchi

Per quanto riguarda Ajax, la realtà è che comprende molte tecnologie: per padroneggiarlo, è necessario approfondire diverse tecnologie (motivo per cui dividerò i primi articoli di questa serie in parti indipendenti). La buona notizia è che potresti già sapere abbastanza su molte di queste tecnologie: la maggior parte di queste singole tecnologie sono facili da imparare (sicuramente non così difficili come un linguaggio di programmazione completo come Java o Ruby).

Definizione di Ajax

A proposito, Ajax è l'acronimo di Asynchronous JavaScript e XML (e DHTML, ecc.). La frase è stata coniata da Jesse James Garrett di Adaptive Path (vedi sezione) e, secondo Jesse, non doveva essere un acronimo.

Le principali tecnologie coinvolte nelle applicazioni Ajax sono:

• L'HTML viene utilizzato per creare moduli Web e specificare i campi da utilizzare nell'applicazione.
• Il codice JavaScript è il codice principale che esegue le applicazioni Ajax e fornisce l'interazione con le applicazioni server.
• DHTML, o HTML dinamico, ti aiuta ad aggiornare dinamicamente i moduli. Utilizzerai div, span e altri elementi HTML dinamici per contrassegnare il tuo HTML.
• Il DOM, il Document Object Model, verrà utilizzato (tramite JavaScript) per manipolare sia la struttura del tuo HTML che (in alcuni casi) l'XML ricevuto dal server.

Diamo un'occhiata a tutto questo separatamente e capiamo cosa fa ciascuna di queste tecnologie. Esplorerò ciascuno di essi nei seguenti articoli; ora basta dare un'occhiata più da vicino a questi componenti e tecnologie. Più ne conosci, più è facile passare da una conoscenza casuale alla padronanza di ciascuno di essi (e migliorare davvero il processo di sviluppo di applicazioni Web).

Oggetto XMLHttpRequest

Il primo oggetto che vuoi sapere è probabilmente il più nuovo per te; si chiama XMLHttpRequest. È un oggetto JavaScript ed è facile da creare come mostrato in.

Listato 1. Creazione di un nuovo oggetto XMLHttpRequest

Entrerò più in dettaglio su questo oggetto nel prossimo articolo, ma per ora, renditi conto che questo è l'oggetto che controlla tutta la tua interazione con il server. Prima di andare oltre, fermati e pensaci: questa è tecnologia JavaScript nell'oggetto XMLHttpRequest che sta parlando con il server. Questo non è il normale flusso di un'applicazione, ed è qui che risiede quasi tutta la magia di Ajax.

Nelle normali applicazioni web, gli utenti compilano i campi del modulo e fanno clic su un pulsante Invia(Confermare). L'intero modulo viene quindi inviato al server, il server elabora lo script (di solito PHP o Java, forse un processo CGI o qualcosa del genere) e quindi restituisce l'intera nuova pagina. Questa pagina potrebbe essere una pagina HTML con un nuovo modulo con alcuni dati compilati, o una pagina di conferma, o forse una pagina con alcune scelte a seconda dei dati inseriti nel modulo originale. Naturalmente, fino a quando lo script o il programma sul server non viene elaborato e viene restituito un nuovo modulo, gli utenti devono attendere. I loro schermi verranno cancellati e ridisegnati man mano che arrivano nuovi dati dal server. È qui che entra in gioco la bassa interattività: gli utenti non ricevono feedback immediati e sicuramente non si sentono come se lo facessero con le app desktop.

Ajax essenzialmente mette la tecnologia JavaScript e l'oggetto XMLHttpRequest tra il tuo modulo web e server. Quando gli utenti compilano i moduli, i dati vengono inviati a una sorta di codice JavaScript, non direttamente al server. Invece, il codice JavaScript raccoglie i dati del modulo e invia la richiesta al server. Mentre ciò accade, il modulo sullo schermo dell'utente non sfarfalla, lampeggia, scompare o si blocca. In altre parole, il codice JavaScript passa la richiesta in background; l'utente non si accorge nemmeno che c'è una richiesta al server. Inoltre, la richiesta viene inviata in modo asincrono, il che significa che il tuo codice JavaScript (e l'utente) non è in attesa di una risposta del server. Cioè, gli utenti possono continuare a inserire dati, scorrere la pagina e utilizzare l'applicazione.

Il server quindi restituisce i dati al codice JavaScript (ancora nel modulo Web), che decide cosa fare con i dati. Può aggiornare i campi del modulo al volo, rendendo la tua domanda immediata: gli utenti ottengono nuovi dati senza inviare o aggiornare i loro moduli. Il codice JavaScript può persino ricevere dati, eseguire alcuni calcoli e passare un'altra richiesta, il tutto senza l'intervento dell'utente! Questa è la potenza di XMLHttpRequest. Può comunicare con il server a piacimento e l'utente non sa nemmeno cosa sta realmente succedendo. Di conseguenza, otteniamo il dinamismo, la sensibilità, l'elevata interattività dell'applicazione desktop insieme a tutte le possibilità di Internet.

Aggiunta di codice JavaScript

Una volta compreso XMLHttpRequest, il JavaScript rimanente diventa un lavoro ingrato. In effetti, utilizzerai JavaScript per un numero limitato di attività di base:

Per eseguire le prime due attività, dovresti avere molta familiarità con il metodo getElementById() fornito in.

Listato 2. Raccolta e impostazione dei valori dei campi utilizzando il codice JavaScript

// Recupera il valore del campo "phone" e scrivilo nella variabile phone var phone = document.getElementById ("phone"). Value; // Imposta i valori sul modulo utilizzando l'array di risposta document.getElementById ("ordine"). Value = response; document.getElementById ("indirizzo") value = risposta;

Non c'è niente di molto speciale qui, il che è fantastico! Dovresti iniziare a capire che non c'è nulla di eccessivamente complicato in tutto questo. Una volta che ti senti a tuo agio con XMLHttpRequest, il resto della tua applicazione Ajax sarà semplice JavaScript come quello in, mescolato con HTML leggermente più intelligente. Inoltre, di tanto in tanto c'è un po' di lavoro DOM... Diamo un'occhiata a questo.

Completamento con il DOM

Ultimo ma non meno importante è il DOM, il Document Object Model. Per alcuni di voi, le voci sul DOM possono essere un po' intimidatorie: non è spesso utilizzato dai designer HTML e persino un po' raro per i programmatori JavaScript (a meno che non si affronti davvero qualsiasi attività di programmazione di alto livello). È possibile trovare un uso diffuso del DOM in programmi pesanti scritti in Java e C/C++; infatti, questo ha fatto guadagnare al DOM la reputazione di essere difficile e difficile da imparare.

Fortunatamente, l'utilizzo del DOM nella tecnologia JavaScript è facile e per lo più intuitivo. In questo momento probabilmente dovrei dirti come usare il DOM, o almeno darti un paio di esempi di codice, ma anche questo ti porterebbe fuori strada. Il punto è che puoi ottenere molto da Ajax senza dover mescolare il DOM qui, ed è esattamente il modo in cui voglio mostrarti. Tornerò sul DOM nel prossimo articolo, ma per ora, sappi solo che è qui da qualche parte. Quando inizi a passare XML avanti e indietro tra il tuo codice JavaScript e le modifiche effettive al modulo HTML, ti immergerai più a fondo nel DOM. Nel frattempo, puoi lavorare efficacemente con Ajax senza il DOM, quindi mettiamolo da parte per il momento.

Ottenere l'oggetto della richiesta

Armati di questa panoramica, sei pronto per dare un'occhiata più da vicino. Poiché XMLHttpRequest è fondamentale per le applicazioni Ajax (e forse nuovo per molti di voi), inizierò con esso. Come hai visto, creare questo oggetto e usarlo dovrebbe essere facile, giusto? Apetta un minuto.

Ricordi quelle orribili guerre di browser di qualche anno fa e come nulla funzionava allo stesso modo tra i browser? Che ci crediate o no, quelle guerre continuano fino ad oggi, anche se su scala molto più ridotta. E, sorpresa: XMLHttpRequest è una delle vittime di queste guerre. Pertanto, è necessario eseguire diversi passaggi per far funzionare XMLHttpRequest. Ti mostrerò come farlo passo dopo passo.

Lavorare con i browser Microsoft

Microsoft Internet Explorer utilizza il parser MSXML per elaborare XML (vedere la sezione per i collegamenti a ulteriori informazioni su MSXML). Pertanto, quando si scrivono applicazioni Ajax che devono essere eseguite in Internet Explorer, è necessario creare l'oggetto in un modo speciale.

Tuttavia, non è così facile. In realtà sono in uso due diverse versioni di MSXML. La versione MSXML dipende dalla versione della tecnologia JavaScript installata in Internet Explorer, quindi è necessario scrivere un codice che funzioni per entrambe le versioni. Dai un'occhiata a quale fornisce il codice per la creazione di XMLHttpRequest nei browser Microsoft.

Listato 3. Creazione di un oggetto XMLHttpRequest nei browser Microsoft

var xmlHttp = false; try (xmlHttp = nuovo ActiveXObject ("Msxml2.XMLHTTP");) catch (e) (try (xmlHttp = nuovo ActiveXObject ("Microsoft.XMLHTTP");) catch (e2) (xmlHttp = false;))

Tutto questo potrebbe non avere ancora senso, ma va bene lo stesso. Approfondirai la programmazione JavaScript, la gestione degli errori, la compilazione condizionale e altro prima della fine di questo articolo. Nel frattempo, dovresti scrivere due righe principali nella tua testa:

xmlHttp = nuovo ActiveXObject ("Msxml2.XMLHTTP");

xmlHttp = nuovo ActiveXObject ("Microsoft.XMLHTTP"); ...

In poche parole, questo codice tenta di creare un oggetto utilizzando una versione di MSXML; se fallisce, viene creato un oggetto per la seconda versione. Grazioso, eh? Se tutto il resto fallisce, la variabile xmlHttp viene impostata su false per indicare al codice che qualcosa non va. In questo caso, potresti lavorare con un browser non Microsoft e devi utilizzare un codice diverso per portare a termine il lavoro.

Lavorare con Mozilla e browser non Microsoft

Se Internet Explorer non è il tuo browser o stai scrivendo codice per browser non Microsoft, hai bisogno di un codice diverso. In effetti, questa è la semplice riga che hai visto in:

var xmlHttp = nuovo oggetto XMLHttpRequest; ...

Questa linea molto più semplice crea un oggetto XMLHttpRequest in Mozilla, Firefox, Safari, Opera e in larga misura ogni browser non Microsoft che supporta Ajax in qualsiasi forma.

Un'associazione

Vogliamo sostenere tutto browser. Chi vuole scrivere un'applicazione che funzioni solo in Internet Explorer o un'applicazione che funzioni solo in tutti gli altri browser? Ancora peggio, vuoi scrivere la tua domanda due volte? Ovviamente no! Quindi, combiniamo il supporto per Internet Explorer e per il resto dei browser. Ecco il codice per farlo.

Listato 4. Creazione di un oggetto XMLHttpRequest per tutti i browser

/ * Crea un nuovo oggetto XMLHttpRequest per comunicare con il server Web * / var xmlHttp = false; / * @ cc_on @ * / / * @ if (@_jscript_version> = 5) try (xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");) catch (e) (try (xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP" );) catch (e2) (xmlHttp = false;)) @end @ * / if (! xmlHttp && typeof XMLHttpRequest! = "undefined") (xmlHttp = new XMLHttpRequest ();)

Per ora, ignora commenti e tag oscuri come @cc_on; questi sono comandi speciali del compilatore JavaScript che esamineremo in dettaglio nel mio prossimo articolo, che si concentrerà completamente su XMLHttpRequest. Il nucleo di questo codice può essere suddiviso in tre fasi:

1. Crea una variabile xmlHttp per fare riferimento all'oggetto XMLHttpRequest che creerai.
2. Nel blocco try, crea un oggetto nei browser Microsoft:
   • Nel blocco try, crea un oggetto utilizzando l'oggetto Msxml2.XMLHTTP.
   • Se fallisce, nel blocco try, crea l'oggetto utilizzando l'oggetto Microsoft.XMLHTTP.
3. Se xmlHttp non è ancora installato, crea un oggetto per il resto dei browser.

Al termine di questo processo, xmlHttp deve fare riferimento a un oggetto XMLHttpRequest valido, indipendentemente dal browser utilizzato dall'utente.

Qualche parola sulla protezione

Che ne dici di protezione? I browser moderni offrono agli utenti la possibilità di migliorare la sicurezza, disabilitare la tecnologia JavaScript e disabilitare molte impostazioni nei propri browser. In queste situazioni, il tuo codice probabilmente non funzionerà in nessuna circostanza. Per tali situazioni, devi risolvere i problemi in modo elegante - c'è almeno un articolo su questo, e ne scriverò uno più tardi (questa sarà probabilmente una lunga serie, ma non preoccuparti: lo padroneggerai prima della fine di questo serie di articoli). Nel frattempo, stai scrivendo un codice robusto ma non perfetto, ottimo per l'apprendimento di Ajax. Tornerai al codice di qualità superiore in seguito.

Richiesta/risposta nel mondo Ajax

Quindi, hai già familiarità con Ajax e hai una conoscenza di base dell'oggetto XMLHttpRequest e di come crearlo. Se leggi attentamente, ti renderai persino conto che è la tecnologia JavaScript che comunica con qualsiasi applicazione Web sul server, non il tuo modulo HTML, che hai inviato direttamente.

Cosa ci siamo persi? Come utilizzare effettivamente XMLHttpRequest. Poiché questo è un codice critico, utilizzerai alcuni moduli in ogni la tua applicazione Ajax, diamo una rapida occhiata a come appare il modello di richiesta/risposta di base in Ajax.

Esecuzione di una richiesta

Hai il tuo nuovo eccellente oggetto XMLHttpRequest; mettiamolo in moto. Innanzitutto, abbiamo bisogno di un metodo JavaScript che la tua pagina Web possa richiamare (ad esempio, quando un utente immette del testo o seleziona un'opzione da un menu). Quindi, devi seguire lo stesso schema di base in quasi tutte le tue applicazioni Ajax:

1. Ottieni alcuni dati da un modulo Web.
2. Crea un URL per connetterti.
3. Apri una connessione al server.
4. Imposta una funzione per il server che verrà eseguita dopo la sua risposta.
5. Invia la richiesta.

Listato 6. Elaborazione della risposta dal server

funzione updatePage () (if (xmlHttp.readyState == 4) (var response = xmlHttp.responseText; document.getElementById ("zipCode"). value = response;))

Ancora una volta, il codice non è difficile o complesso. Attende che il server lo chiami con lo stato di pronto desiderato, quindi utilizza il valore restituito dal server (in questo caso il codice postale per la città e lo stato immessi dall'utente) per impostare un altro campo del modulo. Di conseguenza, il campo CAP appare inaspettatamente con il CAP, ma l'utente mai cliccato il pulsante! Questo è il comportamento dell'applicazione desktop di cui ho parlato prima. Efficienza, sensazione di dinamismo, ecc., e il tutto con un piccolo codice Ajax.

I lettori attenti noteranno probabilmente che il campo zipCode è un normale campo di testo. Dopo che il server restituisce il codice postale e imposta questo campo tramite il metodo updatePage () sul codice postale della città/stato, gli utenti Maggio sovrascrivere questo valore. Questo è intenzionale per due motivi: per mantenere semplice questo esempio e per mostrarti che a volte vuoi che gli utenti siano in grado di sovrascrivere i valori restituiti dal server. Ricorda entrambi i punti; sono importanti per un buon design dell'interfaccia utente.

Intercettazione nei moduli Web

Cosa ci rimane? In effetti, non molto. Hai un metodo JavaScript che raccoglie le informazioni inserite dall'utente in un modulo, le passa al server, fornisce un altro metodo JavaScript per gestire la risposta e persino imposta un valore di campo quando arriva quella risposta. Non resta che convocare questo primo metodo ed eseguire il processo completo. Potresti ovviamente aggiungere un pulsante al tuo modulo HTML, ma è il buon vecchio 2001, non è vero? Sfruttiamo la tecnologia JavaScript, come mostrato in.

Listato 7. Avvio del processo Ajax

Città: onChange = "callServer ();" />

Stato: onChange = "callServer ();" />

Cap:

Se questo sembra un altro pezzo di routine, in una certa misura, codice, hai ragione, lo è! Quando l'utente immette un nuovo valore per uno qualsiasi dei campi città o stato, viene attivato il metodo callServer() e inizia la funzione Ajax. Pensi che stai cominciando a capire l'essenza delle cose? Bene!

Infine

A questo punto, potresti non essere pronto per scrivere la tua prima applicazione Ajax, almeno non prima di aver esplorato la sezione. Tuttavia, puoi già iniziare a capire l'idea di base di come funzionano tali applicazioni e cos'è un oggetto XMLHttpRequest. Nei prossimi articoli imparerai a conoscere questo oggetto, come controllare le interazioni JavaScript-server e come lavorare con i moduli HTML e persino comprendere il DOM.

Nel frattempo, prenditi del tempo per pensare a quanto possono essere potenti le applicazioni Ajax. Immagina un modulo Web che risponde non solo quando fai clic su un pulsante, ma anche quando inserisci dati in un campo, quando selezioni un'opzione da un elenco di opzioni e persino quando muovi il cursore sullo schermo. Pensa a cosa significa realmente la parola asincrono... Pensa all'esecuzione del codice JavaScript e non mi aspettavo fino a quando il server non restituisce le risposte alle sue richieste. Quali problemi puoi affrontare? Quali sono le cose a cui prestare attenzione? E come cambierà il design dei tuoi moduli con questo nuovo approccio alla programmazione?

Trascorrere del tempo su questi punti ti darà più valore rispetto al semplice ottenere del codice che puoi copiare e incollare nella tua applicazione senza capirlo veramente. Nel prossimo articolo metterai in pratica queste idee; Fornirò i dettagli sul codice necessario per far funzionare applicazioni simili. Fino ad allora, goditi il ​​potere dell'Ajax.

risorse

Imparare a

• Articolo originale.
• Adaptive Path è una delle aziende leader nel campo del design dell'interfaccia utente. Puoi ottenere un sacco di informazioni sull'Ajax guardando attentamente le loro pagine. (developerWorks, ottobre 2005) illustra cinque modi per serializzare i dati nelle applicazioni Ajax. (O "Reilly Media, Inc., febbraio 2006) prende le intuizioni evidenziate in questo articolo e in tutta la serie e le offre (e altro ancora) a te in un formato Head-Up innovativo e all'avanguardia.
• JavaScript: la guida completa La 4a edizione (O "Reilly Media, Inc., novembre 2001) è un'eccellente risorsa per JavaScript e pagine web dinamiche.

Discutere

• Ajax.NET Professional è un ottimo blog per tutto ciò che riguarda Ajax.
• Entra a far parte della community developerWorks partecipando al.

La nostra vita è volubile. Tutto in questo mondo si evolve e cambia. Inclusa la realtà virtuale. E una delle parole a cui sono associati questi cambiamenti è AJAX. Non solo i programmatori web, ma anche gli utenti ordinari hanno già sentito parlare di AJAX. Cosa c'è davvero dietro questo acronimo magico? Come lo uso sul mio sito web? Cercherò di rispondere a queste domande in questo articolo.

Ho sentito parlare per la prima volta di AJAX questa primavera. Mi sono subito interessato a questa tecnologia e, come dovrebbe essere in questi casi, sono andato alla ricerca di articoli che potessero rispondere alle mie domande: "Cos'è questo? Come funziona? E quali sono i vantaggi? Cosa deve essere installato in aggiunta sul server/client per lavorare con AJAX? Come puoi usarlo sul tuo sito? ". Dopo aver letto una decina di articoli, ho avuto risposta solo alle prime due domande, ma non ho mai trovato la risposta al resto. E solo dopo aver letto diverse pubblicazioni in inglese, ho finalmente capito cosa fosse cosa. Questo mi ha spinto a scrivere questo materiale.

Innanzitutto, l'articolo è rivolto a persone preparate che scrivono programmi per Internet e hanno familiarità con termini come "oggetto", "metodo", "proprietà". Tuttavia, può essere parzialmente utile a coloro che sono semplicemente interessati a questo problema. L'elenco dei riferimenti contiene l'elenco dei riferimenti necessario, utilizzando il quale è del tutto possibile padroneggiare la tecnologia "da zero".

Nel corso della presentazione, il termine "browser" indicherà i browser: Internet Explorer 5.0+, Safari 1.3 e 2.0+, Netscape 7+, Opera 8.5+, Mozilla Firefox (plus indica questa versione e successive). Se parliamo di altre versioni, questo verrà menzionato separatamente: "Cos'è? Come funziona e quali sono i vantaggi?"

Per comprendere i vantaggi di AJAX, è necessario sapere come funzionano attualmente le applicazioni web. E funzionano utilizzando la tecnologia client-server (Fig. 1).

L'utente apre una pagina nel browser pagina... La pagina contiene collegamenti ipertestuali che portano ad altre pagine. Quando fai clic su uno di essi, il browser invia una richiesta URL al server a cui è associato questo collegamento. Se in natura non esiste un server associato a questo collegamento (ad esempio, quando si digita l'URL nella barra degli indirizzi, si è commesso un errore durante la scrittura del nome della risorsa), o si verificano problemi con la connessione a Internet, il browser genera una pagina simile a quella mostrata in figura (così appare in Opera):

Se il server esiste, ma il documento specificato nella richiesta non esiste su di esso, il server stesso creerà una pagina HTML con una descrizione dell'errore. Ad esempio, potrebbe trattarsi di un noto errore 404 (documento non trovato). Oppure, se tutto è corretto, il server restituirà una nuova pagina in risposta. In ogni caso, nel browser verrà caricata una nuova pagina. nuova pagina, anche se solo un paio di parole sono cambiate da quella vecchia. Uno svantaggio piuttosto significativo di questa tecnologia. Inoltre, il lavoro viene eseguito in modalità sincrona. Cioè, dopo che il browser ha inviato una richiesta al server, si aspetta una risposta da esso e fino a quando la risposta non viene ricevuta, non verrà fatto nulla. E a volte la risposta e il caricamento di una nuova pagina potrebbero richiedere troppo tempo. Così tanto tempo che l'utente non può aspettare che la pagina venga caricata e semplicemente chiuderla. Pertanto, i programmatori web ricorrono ad alcuni trucchi.

PROPRIETÀ:

sola lettura onreadystatechange funzione

Specifica una funzione di callback da chiamare ogni volta che cambia prontoStato proprietà. Nonostante il fatto che la funzione sia chiamata, i parametri non possono essere passati ad essa. Ma ne parleremo più avanti nell'esempio.

sola lettura prontoStato numero intero

Lo stato della richiesta. Può assumere valori:

• 0 - non non inizializzata metodo (non inizializzato) aprire () non è stato ancora chiamato;
• non ancora chiamato;
• 2 - caricato(caricato) metodo Inviare ()è stato chiamato e le intestazioni/stato della risposta (proprietà stato) ricevuto;
• 3 - interattivo(interattivo), vengono ricevuti dati disponibili tramite la proprietà testorisposta;
• 4 - completato(completato), in risposta alla richiesta, non solo vengono ricevuti tutti gli header e lo stato, ma vengono ricevuti tutti i dati dal server, la risposta è completa.

sola lettura testorisposta corda

Risposta del server in testo normale. Solo lettura.

sola lettura responseXML oggetto

La risposta del server come oggetto Documento DOM. Utilizzato se la risposta del server è un documento XML valido. Se il documento non è corretto, i dati non sono stati ricevuti o non sono stati ancora inviati, la proprietà è NULL. Solo lettura.

sola lettura stato corda

Stato della risposta. Ad esempio: 200 (OK), 404 (documento non trovato), 503 (sovraccarico temporaneo del server).

METODI:

vuoto interrompere ()

Interrompe una richiesta HTTP o una ricezione di dati. Cancella tutte le proprietà dell'oggetto che sono state inizializzate. Il metodo è utile in abbinamento ad un timer, quando, trascorso un certo tempo dal momento della richiesta (fuori tempo), non è stata ricevuta una risposta dal server.

corda getAllResponseHeaders ()

Restituisce tutte le intestazioni di risposta del server come stringa formattata. Ogni nuovo titolo inizia su una nuova riga.

corda getResponseHeader(corda intestazione)

Restituisce un'intestazione denominata intestazione.

vuoto aprire(corda metodo, corda uri, [ booleano asincrono])

Prepara una richiesta all'uri utilizzando il metodo metodo (POST o GET) specificando modalità asincrona, modalità asincrona o meno. A seguito della chiamata alla proprietà prontoStato diventa uguale a 1.

vuoto Inviare(corda dati)

Avvia una richiesta al server. I dati vengono passati nei dati della richiesta.

vuoto setHeader(corda intestazione, corda valore)

Assegna l'intestazione denominata header, value. Ricordati di chiamare aprire ()!

"Come puoi usarlo sul tuo sito?"

Ora che abbiamo non solo le conoscenze teoriche necessarie, ma anche un'idea su cosa si basa praticamente AJAX, possiamo procedere alla scrittura della nostra applicazione. Successivamente, fornisco un esempio dal momento in cui il compito viene formulato fino alla sua piena attuazione, sotto forma di un'applicazione, spiegando alcune delle sottigliezze lungo il percorso.

Quindi, abbiamo un compito: dobbiamo implementare un database (DB) di driver per vari dispositivi. Allo stesso tempo, il database è così grande che non ha senso inviarlo all'applicazione client ed effettuarne una selezione utilizzando JavaScript. A causa della modifica di un valore nella pagina, è anche indesiderabile sovraccaricarlo. Personalmente, utilizzo PHP per gli script lato server per svolgere questa attività e utilizzo un file XML per le implementazioni del database.

Scelgo la seguente struttura di database:

Elenco file DB data.xml: ATI 9600 128 DDR (128 bit) ATI 9600 256 DDR (128 bit) ATI 9600XT 256 DDR (128 bit) ATI X800GTO 256 DDR (256 bit) ATI X1300 512 DDR (128 bit) ATI X1300 256 DDR (128 bit) NVidia 6600 128 DDR (128 bit) ) ) NVidia 7800GS 256 DDR (256 bit) ATI X1300Pro 256 DDR (128 bit) ATI X1600Pro 256 DDR (128 bit) ATI X1800GTO 256 DDR (256 bit) ATI X1600Pro 256 DDR (128 bit) ATI X1900XT 512 DDR (256 bit) NVidia 6600 Silenziatore ( 128 bit) NVidia 6600GT 128 DDR (128 bit) ATI X1900XT 512 DDR (256 bit) ATI X1900XTX 512 DDR (256 bit) ATI X800 SilentPipe 128 DDR (256 bit) Nvidia 6600GT 128 DDR (128 bit) NVidia 6600GT Passive Heatsink 128 DDR (128 bit) X550 128 DDR (128 bit) PCI-E ATI X800GT Uniwise 256 DDR (256 bit) ATI X800GTO 256 DDR (128 bit) Audigy 2 6.1 Audigy 2 ZS 7.1 X-Fi Platinum Audiophile 192 Revolution 5.1 Audiophile Audiophile Fast Track PIXMA iP 90 PIXMA iP4200 PIXMA iP6600D Picture Mate 100 Stilo a colori C48 Stilo a colori C87U DeskJet 1280 Des kJet 5443 Photo Smart 385 Laser Shot LBP2900 Laser Shot LBP3300 ML 1615 ML 2015 LaserJet 1018 LaserJet 2420 LaserJet 2420DN 4200F LiDE500F LiDE60 Perfection 1270 Perfection 3590 Perfection 4990 Bear Paw 2400CU Perfection 4990

Come fa una persona a cercare in questo database? Molto probabilmente, camminerebbe dall'elemento radice lungo l'albero del documento finché non trova un collegamento nel ramo desiderato o si assicura che il driver per questo dispositivo non sia nel database. Faremo lo stesso, usando le espressioni XPath per trovare il nodo o l'insieme di nodi desiderati.

Elenco del modulo per l'invio dei dati index.htm:

scanner della stampante della scheda audio della scheda video

Nella forma sono presenti due variabili: sentiero e bandiera... Il primo memorizza il percorso richiesto, che viene inviato al server. Poiché c'è già un elemento nel modulo, questa variabile ha già un valore iniziale. La seconda variabile viene utilizzata per indicare allo script del server di estrarre un elemento specifico dal documento. Dispositivo... Inoltre, cambierà il formato dei dati restituiti dal server.

Ora diamo un'occhiata al motore JS. Tutte le funzioni lato client sono raccolte in uno script ajax.js: y = nuovo Oggetto (); function httpRequest () (if (window.XMLHttpRequest) (// crea un oggetto per tutti i browser tranne IE requestObj = new XMLHttpRequest ();) else if (window.ActiveXObject) (// per IE requestObj = new ActiveXObject ("Msxml2. XMLHTTP "); if (! requestObj) (requestObj = new ActiveXObject (" Microsoft.XMLHTTP ");););); function sendRequest (url, data) (httpRequest (); // definisce una funzione di call-back requestObj.onreadystatechange = responseServer; // prepara l'invio dei dati, readyState = 1 requestObj.open ("POST", url, true); / * T poiché i dati vengono inviati con il metodo POST, il server deve inviare un'intestazione che lo informa * / requestObj.setRequestHeader ("Content-Type", "application / x-www-form-urlencoded; charset = UTF-8 "); // invio dati al server requestObj.send (data);); funzione responseServer() (if (requestObj.readyState == 4) (var status = requestObj.status; if (status == 200) (addSelect (y);) else if (status == 400) (alert ("Richiesta non valida ");) else if (status == 500) (alert ("Errore interno sul server ");) else if (status == 503) (var time = requestObj.getResponseHeader (" Retry-After ") * 1000; alert ("Il server è sovraccarico. La richiesta verrà ripetuta tra:" + tempo + "secondi"); setTimeout (sendRequest (url, percorso), ora);) else (alert ("Risposta server errata");); );); funzione sendData (obj) (var Elpath = document.form.path; var url = "index.php"; if (document.form.flag.value == "0") (var path = Elpath.value + "/" + obj.value;) else (var path = Elpath.value + "/ Device [" "+ obj.value +" "]"; / * utilizzando il metodo GET, invia allo script del server le informazioni sulla necessità di un elemento Device specifico * / url = "index.php? flag = 1";); // assegna il valore della richiesta corrente alla variabile del modulo di percorso Elpath.value = percorso; // codifica la stringa trasmessa path path = "percorso =" + encodeURIComponent (percorso); y = obj; sendRequest (url, percorso);); function addSelect (obj) (// risposta del server in testo normale var docTEXT = requestObj.responseText; obj.setAttribute ("disabled", true); // crea un elemento div var div = document.createElement ("div"); / / aggiungi la risposta del server al div div.innerHTML = docTEXT; // aggiungi il div della risposta del server all'albero del documento document.form.appendChild (div);); funzione reset() (document.form.path.value = "(! LANG: // Devices"; document.form.flag.value="0"; var NodeListDiv = document.form.getElementsByTagName("div"); var length = NodeListDiv.length; if (length > 1) { while (NodeListDiv != undefined) { document.form.removeChild(NodeListDiv); }; }; document.form.Devices.removeAttribute("disabled"); };!}

Come ho detto prima, nella funzione proprietà onreadystatechange i parametri non possono essere passati. Più precisamente, non puoi passare parametri che sono oggetti. Pertanto, all'inizio, creiamo una variabile in cui memorizzeremo un riferimento all'oggetto che ha chiamato la funzione. Poiché questa variabile è nell'ambito globale delle variabili, sarà possibile accedervi da qualsiasi parte del programma. Al momento, questo è il modo più intelligente per passare i parametri di callback alla funzione di proprietà. onreadystatechange oggetto.

Ora diamo un'occhiata a come funziona il motore.

Quando si verifica un evento sfocato(elemento Selezionare focus perso) viene chiamata la funzione invia i dati (), che prepara i dati POST per l'invio della richiesta. Inoltre, forma un'espressione XPath a seconda del valore della variabile. bandiera = 0(Per esempio, // Dispositivi / Schede video) o bandiera = 1(Per esempio, // Dispositivi / Schede video / AGP / Sapphire / Dispositivo ["ATI 9600XT 256 DDR (128 bit)"]).

Successivamente, chiamiamo la funzione invia richiesta (), in cui passiamo l'URL dello script del server, nonché una variabile di tipo stringa che contiene i dati POST già pronti. E la prima cosa che facciamo è creare XMLHttpRequest l'oggetto, il riferimento a cui memorizziamo in una variabile requestObj... Funzione httpRichiesta ()è cross-browser e funzionerà in tutti i browser.

A volte chiamata di funzione httpRichiesta () L'ho fatto immediatamente durante il caricamento della pagina tramite e mai creato XMLHttpRequest un oggetto. Ma come si è scoperto, questo funziona per tutti i browser tranne IE, che richiede la creazione di un nuovo oggetto ogni volta. Pertanto, questa funzione viene chiamata ogni volta prima dell'invio dei dati.

Dopo aver inviato i dati, il browser attende una risposta dal server. Ogni volta che la proprietà cambia prontoStato la funzione sarà chiamata server di risposta ()... Se lo stato della risposta è arrivato con il codice "200" (va tutto bene), allora verrà chiamata la funzione aggiungiSeleziona (), che aggiungerà i dati risultanti al DOM del documento corrente. Tutti i browser attenderanno una risposta dal server. Tuttavia, dopo un certo lasso di tempo (time-out), sarà costretto ad assegnare XMLHttpRequest.readyState = 4 e smetti di aspettare una risposta dal server. Ad esempio, Opera ha un valore di timeout di 10 secondi. Utilizzando altri stati, puoi aggiungere un gestore di errori al motore nelle risposte del server.

Funzione aggiungiSeleziona () aggiunge un altro nodo al DOM del documento corrente DIV, in cui inserisce la risposta dal server. Ci si potrebbe chiedere perché la proprietà viene utilizzata testorisposta, ma no responseXML? Qualcuno vorrà sicuramente usare questa proprietà per importare la risposta del server (e lo script del server invia un documento XML in risposta) direttamente nel DOM del documento. C'era un tale desiderio per me. Volevo importare l'elemento radice del file XML inviato e tutti i suoi discendenti usando il metodo importNode... Ma il browser ha importato l'elemento senza figli, anche se il secondo parametro di questo metodo era impostato su vero: importNode (Oggetto importNode, true)... Pertanto, un'implementazione imprecisa di questo metodo ne esclude ancora l'uso.

Una soluzione equivalente è stata trovata usando innerHTML metodo degli elementi

Questo conclude il lavoro del lato client. Funzione non considerata rimanente Ripristina ()è progettato per riportare il DOM del documento alla sua forma originale. Puoi ottenere lo stesso aggiornando la pagina usando F5, ma il motore AJAX è scritto per evitare il ricaricamento della pagina. Pertanto, tutti gli elementi aggiunti al documento dallo script devono essere rimossi da esso anche dallo script.

In risposta alla richiesta, lo script del server genera dati XML del modulo: ChildrenElementName_1 .... childrenElementName_1

Se il nodo richiesto ha un nome Dispositivo, quindi viene restituito il testo formattato normale. Lo script del server è scritto in PHP V5 e non funzionerà su versioni precedenti di questo interprete, poiché l'estensione DOM è stata introdotta in questo linguaggio solo dalla quinta versione, e ha sostituito l'estensione DOM XML, la cui interfaccia non corrispondeva alla specifica. Ora diamo un'occhiata al codice dello script del server.

Elenco file index.php : caricamento ("data.xml"); // crea un oggetto XPath $ DOMXPath = new DOMXPath ($ doc); $ DOMNodeList = $ DOMXPath -> query ($ _ POST); // recupera l'elemento richiesto in base alla richiesta $ DOMNode = $ DOMNodeList -> item (0); // crea un oggetto documento XML $ replyXML = new DOMDocument ("1.0", "windows-1251"); / * se flag non è uguale a uno, allora l'elemento corrente non è un elemento Device e devi trovare tutti gli elementi discendenti dell'elemento DOMNode corrente * / if ($ _GET! = 1) (// ottieni un elenco di tutti discendenti dell'elemento $ childNodes = $ DOMNode -> childNodes; / * Poiché i bambini possono essere non solo elementi, ma anche nodi, creiamo un array di indici che contiene solo elementi figlio * / foreach ($ childNodes as $ Node) (if ( $ Node-> nodeType == 1) ($ arrayNodes = $ Node;);); // crea l'elemento radice del documento XML $ root = $ replyXML-> createElement ("select"); $ optgroup = $ replyXML- > createElement ("optgroup"); / * se gli elementi sono discendenti non sono Device, allora impostiamo gli attributi per l'elemento root e il suo elemento discendente optgroup * / if ($ arrayNodes -> nodeName! = "Device") ($ root-> setAttribute ("name", $ DOMNode-> nodeName); $ AttributeNode = $ arrayNodes-> getAttributeNode ("title"); $ optgroup-> setAttribute ("label", $ AttributeNode-> value); $ root- > setAttribute ("onblur", "sendData (this) "); ) else (/ * altrimenti, crea un attributo con codice JS che assegnerà il valore "1" alla variabile nella forma flag * / $ root-> setAttribute ("onblur", "document.form.flag.value = 1 ; sendData (questo); ");); / * un ciclo che crea nuovi elementi opzione per ogni elemento figlio; quanti discendenti, tanti elementi * / foreach ($ arrayNodes as $ Node) ($ option = $ replyXML-> createElement ("option"); $ setNode = $ Node-> nodeName; if ($ Node-> nodeName == " Device ") ($ setNode = $ Node-> nodeValue;); $ option-> nodeValue = $ setNode; $ option-> setAttribute (" value ", $ setNode); $ optgroup-> appendChild ($ option);) ; // inserisce gli elementi risultanti nel documento XML $ replyXML-> appendChild ($ root); $ root-> appendChild ($ optgroup); / * se flag = 1, l'elemento corrente è un elemento Device; gli elementi figlio non sono necessari, ma sono necessari gli attributi dell'elemento corrente * /) else (// crea l'elemento radice $ root = $ replyXML-> createElement ("pre"); $ DOMText = new DOMText ("OS URL" ); $ root -> appendChild ($ DOMText); $ NamedNodeMapAttr = $ DOMNode-> attributi; $ i = 0; / * un ciclo che trova tutti gli attributi dell'elemento Device e per ogni attributo crea una linea dati con un collegamento contenuto * / while (($ NodeAttr = $ NamedNodeMapAttr -> elemento ($ i))! = null) (if ($ NodeAttr-> name! = "id") ($ DOMText = new DOMText ("$ NodeAttr-> name"); $ DOMElement = $ replyXML-> createElement ("a"); $ DOMElement - > setAttribute ("href", $ NodeAttr-> value); $ DOMElement -> nodeValue = $ NodeAttr-> value; $ root -> appendChild ($ DOMText); $ root -> appendChild ($ DOMElement);); $ i ++ ; $ NodeAttr = $ NamedNodeMapAttr-> elemento ($ i);); $ replyXML-> appendChild ($ root); ); // invia una risposta al client echo $ replyXML-> saveHTML (); ?>