JQuery Ajax: utilizzo e funzioni

Il termine Ajax viene decodificato come Javascript asincrono e XML (Javascript asincrono e XML) e si riferisce alla tecnologia di creazione di query senza ricaricare la pagina: se si inviano alcuni dati al server, questo risponde e la pagina non viene aggiornata. L'esempio più semplice di una richiesta Ajax è una ricerca. Se apri un motore di ricerca e inizi a digitare una query, i suggerimenti appariranno immediatamente sotto la riga, ma la pagina non verrà aggiornata. Per la registrazione delle chiamate abbreviata dei metodi Jquery, viene utilizzato il simbolo del dollaro.

Benefici dell'Ajax

Ajax ti consente di risparmiare traffico e il suo utilizzo è più conveniente per l'utente, perché non devi aspettare a lungo per ricaricare una pagina intera. Ma lo sviluppatore che utilizza questo metodo è obbligato a monitorare costantemente le azioni degli utenti e spingerli a capire cosa sta succedendo sulla pagina. È importante capire che le vecchie versioni dei browser, incluso il testo, non supportano la tecnologia Ajax. A volte gli utenti disabilitano il proprio uso di JS, perché gli script potrebbero smettere di funzionare. Pertanto, è importante pensare alle alternative e non fare affidamento solo su questo metodo.

Applicazione Ajax e jQuery

L'esistenza di applicazioni interattive non sarebbe stata possibile senza la tecnologia Ajax. È utilizzato nel lavoro di Angular (AngularJS) - un framework per JS. L'uso della tecnologia Ajax su tutta la pagina è facoltativo. Può essere utilizzato solo per alcuni elementi della pagina in fase di aggiornamento. Ad esempio, per la correzione automatica, la convalida del modulo e la ricerca.

La libreria jQuery è una raccolta di soluzioni pronte scritte in JS. Puoi trovarlo tramite la query "Ajax libs Jquery". Esiste una variante della sua connessione attraverso un servizio speciale di Google. Si chiama Ajax Googleapis. Jquery in questo caso si collega direttamente. Ovviamente, velocizza il caricamento della pagina. Molto spesso, gli utenti trovano una versione mini di Jquery Ajax su Googleapis.com. Ha funzionalità ridotte, ma è più conveniente per i principianti. La versione mini di Ajax Jquery su Googleapis.com si chiama - min.js.

Formati di trasferimento dei dati

XML nelle abbreviazioni di decifrazione Ajax è un formato di scambio di dati. Inizialmente, quando la tecnologia fu creata per la prima volta, lo scambio avvenne solo con il suo aiuto. XML è molto simile all'HTML, ma in esso tutti i tag devono essere chiusi. Successivamente, un nuovo formato apparve nella lingua JS - JSON. Era così semplice e conveniente che si diffondeva ad altre lingue e biblioteche. JSON è più adatto per il trasferimento di una piccola quantità di dati, fino a 20.000 linee. È più facile lavorare con lui, è più flessibile e comprensibile per il programmatore. Con più informazioni, usa XML. Ad esempio, l'invio di richieste alla ricerca Yandex viene implementato utilizzando questo formato.

Creazione del documento JSON più semplice

In JS, tutte le proprietà descrivono un singolo oggetto finestra globale, ovvero una finestra del browser. Tutte le librerie descrivono le funzioni (metodi) e le proprietà di questo oggetto. JSON è una classe separata che eredita da un oggetto e ha due metodi propri: parse e stringify. Discuteremo entrambi i metodi in maggior dettaglio di seguito.

Puoi lavorare con Ajax da JS senza usare jQuery. Una stringa JSON può essere convertita in un oggetto JS e viceversa. Considera come farlo con degli esempi. Per prima cosa, crea un documento e chiamalo, ad esempio "uomo" con un'estensione JSON. Quindi eseguiamo i seguenti passi in sequenza:

