Accentsconagua

Så här använder du jQuery's ajax -funktion

Webbdesign
Share

Efter att ha följt de föregående tre handledningarna borde du ha fått en god förståelse för AJAX. I den här sista handledningen sätter vi upp saker genom att arbeta med ett mer involverat exempel.

Markup

För att få en uppfattning om strukturen i det här exemplet, överväga följande markering:

Markeringen för huvud elementet visas nedan:

 
 
Populära fronten ramar
 
Klicka på var och en för att ladda detaljer via AJAX.
 
 Bootstrap Foundation UIkit Semantic UI Skelett Material Design Lite

Observera textlänkarna. Dessa motsvarar olika front-end-ramar. Som vi ser i nästa avsnitt, kommer varje AJAX-förfrågan att utföras varje gång vi klickar på länkarna. Då elementet med klassen av modal kommer att visas och dess innehåll kommer att uppdateras med data som hämtats från svaret.

Så här är huvud element ser ut som:

Modal Markup

Nästa steg är att undersöka strukturen hos vår modala. Här är HTML-koden:

 
  
 
     
  • Ramverk
    •   
  • Aktuell version
    •   
  • Antal Githubstjärnor
    •   
  • Officiell sida
    •

Som du kan se innehåller modalet några tomma element. Vi placerar dem i HTML eftersom deras text ändras beroende på vilken länk vi klickar på och svaret vi hämtar.

Bilden nedan visar hur modal ursprungligen visas:

Som standard är modal gömd. Dessutom döljer vi också lastaren. Detta kommer bara att visas när AJAX-förfrågan utlöses.

Ta en titt på motsvarande CSS-regler:

 .modal opacitet: 0;  .loader display: none;

Observera att vi använder opacitet egendom (och inte den visa egendom) för att dölja modal eftersom den här egenskapen tillhör de animerbara CSS-egenskaperna. På så sätt kan vi överföra tillstånden i modalet (dvs de öppna och stängda staterna).

Generera JSON-svaret

I det här exemplet väljer vi att bygga oss själva JSON-svaret. Specifikt det förväntade svaret (dvs Demo.json fil) kommer att vara en rad objekt. Varje objekt kommer att innehålla detaljer om de relaterade fronten-ramarna.

