jQuery Tutorial (Parte 5) AJAX Tutti!

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: rende i siti Web interattivi. Non è l'unica libreria Javascript, ma è la più sviluppata, più supportata e più utilizzata ... Per saperne di più
• 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 faremo un salto di qualità 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-Che?

AJAX è un acronimo per Javascript asincrono e XML, ma la parola chiave qui è asincrono. 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. In realtà non importa come Flickr implementa il lato ricevente delle cose, perché questa è la bellezza di API - tutto quello che dobbiamo sapere è un URL dell'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'utilizzo di AJAX in WordPress Un tutorial sull'utilizzo di AJAX in WordPress AJAX è una tecnologia web straordinaria che ci ha spostato oltre il semplice “clicca link, vai a 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 “ufficiale” Processo WordPress AJAX.

Il metodo AJAX

Ecco il formato di base di una richiesta AJAX:

$ .ajax (tipo: "GET o POST", url: "API o l'URL del gestore PHP", tipo di dati: "JSON", // a seconda del tipo di dati che si desidera recuperare, ma JSON è i dati più comuni: // un insieme di chiavi: coppie "valore", successo: funzione (dati) // gestisce un ritorno di dati riuscito, errore: funzione (messaggio) // gestisce l'errore);

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 proveremo a echeggiare una semplice lista separata da virgole dei tag di post correnti. In genere, si dovrebbe usare the_tags () per fare questo, ma non va bene perché vogliamo archiviarli come variabili, mentre the_tags () li riecheggia direttamente preformattati. Invece, useremo get_the_tags ():

nome.","; ?>

Funziona bene, quindi eseguiremo 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 successo parametro della chiamata AJAX per iterare su elementi che vengono restituiti.

$ .each (data.items, function (i, item) if (i == 3) restituisce false; // stop quando abbiamo $ $ ("# flickr"). append (""););

E lì ce l'abbiamo. siamo aggiungendo 3 oggetti dall'oggetto JSON restituito (i dati sono indicizzati a zero, quindi se si arriva all'elemento 3, siamo effettivamente al quarto elemento. Confondendo, lo so. A quel punto, usiamo restituisce falso saltare fuori dal ogni() iterator).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 un console.log (voce) lì dentro.

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 Fai da te per un passeggiata di pollo, 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; potresti rinominare i tuoi post (un'impresa considerevole), modificare la richiesta di richiesta “tutti” tag invece di “qualunque” (probabile che non restituisca nulla in questo caso) o crei un nuovo campo personalizzato in cui specificare una parola chiave mirata da utilizzare con l'API (probabilmente la più semplice).

Considerazioni SEO

Questo non è un punto importante, ma dal momento che sei nel business dello sviluppo di siti web, dovresti menzionare: i motori di ricerca non indicizzeranno 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 accrescere il contenuto della pagina, non come a sostituzione. O affrontare terribili conseguenze.

Grazie per la lettura, e spero di averti dato alcune idee. Ovviamente, 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.

Scopri di più su: jQuery, programmazione, sviluppo Web.