1. Aprire il file in un editor di codice, ad esempio PhpStorm o Sublime.
2. Il formato JSON ha una propria sintassi. Per prima cosa viene creato un oggetto: ha bisogno di parentesi graffe.
3. La chiave e il suo valore devono essere presenti tra parentesi. Le chiavi devono essere tra virgolette. Nel JS standard, quando si crea un oggetto, la chiave viene scritta senza virgolette. Ad esempio, per un oggetto "man" in formato JSON, è necessario creare le chiavi "nome" (nome) e "età" (età). Di conseguenza, otteniamo il seguente codice: {"nome": "Pavel", "età": 28}.

Se hai bisogno di più oggetti, questi vengono posizionati in un array, che si distingue per le parentesi quadre. È importante tenere presente che il formato JSON non supporta i commenti. In qualsiasi forma, questo sarà un errore. Ma non c'è bisogno speciale per loro.

I valori chiave stessi possono essere dei seguenti tipi:

• stringa;
• il numero;
• matrice;
• un oggetto.

La matrice è scritta tra parentesi quadre, gli oggetti in essa contenuti sono racchiusi tra virgolette ed elencati con una virgola. Puoi anche aggiungere un oggetto collegato, come un indirizzo. Dovrà essere racchiuso tra parentesi graffe. Questa è la velocità con cui viene creato il documento JSON più semplice. Per la comodità di usarlo e innamorarsi degli sviluppatori.

Conversione di stringhe su oggetto

Spesso una stringa in JS deve essere convertita in un oggetto JSON. Va notato che nel codice quando si sposta la linea alla fine dovrebbe essere una barra, altrimenti JS non capirà che è finita. Il codice in JS sarà simile a questo:

È necessario assicurarsi che le chiavi siano tra virgolette, altrimenti si verificherà un errore. Abbiamo la stringa più semplice. Può provenire da qualsiasi server. Per assicurarti che si tratti di una stringa, puoi inviarla alla console aggiungendo il comando "console.log (json)" al codice. Ora converti la stringa in un oggetto. Per fare questo, dichiariamo prima una variabile e chiamiamo l'analisi speciale della classe per esso: var jsonObj = JSON.parse (). Quindi passiamo il parametro. Per lavorare con il formato JSON in JS esiste una classe speciale con lo stesso nome. Pertanto, puoi convertire una stringa in un oggetto. Se per qualche motivo la conversione non è possibile, verrà visualizzato un avviso. Per confermare che tutto è eseguito correttamente, entrambe le variabili possono essere visualizzate nella console. Nel primo caso, quando si visualizza la stringa nella console, gli spazi verranno visualizzati dopo i valori, poiché JS conterà il loro numero prima del carattere barra. Questo non è un errore, ma per la bellezza del codice, è consigliabile rimuovere gli spazi aggiuntivi.

Convertire un oggetto in una stringa

Puoi fare il contrario e convertire l'oggetto in una stringa. Per fare questo, dichiariamo la variabile e usiamo di nuovo la classe JSON, aggiungendola attraverso il punto, ma scegliere un altro metodo - stringify: var ObjtoStr = JSON.stringify (). Quindi trasferiamo il parametro necessario. Questo comando esegue la trasformazione inversa. Questo parametro può trasferire tutto ciò di cui abbiamo bisogno, ad esempio solo il nome. Per fare ciò, la chiave desiderata deve essere racchiusa tra parentesi quadre. Quindi puoi lavorare con JSON di JS.

Invia richiesta al server

Ora andiamo su Ajax e inviamo questa richiesta al server. Per prima cosa devi creare un oggetto XMLHttpRequest. Questa classe è responsabile dell'invio della richiesta e ti consente di crearla senza ricaricare la pagina. Verrà utilizzato JSON, ma il nome della classe non è stato modificato: XML. Il codice per inviare una richiesta è: var xhr = XMLHttpRequest (). Non invieremo ancora le opzioni. Ora configura questa query. Per fare ciò, scrivi: xhr.open (). Il metodo aperto configurerà l'indirizzo. Per fare ciò, aggiungi la parola 'GET' tra parentesi. Inoltre, separati da una virgola tra virgolette singole, scriviamo l'indirizzo dell'host su cui inviare la richiesta. Alla fine della riga, aggiungi il nome dell'oggetto, cioè il file scaricabile - nel nostro caso è "man.json".