Dessutom värdet av namn egendom kommer att matcha textlänkarna i huvud element (se föregående avsnitt). Med det i åtanke ser svarets struktur ut något på följande sätt:

 ["url": "http://getbootstrap.com/", "numberOfStars": "88.260+", "currentVersion": "3.3.5", "namn": "Bootstrap", "url" "http://foundation.zurb.com/", "numberOfStars": "21.180+", "currentVersion": "5.5.3", "namn": "Foundation", // 4 fler objekt här]

Notera: värdena vi har använt för numberOfStars och aktuell version egenskaper är falska och rent för demonstrationens syfte.

Liknande de tidigare exemplen i denna serie använder vi AJAX för att begära en statisk fil. Om vi ​​emellertid vill bädda in innehåll som kommer från andra webbplatser (till exempel Google Maps, Flickr), bör vi läsa deras API-dokumentation och, om nödvändigt, ansöka om en API-nyckel.

Dessutom lever våra måldata på samma server som demoversidan. Därför kommer vi att undvika begränsningar som kan uppstå när vi interagerar med tjänster från tredje part (se avsnittet "Begränsningar av AJAX-förfrågningar" i den första handledningen).

Genomförande av AJAX-förfrågan

I det här avsnittet använder vi jQuery's ajax funktion för att initiera en AJAX-förfrågan. Innan vi gör det, låt oss först definiera våra variabler genom att cache de vanligaste jQuery-selektorerna:

 var $ list = $ ('.m-info'), var $ message = $ ('.m-meddelande'); var $ modal = $ ('.modal'); var $ loader = $ ('.lastare'); var $ ram;

Nu är det dags att undersöka koden som är ansvarig för utförandet av förfrågan:

 $ ('.boxar a'). ((klicka), funktion (e) e.preventDefault (); $ framework = $ (this) .text (); $ .ajax (url: 'Demo.json' , dataType: 'json', föreSänd: funktion () $ loader.show ();) gjort (successFunction) .fail (errorFunction) .allways (alwaysFunction););

Du märker syntaxen för ajax funktionen ser ut som följer:

 $ .Ajax ([inställningar])

De inställningar parameter är ett konfigurationsobjekt som innehåller information om vår begäran. Antalet fastigheter som objektet kan ha är väldigt länge (cirka 34 fastigheter). För enkelhets skull diskuterar vi bara de som används i denna demo. Mer specifikt:

Fast egendom Beskrivning
url En sträng som innehåller URL-adressen till vilken förfrågan skickas.
data typ Formatet av svardata (t.ex.. json, xml, html).
beforeSend En återuppringningsfunktion som körs innan vi skickar begäran. Här utlöser denna funktion koden som visar lastaren.

Innan vi går vidare är det värt att nämna tre saker:

  • Det finns också en annan syntax för ajax fungera: $ .ajax (url [, inställningar])
  • Alla konfigurationsegenskaper för inställningar parametern är valfri.
  • Standard HTTP-metoden är SKAFFA SIG.

Löfte Metoder

De ajax funktionen returnerar jQuery XMLHttpRequest eller jqXHR-objektet. Detta objekt implementerar Promise-gränssnittet och innehåller sålunda alla egenskaper, metoder och beteende för ett Promise.

I det här exemplet använder vi följande Promise-metoder:

  • Gjort
  • misslyckas
  • alltid

De Gjort Metoden utlöses om förfrågan lyckas. Den tar emot ett eller flera argument, som alla kan vara antingen en enda funktion eller en rad funktioner. Till exempel i vår demo, the successFunction () passeras som ett argument.

Återuppringningsfunktionen (t.ex.. successFunction ()) accepterar tre argument. Först, den returnerade data. För det andra, en sträng som kategoriserar status för förfrågan (se föregående artikel för de möjliga värdena). Slutligen, jqXHR-objektet.

De misslyckas Metoden heter om förfrågan misslyckas. Den tar emot ett eller flera argument, som alla kan vara antingen en enda funktion eller en rad funktioner. Till exempel i vår demo, the errorFunction () passeras som ett argument.

Återuppringningsfunktionen (t.ex.. errorFunction ()) accepterar tre argument: jqXHR-objektet, en sträng som kategoriserar status för begäran och en annan sträng som anger det resulterande felet. Detta fel tar emot textdelen av HTTP-statusen, till exempel Hittades inte eller Förbjuden.

De alltid Metoden utförs när förfrågan slutar, oavsett framgång (dvs Gjort metoden exekveras) eller fel (dvs misslyckas metod utförs) av det. Återigen mottar det som ett argument en enda funktion eller en rad funktioner. Till exempel i vår demo, the alwaysFunction () passeras som ett argument.

Förfrågan skickar funktionens argument. Vid en lyckad begäran, återkallelsen (t.ex.. alwaysFunction ()) får samma argument som återuppringningen av Gjort metod. Tvärtom, om förfrågan misslyckas, accepterar den samma argument som återkallas av misslyckas metod.

Notera: Istället för Gjort, misslyckas, och alltid Löfte metoder som används i detta exempel kan vi lika ha använt Framgång, fel, och komplett återuppringningsfunktioner. Dessa funktioner definieras i inställningar parameter.

Visar data

Om förfrågan lyckas kan vi få tillbaka svardata. Sedan manipulerar vi det så att de tomma elementen i modalet fylls.

Tänk på koden för successFunction ring tillbaka:

 funktion 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!');

Även om vi uppdaterade innehållet i vår modala, är det fortfarande dolt. Det blir synligt och lastaren försvinner när förfrågan slutar. Först då alwaysFunction återuppringning exekveras:

 funktion alwaysFunction () $ loader.hide (); $ Modal.addClass ( 'aktiv');

De aktiva klassen ser så här ut:

 .aktiv opacitet: 1; z-index: 10; transformera: skala (1);

Nedan ser du det förväntade utseendet på modal om vi klickar på bootstrap textlänk:

Ett par scenarier

Det är viktigt att förstå koden som körs under vissa omständigheter. Låt oss täcka två vanliga scenarier:

  • Värdet av namn egendom matchar inte textlänkarna i huvud element. Låt oss anta att vi definierar en URL där värdet av namn egenskapen hos objektet som är relaterat till stiftelsens ramverk är Stiftelse2 istället för fundament. I ett sådant fall, om vi klickar på fundament textlänk kommer modal nedan att visas:
  • Svarsdata är tomma. Säg till exempel att vi definierar en URL som pekar på en tom array. I detta fall skulle modalet se ut så här:

Hantera fel

Så vi har täckt koden som avfyras när förfrågan lyckas. Men vad händer om förfrågan misslyckas? Vid en misslyckad förfrågan döljer vi listan och visar ett anpassat meddelande.

Här är koden för failFunction () vilket visar att beteende:

 funktion failFunction (request, textStatus, errorThrown) $ list.hide (); $ message.text ('Ett fel inträffade under din förfrågan:' + request.status + "+ textStatus +" + errorThrown);

För att bekanta oss med den här koden anger vi en webbadress som inte existerar. Därav misslyckas Metoden kommer att utlösas och modal nedan visas:

Notera: Återigen kan felmeddelandet vara annorlunda om du kör detta exempel lokalt.

Här är den inbäddade Codepen-demo:

Slutsats

I denna handledning avslutade vi vår undersökning av AJAX från en webbdesigners perspektiv - bra gjort för att följa igenom det! Jag hoppas att du hittade denna serie till hjälp och du lärde dig några nya färdigheter.

Som ett nästa steg uppmuntrar jag dig att undersöka följande saker:

  • Bli bekant med jQuery's AJAX shorthand metoder som vi inte täckte (t.ex.. $ .getJSON metod).
  • Implementera dina egna AJAX-förfrågningar genom att komma åt antingen statiska filer eller till och med dynamiska data som kommer från tredjepartstjänster (t.ex. Flickr).
Webbdesign
×