En nybegynners guide til AJAX med jQuery

I den første artikkelen i denne serien dekket vi grunnleggende for AJAX. I det andre så vi på et fungerende eksempel ved hjelp av vanilla JavaScript.

I denne veiledningen vil vi gå gjennom noen av jQuery's AJAX-relaterte funksjoner og metoder. Nærmere bestemt vil vi ta en nærmere titt på shorthand laste metode og generisk ajax funksjon.

Bruker laste Metode

jQuery laste Metode er en enkel, men likevel kraftig metode for å hente fjerndata. Nedenfor kan du se sin syntaks:

 $ (selector) .load (url [, data] [, complete]) 

Tabellen nedenfor viser mulige parametere:

Parameter	Beskrivelse	Må
url	En streng som inneholder nettadressen som forespørselen sendes til.	Ja
data	Dataene (som en streng eller vanlig objekt) som sendes til serveren med forespørselen.	Nei
fullstendig	En tilbakeringingsfunksjon som utføres når forespørselen fullføres, enten vellykket eller mislykket.	Nei

Her er parameterne for tilbakeringingsfunksjonen:

Parameter	Beskrivelse
response	Dataene hentet fra forespørselen.
textStatus	En streng som kategoriserer statusen til forespørselen.
jqXHR	JQuery XMLHttpRequest (jqXHR) -objektet, som er et supersett av nettleserens native XMLHttpRequest (XHR) -objekt.

Den neste listen oppsummerer de mulige verdiene til textStatus parameter:

 - suksess - ikke modifisert - nocontent - feil - timeout - abort - parsererror 

For bedre å forstå hvordan laste Metoden fungerer, la oss gå tilbake til eksemplet som ble diskutert i den forrige opplæringen.

Igjen, se på denne enkle HTML-strukturen:

   Lær mer om Einstein   

Slik ser det ut:

Husk at vi vil oppdatere innholdet i #bio element med svardata, så snart knappen er klikket.

Her er den nødvendige jQuery-koden:

 var $ btn = $ ('# request'); var $ bio = $ ('# bio'); $ btn.on ('klikk', funksjon () $ (dette) .hide (); $ bio.load ('Bio.txt', completeFunction);); funksjon completeFunction (responseText, textStatus, request) $ bio.css ('border', '1px solid # e8e8e8'); hvis (textStatus == 'feil') $ bio.text ('Det oppsto en feil under forespørselen din:' + request.status + "+ request.statusText); 

Forutsatt at forespørselen er vellykket (dvs. når textStatus er suksess eller notmodified), ville det endelige resultatet se slik ut:

Vurder også følgende visualisering som beskriver en vellykket forespørsel:

Den venstre delen av denne visualiseringen viser XHR-objektet som det skrives ut i nettleserens konsoll hvis vi bruker rent JavaScript (se tidligere opplæring) for å gjøre forespørselen. På den annen side viser den høyre delen det respektive jqXHR-objektet som det skrives ut hvis vi bruker laste metode.

Ved mislykket forespørsel skal det imidlertid vises en tilsvarende melding. For å gjøre dette overvåker vi verdien av textStatus parameter og vise en feilmelding:

Merk: Hvis du kjører eksemplet fra ditt lokale miljø (og lagrer Bio.txt fil i den), vil feilmeldingen trolig være annerledes. Du kan for eksempel se følgende resultat:

Til slutt er det verdt å nevne at, som standard, laste Metoden bruker HTTP FÅ metode, med mindre vi sender data som et objekt til serveren. Bare da, den POST Metoden er påkalt.

Se den relevante Codepen-demoen nedenfor:

La oss nå endre formatet på filen som vi ber om fra serveren. Spesielt for dette eksemplet er de ønskede dataene inkludert i Bio.html fil i stedet for Bio.txt fil. Også verdt å merke seg: Målfilen inneholder to avsnitt.

Forutsatt at vi bare vil laste første avsnitt, må vi oppdatere den opprinnelige koden som følger:

 $ btn.on ('klikk', funksjon () // denne linjen endres bare $ bio.load ('Bio.html p: first-child', completeFunction);); 

Slik ser det ut:

Og her er Codepen-demoen:

Konklusjon

I denne opplæringen viste jeg hvordan du kan bruke AJAX med jQuery. For å gjøre ting mer interessant, jobbet vi også med et par praktiske eksempler. I den siste gjenværende opplæringen av denne serien vil vi pakke opp ting ved å jobbe med et mer involvert eksempel.