Richiesta sincrona e asincrona

Il terzo parametro necessario per inviare una richiesta è determinare se sarà sincrono o meno. Si chiama async e ha due valori: false - la richiesta viene eseguita in modo sincrono e true - in questo caso sarà asincrona. Se la richiesta è sincrona, lo script attende una risposta. Se la risposta richiede un secondo, la prossima riga di codice non verrà elaborata. Una richiesta sincrona verrà eseguita in un thread separato e lo script continuerà l'esecuzione dei comandi. Nel nostro caso, avremo bisogno del primo valore, perché altrimenti il ​​controllo della risposta dovrà essere fatto attraverso l'evento e assegnare una funzione che verrà eseguita non appena la richiesta arriva.

Successivamente, aggiungi un'altra riga di codice: xhr.send (). Ora, in risposta alla richiesta, il codice dovrebbe venire. Questo potrebbe essere il codice "200", che significa che il server è disponibile, "404" - il documento non è stato trovato, "300" - reindirizzamento e "500" - un errore dal server. Per scoprire se c'è un errore, è necessario confrontare il codice con "200". Per fare ciò, aggiungi la seguente riga al codice: if (xhr.status! = 200) e invia il valore alla console. Se tutto va bene, il ramo else inizierà a funzionare, a cui aggiungiamo l'output alla console con il valore "OK". Pertanto, abbiamo inviato una richiesta al server utilizzando JS e abbiamo appreso come Ajax funziona da JS. Abbiamo creato XMLHttpRequest, specificato il metodo, il percorso, la sincronicità o l'asincronia e ottenuto il risultato.

Jquery ajax

I programmatori esperti non usano JS puro per lavoro, ma usano qualsiasi libreria - il più delle volte jQuery. Le richieste AjS di JS in jQuery sono molto più facili da creare, motivo per cui è diventato così popolare. Proviamo a migliorare lo script usando questa libreria. Per prima cosa devi scaricare jQuery. È disponibile in diverse versioni. Puoi collegare la biblioteca tramite il servizio Google Code. C'è un'opzione per gli sviluppatori, dove c'è la possibilità di commenti e interruzioni di riga. Un'altra versione è minima. Si trova all'indirizzo: ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. Ha senso collegare questa libreria su un server funzionante. Puoi aggiungere una biblioteca utilizzando il seguente codice tramite il servizio Google Code:

Questo codice utilizza la versione 3.1.0 come esempio. Per funzionare correttamente, è necessario aggiungere la versione corrente. È importante che l'indirizzo inizi con "//ajax.googleapis.com/ajax/libs/jquery", quindi creiamo un nuovo file in formato html e colleghiamo la libreria specificando l'indirizzo della sua posizione nel tag script e posizionandolo nella testa. Quindi iniziamo a scrivere script. Iniziamo qui con questa riga: $ (document) .ready (). Quando il documento è pronto, la funzione nidificata sarà chiamata: (function () {}). Ciò è necessario per caricare il modello DOM con cui lavoriamo , ovvero tutto ciò che si trova nel tag body, se questo non viene eseguito, lo script verrà elaborato prima del caricamento del modello DOM.

Creazione di moduli

Come esempio di jQuery Ajax, crea un modulo. Per fare ciò, creare un div con la classe form e aggiungere input con il tipo "text" e l'attributo name con il valore "name". Quindi aggiungiamo un altro input, con il tipo "text" e il nome "address". Ad ogni input è assegnato un identificatore. Come identificatore, puoi usare i valori degli attributi del nome. Aggiungi un suggerimento per entrambi gli input con un'offerta per l'utente per inserire un nome e un indirizzo. Facoltativamente, puoi aggiungere un'altra linea per l'età. Ora resta da fare un pulsante per inviare il modulo. All'interno del tag button scriviamo la parola "send" e aggiungiamo l'identificatore btn. Aggiungiamo delimitatori - tag br - su ogni riga e controlliamo ciò che abbiamo.

