Hvordan ringe en Ajax -samtale i JavaScript?

JavaScript er et programmeringsspråk på høyt nivå der kode utføres linje for linje og kalles synkron utførelse av kode. Ulempen med synkron utførelse er at de neste kodelinjene må vente på fullstendig utførelse av den gjeldende kodelinjen. Svaret på dette problemet er asynkron utførelse, i asynkron en uttalelse eller en linje trenger ikke å vente på at den forrige koden skal utføre helt snarere de kan utføre parallelt. For å oppnå asynkron utførelse av kode, kommer Ajax inn.

I dette innlegget vil vi se hva Ajax er og hvordan du kan ringe en Ajax -samtale i JavaScript ved hjelp av et eksempel.

Hva er Ajax?

Ajax ble populær i 2005 da Google satte det opp i Google -foreslår, og det står for asynkrone JavaScript og XML. XML står for utvidbart markeringsspråk som brukes til å kryptere meldinger som kan leses av mennesker og maskiner. XML ligner på HTML, men det lar deg bygge og tilpasse dine egne tagger. Funksjonen til Ajax er å overføre forespørsler til en server og deretter motta data fra den serveren på en asynkron måte.

Fordelen med Ajax er at den utfører sin funksjon uten behov for å oppdatere hele siden. Når du for eksempel skriver noe du skal søke etter i Google Search Bar, med hver tast, trykker du på søkelinjen Ajax -anrop og brukeren mottar forslag uten å faktisk oppdatere siden.

Det skal bemerkes at Ajax kommuniserer med serveren ved å bruke XMLHTTPRequest -objektet, JavaScript/DOM for å komme med forespørsler og XML som en dataoverføringsmekanisme.

Ajax utløses med en hendelse og utfører deretter sin funksjonalitet ved først å lage en XmlhttpRequest objekt og deretter sende HttpRequest til serveren der HttpRequest blir behandlet og et svar genereres som deretter blir sendt tilbake til nettleseren med noen data. Nettleseren behandler de returnerte dataene og oppdaterer sideinnholdet ved hjelp av JavaScript.

Nå som vi vet hva Ajax er og hvordan vi kan ringe en Ajax -samtale ved hjelp av JavaScript.

Ajax -samtale ved hjelp av JavaScript

I dette eksemplet vil vi først initialisere XMLHTTPRequest -objektet som brukes til å kommunisere med serveren eller for å si det enkelt, ringer en Ajax -samtale. XmlhttpRequest har mange innebygde metoder som vi kan bruke til å manipulere eller spille med serveren ved å sende, avbryte svar og motta data fra serveren. Vi vil koble oss til et gratis falskt API for å teste Ajax -samtalen vår. Koblingen til API vi skal bruke er gitt nedenfor:

https: // jsonplaceholder.typikode.com/

Den komplette koden for å ringe en Ajax -samtale er gitt nedenfor:

FunctionMyFunc ()
// initialisere xmlhttpRequest -objekt
varXhttp = newxMlHttpRequest ();
// etablere forbindelse med falsk API
varurl = 'https: // jsonplaceholder.typikode.com/todos/1 ';
// Få API fra URL
xhttp.Åpen ("Get", URL, True);
// Når forespørselen er vellykket, vil funksjonen nedenfor utføres
xhttp.onreadyStateChange = funksjon ()
// Hvis forespørselen er fullført og suksessfull
hvis dette.ReadyState == 4 && dette.status == 200)
konsoll.Logg (dette.svaretekst);


// Send forespørsel
xhttp.sende();

// ring myfunc -funksjonen
myFunc ();

I ovennevnte kode initialiserte vi først en funksjon med navnet på myfunc (), Og inni denne funksjonen opprettet vi en XmlhttpRequest gjenstand. Deretter etablerer vi forbindelsen med et API ved hjelp av en URL. For å få API bruker vi xhttp.åpen() metode og passere HTTP -metoden FÅ og URL. Get -metoden brukes når vi får noen data fra en server og POST Metoden brukes når vi skriver eller oppdaterer data på serveren.

Nå når forespørselen er ferdig med å utføre, og hvis den lykkes, er det onreadystatechange Hendelsen vil utføre der vi bruker en betingelse om at hvis forespørselen er fullført og forespørselen var vellykket, logg dataene. Statuskoden 200 brukes som betyr ok. De 400 Statuskode betyr feil og 300 Statuskode betyr å omdirigere til en eller annen side. Neste trinn er å sende forespørselen ved hjelp av Send () -metoden.

Til slutt kaller vi MyFunc () -funksjonen, og vi vil se følgende utgang i konsollloggen:

Statuskoden som er sett i utviklerverktøyene er 200, noe som betyr OK:

Konklusjon

Ajax står for asynkrone JavaScript og XML der XML brukes til å kryptere meldinger som er laget i lesbart format for mennesker og maskiner, bortsett fra at XML lar deg tilpasse dine egne tagger. Ajax lar deg overføre data til serveren uten å måtte oppdatere hele siden. Den utfører driften asynkront, og forbedrer derfor hastigheten, da koden ikke trenger å vente på at den forrige koden skal fullføre utførelsen. I JavaScript brukes XMLHttpRequest -objektet til å ringe en Ajax -samtale.

I dette innlegget diskuterte vi først hva Ajax er, og fortsatte deretter med å diskutere hvordan vi kan ringe en Ajax -samtale i JavaScript ved å bruke XMLHTTPRequest -objektet.