Share
Etter å ha fulgt de tre foregående øvelsene, bør du ha fått en god forståelse av AJAX. I denne siste opplæringen vil vi pakke opp ting ved å jobbe med et mer involvert eksempel.
For å få en ide om strukturen i dette eksemplet, vurder følgende oppslag:
Markeringen for hoved- elementet er vist nedenfor:
Populære front-end rammer
Klikk på hver enkelt for å laste opp detaljer via AJAX.
Bootstrap Foundation UIkit Semantic UI Skeleton Material Design Lite
Legg merke til tekstkoblingene. Disse tilsvarer ulike front-end rammer. Som vi ser i neste avsnitt, blir hver AJAX-forespørsel utført hver gang vi klikker på koblingene. Så elementet med klassen av modal vises og innholdet blir oppdatert med data hentet fra svaret.
Her er hvordan hoved- elementet ser ut som:
Det neste trinnet er å undersøke strukturen til vår modal. Her er HTML-koden:
- Work
- Gjeldende versjon
- Antall Github Stjerner
- offisiell side
Som du kan se inneholder modalet noen få tomme elementer. Vi plasserer dem i HTML fordi deres tekst vil endre seg, avhengig av hvilken kobling vi klikker på og svaret vi henter.
Bildet nedenfor viser hvordan modal først oppstår:
Som standard er modal skjult. I tillegg skjuler vi også lasteren. Dette vises bare når AJAX-forespørselen utløses.
Ta en titt på de tilsvarende CSS-reglene:
.modal opacity: 0; .loader display: none;
Legg merke til at vi bruker opasitet eiendom (og ikke den vise eiendom) for å skjule modal fordi denne egenskapen tilhører de animerte CSS-egenskapene. På denne måten vil vi kunne overføre tilstandene til modalet (dvs. de åpne og lukkede tilstandene).
I dette eksemplet velger vi å bygge oss selv JSON-responsen. Spesielt forventet respons (dvs. Demo.json fil) vil være en rekke objekter. Hvert objekt vil inneholde detaljer angående relaterte front-end rammer.
Dessuten verdien av Navn Egenskapen vil samsvare med tekstlinkene til hoved- element (se forrige avsnitt). Med det i tankene ser strukturen på svaret ut slik:
["url": "http://getbootstrap.com/", "numberOfStars": "88.260+", "currentVersion": "3.3.5", "navn": "Bootstrap", "url" "http://foundation.zurb.com/", "numberOfStars": "21.180+", "currentVersion": "5.5.3", "navn": "Foundation", // 4 flere objekter her]
Merk: verdiene vi har brukt til numberOfStars og gjeldende versjon Egenskapene er falske og rene for demonstrasjonsformål.
I likhet med tidligere eksempler i denne serien bruker vi AJAX til å be om en statisk fil. Men hvis vi ønsker å legge inn innhold som kommer fra andre nettsteder (for eksempel Google Maps, Flickr), bør vi lese API-dokumentasjonen, og om nødvendig søke om en API-nøkkel.
Videre bor våre måldata på samme server som demoversiden. Derfor unngår vi begrensninger som kan oppstå når vi samhandler med tredjepartstjenester (se delen Begrensninger av AJAX-forespørsler i første veiledning).
I denne delen bruker vi jQuery's ajax funksjon for å initialisere en AJAX-forespørsel. Før du gjør det, la oss først definere våre variabler ved å cache de mest brukte jQuery selectors:
Accentsconagua
var $ list = $ ('.m-info'), var $ melding = $ ('.m-melding'); var $ modal = $ ('.modal'); var $ loader = $ ('.laster'); var $ rammeverk; Nå er det på tide å undersøke koden som er ansvarlig for gjennomføringen av forespørselen:
$ ('. bokser a'). på ('klikk', funksjon (e) e.preventDefault (); $ framework = $ (dette) .text (); $ .ajax (url: 'Demo.json' , dataType: 'json', beforeSend: function () $ loader.show ();) ferdig (suksessFunksjon) .fail (errorFunction) .always (alwaysFunction);); Du vil legge merke til syntaksen for ajax funksjonen ser ut som følger:
$ .Ajax ([innstillinger])
De innstillinger parameter er et konfigurasjonsobjekt som inneholder informasjon om vår forespørsel. Antallet av egenskapene som dette objektet kan ha er svært lang (rundt 34 eiendommer). For enkelhets skyld, diskuterer vi bare de som brukes i denne demoen. Mer spesifikt:
| Eiendom | Beskrivelse |
|---|---|
| url | En streng som inneholder nettadressen som forespørselen sendes til. |
| data-type | Formatet av responsdataene (f.eks. json, xml, html). |
| beforeSend | En tilbakeringingsfunksjon som utføres før vi sender forespørselen. Her utløser denne funksjonen koden som viser lasteren. |
Før vi går videre, er det verdt å nevne tre ting:
ajax funksjon: $ .ajax (url [, innstillinger]) innstillinger parameter er valgfri.FÅ.De ajax funksjonen returnerer jQuery XMLHttpRequest eller jqXHR objektet. Dette objektet implementerer Promise-grensesnittet, og inneholder dermed alle egenskapene, metodene og oppførselen til et løfte.
I dette eksemplet bruker vi følgende løfte metoder:
ferdigmislykkesalltidDe ferdig Metoden utløses hvis forespørselen lykkes. Den mottar en eller flere argumenter, som alle kan være enten en enkelt funksjon eller en rekke funksjoner. For eksempel, i vår demo, den successFunction () er bestått som et argument.
Tilbakeringingsfunksjonen (f.eks. successFunction ()) aksepterer tre argumenter. Først, de returnerte dataene. For det andre, en streng som kategoriserer statusen til forespørselen (se forrige artikkel for mulige verdier). Til slutt, jqXHR-objektet.
De mislykkes Metoden kalles hvis forespørselen mislykkes. Den mottar en eller flere argumenter, som alle kan være enten en enkelt funksjon eller en rekke funksjoner. For eksempel, i vår demo, den errorFunction () er bestått som et argument.
Tilbakeringingsfunksjonen (f.eks. errorFunction ()) aksepterer tre argumenter: jqXHR-objektet, en streng som kategoriserer statusen til forespørselen, og en annen streng som angir den resulterende feilen. Denne feilen mottar tekstdelen av HTTP-statusen, for eksempel Ikke funnet eller Forbudt.
De alltid Metoden utføres når forespørselen avsluttes, uansett suksess (dvs. ferdig metode utføres) eller feil (dvs. mislykkes metoden er utført) av den. Igjen mottar det som et argument en enkelt funksjon eller en rekke funksjoner. For eksempel, i vår demo, den alwaysFunction () er bestått som et argument.
Tilstanden for forespørselen angir funksjonens argumenter. I tilfelle en vellykket forespørsel, tilbakekallingen (f.eks. alwaysFunction ()) mottar de samme argumentene som tilbakekallingen til ferdig metode. Tvert imot, hvis forespørselen mislykkes, aksepterer den samme argumenter som tilbakekallingen av mislykkes metode.
Merk: I stedet for ferdig, mislykkes, og alltid Løfte metoder som brukes i dette eksempelet, kunne vi også ha brukt suksess, feil, og fullstendig tilbakeringingsfunksjoner. Disse funksjonene er definert i innstillinger parameter.
Hvis forespørselen lykkes, kan vi få tilbake svardataene. Da manipulerer vi det for å fylle de tomme elementene i modalet.
Vurder koden for successFunction Ring tilbake:
funksjon suksessFunksjon (data) hvis (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!'); Selv om vi oppdaterte innholdet i vår modal, er dette fortsatt skjult. Det blir synlig og lasteren forsvinner når forespørselen er ferdig. Bare da, den alwaysFunction tilbakeringing utføres:
funksjon alwaysFunction () $ loader.hide (); $ Modal.addClass ( 'aktiv');
De aktiv klassen ser slik ut:
.aktiv opacity: 1; z-indeks: 10; transformere: skala (1);
Nedenfor kan du se det forventede utseendet til modal hvis vi klikker på Bootstrap tekstlenke:
Det er viktig å forstå koden som utføres under visse omstendigheter. La oss dekke to vanlige scenarier:
Navn Egenskapen samsvarer ikke med tekstlinkene til hoved- element. For eksempel, anta at vi definerer en URL der verdien av Navn Egenskapen til objektet som er relatert til stiftelsens rammeverk er Foundation2 i stedet for Fundament. I et slikt tilfelle, hvis vi klikker på Fundament tekstlenke, vil modalet nedenfor vises:
Så, vi har dekket koden som fyres når forespørselen lykkes. Men hva skjer hvis forespørselen mislykkes? Ved mislykket forespørsel skjuler vi listen og viser en egendefinert melding.
Her er koden til failFunction () som demonstrerer atferd:
funksjon failFunction (request, textStatus, errorThrown) $ list.hide (); $ message.text ('Det oppsto en feil under forespørselen din:' + request.status + "+ textStatus +" + errorThrown); For å gjøre oss kjent med denne koden, spesifiserer vi en nettadresse som ikke eksisterer. Derav mislykkes Metoden vil bli utløst, og modalet nedenfor vil bli vist:
Merk: Igjen kan feilmeldingen være annerledes hvis du kjører dette eksemplet lokalt.
Her er den innebygde Codepen demo:
I denne opplæringen avsluttet vi vår undersøkelse av AJAX fra en webdesigners perspektiv - godt utført for å følge den gjennom! Jeg håper at du fant denne serien nyttig og du lærte noen nye ferdigheter.
Som et neste skritt, oppfordrer jeg deg til å undersøke følgende ting:
$ .getJSON metode).