Share
Avendo seguito i precedenti tre tutorial, avresti dovuto acquisire una buona conoscenza di AJAX. In questo tutorial finale, completeremo le cose lavorando con un esempio più complesso.
Per avere un'idea della struttura di questo esempio, considera il seguente markup:
Il markup per il principale l'elemento è mostrato di seguito:
Strutture di front-end popolari
Fare clic su ognuno per caricare i dettagli tramite AJAX.
Bootstrap Foundation UIkit Semantic UI Skeleton Material Design Lite
Notare i collegamenti testuali. Questi corrispondono a diversi framework front-end. Come vedremo nella prossima sezione, ogni volta che clicchiamo sui link, verrà eseguita una richiesta AJAX. Quindi, l'elemento con la classe di modale apparirà e il suo contenuto verrà aggiornato con i dati recuperati dalla risposta.
Ecco come principale l'aspetto è simile a:
Il prossimo passo è esaminare la struttura del nostro modal. Ecco il codice HTML:
- Struttura
- Versione corrente
- Numero di stelle Github
- Pagina ufficiale
Come puoi vedere, il modale contiene alcuni elementi vuoti. Li inseriamo nell'HTML perché il loro testo cambierà a seconda del link su cui clicchiamo e della risposta che recupereremo.
L'immagine sotto mostra come appare inizialmente il modale:
Per impostazione predefinita, la modale è nascosta. Inoltre, nascondiamo anche il caricatore. Questo apparirà solo quando viene attivata la richiesta AJAX.
Dai un'occhiata alle corrispondenti regole CSS:
.modal opacity: 0; .loader display: none;
Nota che usiamo il opacità proprietà (e non il display proprietà) per nascondere il modale perché questa proprietà appartiene alle proprietà CSS animabili. In questo modo, saremo in grado di passare gli stati del modale (vale a dire gli stati aperto e chiuso).
Per gli scopi di questo esempio, sceglieremo di costruire noi stessi la risposta JSON. Specificamente, la risposta attesa (cioè il Demo.json file) sarà una matrice di oggetti. Ogni oggetto conterrà dettagli riguardanti i relativi framework front-end.
Inoltre, il valore del nome proprietà corrisponderà ai collegamenti testuali del principale elemento (vedi la sezione precedente). Con questo in mente, la struttura della risposta assomiglia a questo:
["url": "http://getbootstrap.com/", "numberOfStars": "88.260+", "currentVersion": "3.3.5", "nome": "Bootstrap", "url": "http://foundation.zurb.com/", "numberOfStars": "21.180+", "currentVersion": "5.5.3", "name": "Foundation", // 4 altri oggetti qui]
Nota: i valori che abbiamo usato per il numberOfStars e Versione corrente le proprietà sono false e puramente ai fini della dimostrazione.
Simile agli esempi precedenti di questa serie, useremo AJAX per richiedere un file statico. Tuttavia, se vogliamo incorporare contenuti provenienti da altri siti (ad esempio Google Maps, Flickr), dovremmo leggere la loro documentazione API e, se necessario, richiedere una chiave API.
Inoltre, i nostri dati di destinazione risiedono sullo stesso server della pagina demo. Pertanto, eviteremo limitazioni che potrebbero verificarsi quando si interagisce con servizi di terze parti (vedere la sezione "Limitazioni delle richieste AJAX" del primo tutorial).
In questa sezione, useremo jQuery ajax funzione per inizializzare una richiesta AJAX. Prima di procedere, definiamo innanzitutto le nostre variabili memorizzando nella cache i selettori jQuery più comunemente utilizzati:
Accentsconagua
var $ list = $ ('. m-info'), var $ message = $ ('. m-message'); var $ modal = $ ('. modal'); var $ loader = $ ('. loader'); var $ framework; Ora è il momento di esaminare il codice responsabile dell'esecuzione della richiesta:
$ ('. boxes a'). on ('click', function (e) e.preventDefault (); $ framework = $ (this) .text (); $ .ajax (url: 'Demo.json' , dataType: 'json', beforeSend: function () $ loader.show ();). done (successFunction) .fail (errorFunction) .always (alwaysFunction);); Noterai la sintassi per il ajax la funzione ha il seguente aspetto:
$ .Ajax ([Impostazioni])
Il impostazioni parametro è un oggetto di configurazione che contiene informazioni sulla nostra richiesta. Il numero delle proprietà che questo oggetto può avere è molto lungo (circa 34 proprietà). Per semplicità, discuteremo solo di quelli usati in questa demo. Più specificamente:
| Proprietà | Descrizione |
|---|---|
| url | Una stringa contenente l'URL a cui viene inviata la richiesta. |
| tipo di dati | Il formato dei dati di risposta (ad es. jSON, xml, html). |
| beforeSend | Una funzione di callback che viene eseguita prima di inviare la richiesta. Qui, questa funzione attiva il codice che mostra il loader. |
Prima di andare avanti, vale la pena menzionare tre cose:
ajax funzione: $ .ajax (url [, impostazioni]) impostazioni parametro sono opzionali.OTTENERE.Il ajax la funzione restituisce l'oggetto jQuery XMLHttpRequest o jqXHR. Questo oggetto implementa l'interfaccia Promise e quindi contiene tutte le proprietà, i metodi e il comportamento di una Promessa.
In questo esempio, utilizziamo i seguenti metodi Promise:
fattofalliresempreIl fatto il metodo viene attivato se la richiesta ha esito positivo. Riceve uno o più argomenti, ognuno dei quali può essere una singola funzione o una serie di funzioni. Ad esempio, nella nostra demo, il successFunction () viene passato come argomento.
La funzione di callback (ad es. successFunction ()) accetta tre argomenti. Innanzitutto, i dati restituiti. Secondo, una stringa che classifica lo stato della richiesta (vedi l'articolo precedente per i suoi possibili valori). Infine, l'oggetto jqXHR.
Il fallire il metodo viene chiamato se la richiesta non riesce. Riceve uno o più argomenti, ognuno dei quali può essere una singola funzione o una serie di funzioni. Ad esempio, nella nostra demo, il funzione degli errori () viene passato come argomento.
La funzione di callback (ad es. funzione degli errori ()) accetta tre argomenti: l'oggetto jqXHR, una stringa che classifica lo stato della richiesta e un'altra stringa che specifica l'errore risultante. Questo errore riceve la parte testuale dello stato HTTP, ad esempio Non trovato o Proibito.
Il sempre il metodo viene eseguito al termine della richiesta, indipendentemente dal successo (ad es fatto metodo è eseguito) o fallimento (cioè il fallire metodo è eseguito) di esso. Di nuovo, riceve come argomento una singola funzione o una serie di funzioni. Ad esempio, nella nostra demo, il alwaysFunction () viene passato come argomento.
Lo stato della richiesta specifica gli argomenti della funzione. In caso di richiesta riuscita, il callback (ad es. alwaysFunction ()) riceve gli stessi argomenti della richiamata del fatto metodo. Al contrario, se la richiesta non riesce, accetta gli stessi argomenti della richiamata del fallire metodo.
Nota: Invece del fatto, fallire, e sempre Prometti i metodi che sono usati in questo esempio, potremmo anche aver usato il successo, errore, e completare funzioni di callback. Queste funzioni sono definite nel impostazioni parametro.
Se la richiesta ha esito positivo, siamo in grado di recuperare i dati di risposta. Quindi, lo manipoliamo in modo da popolare gli elementi vuoti del modale.
Considera il codice per il successFunction richiama:
function successFunction (data) if (data.length> 0) for (var i = 0; i < data.length; i++) if ($framework === data[i].name) $list.show(); $message.hide(); $list.find('li:nth-of-type(2)').text($framework); $list.find('li:nth-of-type(4)').text(data[i].currentVersion); $list.find('li:nth-of-type(6)').text(data[i].numberOfStars); $list.find('li:nth-of-type(8)').html('' + data[i].url + ''); break; else $list.hide(); $message.show().text('No data received for this framework!'); else $list.hide(); $message.text('No data received from your respose!'); Sebbene abbiamo aggiornato il contenuto del nostro modal, questo è ancora nascosto. Diventa visibile e il caricatore scompare al termine della richiesta. Solo allora, il alwaysFunction la richiamata è eseguita:
function alwaysFunction () $ loader.hide (); $ Modal.addClass ( 'attivo');
Il attivo la classe si presenta così:
.attivo opacità: 1; z-index: 10; transform: scale (1);
Sotto puoi vedere l'aspetto atteso del modale se clicchiamo su bootstrap link di testo:
È importante comprendere il codice che viene eseguito in determinate circostanze. Esaminiamo due scenari comuni:
nome proprietà non corrisponde ai collegamenti testuali del principale elemento. Ad esempio, supponiamo di definire un URL in cui il valore di nome proprietà dell'oggetto correlato al framework Foundation Foundation2 invece di Fondazione. In tal caso, se clicchiamo su Fondazione link di testo, apparirà la seguente modal:
Quindi, abbiamo coperto il codice che viene generato quando la richiesta ha esito positivo. Ma cosa succede se la richiesta fallisce? Nel caso di una richiesta non riuscita, nascondiamo la lista e mostriamo un messaggio personalizzato.
Ecco il codice del failFunction () che dimostra questo comportamento:
function failFunction (request, textStatus, errorThrown) $ list.hide (); $ message.text ('Si è verificato un errore durante la richiesta:' + request.status + "+ textStatus +" + errorThrown); Per familiarizzare con questo codice, specifichiamo un URL che non esiste. Quindi il fallire il metodo verrà attivato e verrà mostrato il seguente modale:
Nota: Anche in questo caso, il messaggio di errore potrebbe essere diverso se si esegue questo esempio localmente.
Ecco la demo di Codepen integrata:
In questo tutorial abbiamo concluso l'esame di AJAX dal punto di vista di un web designer, ben fatto per seguirlo! Spero che abbiate trovato utile questa serie e che abbiate appreso alcune nuove competenze.
Come passo successivo, ti incoraggio ad esaminare le seguenti cose:
$ GetJSON metodo).