Hva er Ajax?
I dette innlegget vil vi diskutere hva Ajax er, trinnvis fungerer Ajax, og gå gjennom et eksempel for å bedre forstå implementeringen av Ajax.
Hva er Ajax?
Ajax, som står for Asynkron javascript og xml, er en metode (ikke et programmeringsspråk) som brukes til webapplikasjoner for å overføre og motta data fra serveren asynkront, uten å påvirke resten av sidens innhold eller kreve en sideinnlasting.
Forkortelsen XML står for Extensible Markup Language som brukes til å kryptere meldinger slik at det kan leses av mennesker og maskiner. XML ligner på HTML, men det lar deg bygge og tilpasse dine egne tagger.
Ajax kommuniserer med serveren ved å bruke XMLHTTPRequest -objektet, JavaScript/DOM for å komme med forespørsler, og XML som en dataoverføringsmekanisme. Det ble populært bare da Google satte det i Google foreslår i 2005
For å si det med enkle ord er Ajax en metode for å redusere interaksjonene til serverklient som oppnås ved bare å oppdatere en del av en webside i stedet for å oppdatere hele websiden. Målet med Ajax er å sende små mengder data til serveren uten å måtte oppdatere siden.
Trinnvis arbeid av Ajax
- Noen hendelser blir utført og nettleseren oppretter et XMLHTTPRequest -objekt, hvoretter HttpRequest sendes til serveren.
- Serveren får HTTPRequest og behandler den deretter, etter behandlingen, genererer serveren et svar og sender responsen tilbake til nettleseren med noen data.
- De returnerte dataene blir deretter behandlet av nettleseren ved hjelp av JavaScript, og avhengig av svaret oppdaterer JavaScript innholdet på nettsiden.
La oss gå gjennom noen eksempler for å forstå Ajax bedre.
Eksempel 1:
Dette eksemplet vil demonstrere hvordan du endrer innholdet i en H2 Tag ved hjelp av Ajax. Først vil vi implementere strukturen på websiden vår ved hjelp av HTML.
XmlhttpRequest -objektet
I koden ovenfor definerte vi en div Container og ga den ID -attributtet på grunn av at vi kan referere til denne div beholderen senere i vår JavaScript -kode. Denne DIV -delen er definert slik at den kan vise informasjon fra en server. Deretter definerte vi en H2 -tag og en knapp der vi passerte en ved trykk begivenhet. Hver gang en bruker vil klikke på denne knappen, vil en hendelse bli generert og funksjonen ChangeContent () vil bli henrettet.
funksjonCHANGECONTENT ()// xmlhttpRequest objektinitialisering
constXhttp = newxMlHttpRequest ();
// ved hjelp av innebygd funksjon
xhttp.onload = funksjon ()
// Oppdatering av divelementinnhold
dokument.getElementById ("Eksempel").indrehtml =
dette.ResponseText;
// Få fil ajax_info.tekst
xhttp.Åpen ("Get", "Ajax_Info.tekst");
// Send forespørsel
xhttp.sende();
Nå som vi er ferdige med HTML -sideoppsettet, må vi skrive noen skriptkode. For denne opplæringen kommer vi til å inkludere JavaScript -kode inne i stikkord. I skriptkoden vår må vi først opprette funksjonen ChangeContent () Det vil bli utført med klikk på knappen, vi kan gjøre det med følgende kodelinjer:
funksjonCHANGECONTENT ()// xmlhttpRequest objektinitialisering
constXhttp = newxMlHttpRequest ();
// ved hjelp av innebygd funksjon
xhttp.onload = funksjon ()
// Oppdatering av divelementinnhold
dokument.getElementById ("Eksempel").indrehtml =
dette.ResponseText;
// Få fil ajax_info.tekst
xhttp.Åpen ("Get", "Ajax_Info.tekst");
// Send forespørsel
xhttp.sende();
Som du kan se i kodebiten ovenfor, genererer funksjonen en ny XMLHTTPRequest og venter på responsen fra serveren. Når du mottar responsen, vil innholdet i DIV bli erstattet av denne funksjonen.
La oss nå opprette en fil med navnet på AJAX_INFO.tekst og skriv litt dummy informasjon i denne filen for eksempel:
Hele koden er gitt nedenfor:
XmlhttpRequest -objektet
Utgangen fra ovennevnte kode er gitt nedenfor:
Vi kan se at når brukeren klikker på knappen, "endres" endres "til teksten som var til stede inne i Ajax_info.txt -fil.
Konklusjon
JavaScript utfører kodelinje for linje som kalles synkron utførelse, og derfor kommer Ajax inn i spill, da det er en metode som hjelper til med å implementere asynkron utførelse av koden i JavaScript. I asynkron utførelse trenger ikke en uttalelse eller en kodelinje å vente på etterbehandling av den forrige kodelinjen, og begge kan utføre parallell. Ajax brukes til å overføre og motta data fra serveren asynkront uten å påvirke resten av siden og krever ikke engang hele siden på nytt.
I dette innlegget så vi hva Ajax er, og så gikk vi for å se hvordan Ajax fungerer ved å beskrive prosessen trinnvis, og på slutten ga vi deg et eksempel for å gjøre konseptet ditt klarere.