Mentre siamo vicini alla fine della nostra serie di mini-tutorial di jQuery, è giunto il momento di dare un'occhiata più approfondita a una delle funzionalità più utilizzate di jQuery. AJAX consente a un sito Web di comunicare con un server in background senza richiedere la ricarica dell'intera pagina. Dagli stati di stato infinito in stile Facebook all'invio dei dati dei moduli, ci sono un milione di situazioni di vita reale in cui questa tecnica può essere utile.
Se non hai letto i tutorial precedenti, ti suggerisco di farlo prima di affrontarli mentre si accumulano l'uno sull'altro.
- Introduzione: cos'è jQuery e perché dovrebbe interessarti? Making The Web Interactive: un'introduzione a jQuery Making The Web Interactive: un'introduzione a jQuery jQuery è una libreria di scripting lato client che utilizza quasi tutti i siti Web moderni, rendendo i siti Web interattivi. Non è l'unica libreria Javascript, ma è la più sviluppata, più supportata e più utilizzata .... Ulteriori informazioni
- 1: Selettori e nozioni di base jQuery Tutorial - Per iniziare: Nozioni di base e selettori jQuery Tutorial - Per iniziare: Nozioni di base e selettori La settimana scorsa, ho parlato di quanto sia importante jQuery per qualsiasi sviluppatore web moderno e perché è fantastico. Questa settimana, penso che sia ora che ci sporchiamo le mani con un po 'di codice e abbiamo imparato come ... Per saperne di più
- 2: Metodi Introduzione a jQuery (Parte 2): Metodi e funzioni Introduzione a jQuery (Parte 2): Metodi e funzioni Questo fa parte dell'introduzione dei principianti in corso alla serie di programmazione web jQuery. La prima parte riguardava le nozioni di base di jQuery su come includerla nel tuo progetto e selettori. Nella parte 2, continueremo con ... Per saperne di più
- 3: In attesa del caricamento della pagina e delle funzioni anonime Introduzione a jQuery (parte 3): in attesa della pagina da caricare e funzioni anonime Introduzione a jQuery (parte 3): attesa della pagina per caricare e funzioni anonime jQuery è probabilmente un'abilità essenziale per lo sviluppatore web moderno, e in questa breve miniserie spero di darti le conoscenze per iniziare a farne uso nei tuoi progetti web. In ... Per saperne di più
- 4: Eventi jQuery Tutorial (Parte 4) - Gli ascoltatori di eventi jQuery Tutorial (Parte 4) - Gli ascoltatori di eventi Oggi andremo a dare una svolta e mostreremo davvero dove jQuery brilla - gli eventi. Se hai seguito le esercitazioni precedenti, ora dovresti avere una buona conoscenza del codice di base ... Per saperne di più
- Debugging con gli strumenti per sviluppatori di Chrome Scopri i problemi del sito Web con gli strumenti per sviluppatori di Chrome o Firebug Scopri i problemi del sito web con gli strumenti per sviluppatori di Chrome o Firebug Se hai seguito i miei tutorial su jQuery finora, potresti avere già riscontrato alcuni problemi di codice e non sapere come per risolverli. Di fronte a un bit di codice non funzionale, è molto ... Per saperne di più
A-Cosa?
AJAX è un acronimo per Asynchronous Javascript e XML, ma la parola chiave qui è asincrona . Asincrono si riferisce al fatto che queste richieste si verificano in background, non interrompendo l'esperienza di navigazione dell'utente. Probabilmente non l'hai mai notato prima, ma se un sito web si aggiorna dinamicamente, ci sono buone probabilità che usi AJAX per farlo.
Prima di AJAX, qualsiasi forma di interazione con un server, che si tratti di recuperare nuovi dati o postare informazioni da parte dell'utente, avrebbe dovuto essere eseguita utilizzando un nuovo caricamento e reindirizzamenti della pagina.
Oggi esamineremo un servizio di terze parti, Flickr, dal quale possiamo utilizzare AJAX per recuperare alcune immagini utilizzando un tipo di dati JSON. Non importa in realtà come Flickr implementa il lato ricevente delle cose, perché questa è la bellezza delle API : tutto ciò che dobbiamo sapere è un URL API, che tipo di dati torneremo e come manipolarlo.
Per ulteriori letture, ho scritto un altro tutorial qualche tempo fa su come gestire AJAX in WordPress per una sottomissione di un modulo di contatto A Tutorial sull'uso di AJAX in WordPress Un tutorial sull'utilizzo di AJAX in WordPress AJAX è una tecnologia web straordinaria che ci ha spostato oltre il semplice "click link, vai su un'altra pagina "struttura di Internet 1.0. Consente ai siti Web di recuperare e visualizzare i contenuti in modo dinamico senza l'utente ... Leggi altro, quindi potresti voler controllare anche tu; implica la scrittura del proprio gestore PHP e l'integrazione nel processo WordPress AJAX "ufficiale".
Il metodo AJAX
Ecco il formato di base di una richiesta AJAX:
$.ajax({ type: "GET or POST", url: "API or your PHP handler URL ", datatype:"JSON", // depending on what kind of data you want back, but JSON is the most common data: { //a set of key:"value" pairs }, success:function(data){ //handle a successful return of data }, error:function(message){ //handle the error } }); All'inizio sembra piuttosto complesso, non aiutato dalla mancanza di indentazione da questo plug-in di codice, ma vedrai quanto è facile arrivare a un esempio reale.
API Flickr AJAX
In questo esempio, prenderemo i tag associati all'attuale post di WordPress e recupereremo alcune immagini da aggiungere alla fine dell'articolo. C'è un esempio simile nella documentazione di jQuery, ma usa un metodo di scelta rapida chiamato getJSON () piuttosto che spiegare un formato AJAX completo. Anche se questo è un modo valido di fare le cose se sai che stai solo recuperando i dati JSON, ritengo che imparare il vero metodo AJAX sia più importante, quindi è così che lo faremo.
Innanzitutto, uno su single.php e tenteremo di echeggiare una semplice lista separata da virgole dei tag di post correnti. Tipicamente, dovresti usare the_tags () per fare ciò, ma non va bene dato che vogliamo archiviarli come variabili, mentre the_tags () li riprende direttamente pre-formattati. Invece, useremo get_the_tags ():
name.", "; }?> Funziona bene, quindi forniremo questo all'interno di una richiesta AJAX all'URL dell'API di Flickr come segue (nota, questo è uno screenshot - per preservare il rientro, il codice è disponibile in questo PasteBin).
A questo punto, tutto ciò che viene inviato alla console del browser o avvisare un messaggio di errore se ce n'è uno. Per fare effettivamente qualcosa con i dati restituiti, aggiungi un posto dove posizionare le immagini:
E modifica il parametro di successo della chiamata AJAX per iterare sugli articoli che vengono restituiti.
$.each(data.items, function(i, item){ if(i==3) return false; // stop when we have 3 $("#flickr").append(" 
"); }); E lì ce l'abbiamo. Aggiungiamo 3 elementi dall'oggetto JSON restituito (i dati sono indicizzati a zero, quindi se arriviamo all'articolo 3, siamo effettivamente al quarto elemento. Confondendo, lo so. A quel punto, usiamo return false per saltare fuori di ciascun () iteratore). Ho già esaminato il contenuto degli oggetti che vengono restituiti, quindi conosco la struttura dei dati e sto solo estraendo un link e il riferimento IMG. Se sei interessato a sapere cos'altro viene restituito, butta semplicemente un console.log (oggetto) .
Ecco i risultati sul mio sito di test e il codice completo in questo PasteBin. Si noti che i risultati restituiti sono fondamentalmente spazzatura: il mio post includeva il tag DIY per una corsa di pollo walk-in, e Flickr mi ha dato il lavoro a maglia fai-da-te. Bello. Naturalmente, questo è uno degli ostacoli che devi affrontare quando lavori con un'API e fai le cose automaticamente; puoi re-taggare i tuoi post (un'impresa considerevole), modificare la richiesta per chiedere tag "tutti" anziché "qualsiasi" (probabilmente non restituire nulla in questo caso), o creare un nuovo campo personalizzato a cui specificare una parola chiave mirata da utilizzare con l'API (probabilmente la più semplice).
Considerazioni SEO
Questo non è un punto importante, ma dato che sei nel business dello sviluppo di siti web, dovresti menzionare: i motori di ricerca non indicizzano il contenuto che non esiste al caricamento della pagina, come qualsiasi cosa fatta tramite AJAX. La cosa peggiore in assoluto che potresti fare sarebbe completamente AJAXify il tuo blog in modo che la homepage fosse semplicemente un contenitore di tipo iframe per tutto il contenuto che viene caricato in modo dinamico. Usa saggiamente AJAX per migliorare il contenuto della pagina, non come una sostituzione . O affrontare terribili conseguenze.
Grazie per la lettura, e spero di averti dato alcune idee. Certamente, Flickr non è l'unica API là fuori - solo Google " API pubblica " e sei sicuro di trovare più cose con cui puoi giocare.
La settimana prossima sarà l'ultima lezione nella serie di tutorial di jQuery mentre controlliamo il plugin dell'interfaccia utente di jQuery. Come sempre, i commenti e i suggerimenti sono ben accetti; se hai una domanda di cui altri trarranno beneficio, considera di postarla sul nostro sito Answers.