Puoi aggiungere rientri esterni scrivendoli al tag dello stile, ma questo è facoltativo. Mentre il modulo non funziona. Per il suo funzionamento, è necessario associare l'evento al pulsante, poiché i dati verranno inviati quando viene premuto. Per fare ciò, selezionare il pulsante sul selettore e inserire l'evento "click": $ ('# btn'). On ('click'). Ora quando si fa clic su questa funzione verrà eseguita. Usiamo il metodo on, che firma una funzione specifica su un evento di un clic su qualche elemento. Cioè, quando si fa clic sul pulsante, funzionerà. Controlliamo che tutto funzioni con l'aiuto dell'output alla console. I metodi di invio di una richiesta in jQuery Ajax non sono così tanti. Puoi usare get, post o solo Ajax. Dato che questi dati possono cambiare qualcosa, useremo il metodo post Jquery Ajax.

Ottenere i valori dei campi del modulo

Nel passaggio successivo, dobbiamo ottenere i valori di tutti i campi del modulo. In jQuery Ajax ci sono due opzioni su come farlo. Puoi usare la funzione o farne a meno. Per la prima opzione, scriviamo il seguente codice: var name = $ ('# nome'). Quindi aggiungiamo linee simili per l'indirizzo e l'età. Abbiamo ricevuto riferimenti agli elementi, non ai valori stessi. Ora usiamo il metodo post Jquery Ajax. Per fare ciò, scriviamo: $ .post (). Ora devi configurare il metodo. Prende l'indirizzo URL dove verrà inviato il modulo. Per questo useremo il validatore. Per fare ciò, tra parentesi scriviamo "/validator.php".

Aggiungi un altro parametro - i dati stessi: var data = 'name =' + name.val () + '& address =' ​​+ address.val () + '& age =' + age.val (). Ora abbiamo i dati ottenuti con il metodo Jquery Ajax. Resta solo da aggiungere la funzione di callback, che verrà chiamata quando una risposta proviene dal server. Ha bisogno di registrare i seguenti parametri: dati del server, descrizione dello stato e se la richiesta è stata eseguita. Visualizziamo il parametro data nella console per verificare che tutto funzioni. È anche importante considerare che una richiesta Ajax viene sempre eseguita in Unicode, poiché la codifica del documento deve essere utf-8. Se il sito e il server sono in una codifica diversa e Ajax viene eseguito in Unicode, il server restituirà i geroglifici e la stringa dovrà essere ricodificata. Per evitare questo, è consigliabile fare tutto in utf-8.

Lavora con PHP

Ora usa jQuery Ajax con PHP. Crea un nuovo file e chiamalo validator.php. Mostriamo i nostri dati Per fare ciò, scriviamo: $ array = $ post. Ora mostra tutti i dati in formato JSON: echo JSON_encode ($ array). Controlliamo come funziona il modulo compilando i campi e inviando una richiesta al server. Se tutto è fatto correttamente, otterremo un oggetto con i parametri specificati. Abbiamo ricevuto i dati, ora devono essere elaborati e registrati. Scriviamo: if (isset ($ post ['nome']) && (isset ($ post ['age']) && (isset ($ post ['indirizzo']). Isset significa che tale variabile esiste. Successivamente, aggiungi una condizione : else {$ array ['status'] = 'errore'} Verifichiamo se tutto funziona.Se ci sono errori nel codice, li cerchiamo e risolviamo.Grazie alla trasmissione asincrona della richiesta, l'utente può inserire ulteriori informazioni nel momento in cui la trasmissione è attiva server. Puoi utilizzare non solo il linguaggio di programmazione PHP, ma anche altre lingue server.