Forstå AJAX med jQuery

AJAX Den består av et sett med teknikker og teknologier som lar oss etablere asynkron kommunikasjon mellom det klienten ser på nettet og informasjonen som finnes på serversiden av en webside.
En av hovedtrekkene vi kan markere er at den er avhengig av de forskjellige metodene HTTP Hva POST, GET, PUT eller SLETT for å kunne sende de nødvendige dataene til programmene på serveren.
I det tidlige utviklingsstadiet med AJAX samtaler måtte bygges ved hjelp av Javascript flat, noe som imidlertid genererte mye kode for oss jQuery hjelper oss med å forenkle ting ved å bringe adopsjon av denne teknikken og teknologien til massene, alt til fordel for både utvikleren og brukeren.
Hva er AJAX?AJAX tilsvarer Asynkron Javascript og XML nemlig Javascript Y XML asynkron, noe som også betyr at det er noe som ikke er avhengig av en fast struktur som et skript PHP hvor instruksjonene utføres sekvensielt, selvfølgelig lagrer samtalene til metoder og funksjoner for klasser og objekter.
Ovennevnte forklarer gir oss muligheten til å laste inn informasjon eller sende den uten å måtte laste på nytt eller sende en "fullstendig" forespørsel til serveren, vi setter den i anførselstegn fordi samtalene AJAX Dette er normale forespørsler, det er rett og slett ikke nødvendig å oppdatere siden i sin helhet hvis det ikke er ønsket oppførsel.
Å bruke disse teknikkene og teknologiene representerer noen fordeler som ikke mange er klar over deres eksistens, mange ganger bruker vi det bare for et spørsmål om trend, men hvis vi forstår fordelene, vil vi kunne vite hvilke prosjekter vi kan bruke det for å få mest mulig ut av det. La oss se noen av de viktigste fordelene med å bruke AJAX:
Reduksjon av båndbreddeVi oppnår dette takket være forespørsler fra seksjoner spesielt, med dette kan vi for eksempel oppnå å ikke måtte laste inn generelle stiler eller bilder på nytt hvis det vi ønsker er å oppdatere tekst.
Bedre brukeropplevelseVed å øke hastigheten på webapplikasjonen har brukeren en bemerkelsesverdig forbedring i bruk, i tillegg til å gi oss muligheten som utviklere til å øke graden av interaksjon med elementene vi har arrangert.
Fjern nettleseravhengighetNår du bruker jQuery behovet for å skrive kode som er nettleseravhengig elimineres, dette hjelper oss med å forbedre utviklingshastigheten og produktiviteten i vår tid.
Siden ingenting er perfekt når du bruker AJAX Vi må også forstå at det er noen ulemper som kan få oss til å reflektere og tenke over om det er det beste alternativet for prosjektet vårt. Deretter vil vi se noen av disse punktene for å få et mer komplett bilde før du starter den tekniske delen av opplæringen.
AvhengighetHvis en klient eller bruker bruker en veldig gammel nettleser eller bruker Javascript deaktivert, kan søknaden vår lide eller ikke fungere, noe som gir oss plikten til å lage spesielle tilfeller når vi ikke kan bruke AJAX.
Skriv en ekstra kodeI henhold til søknaden vår må vi skrive tilleggskode for å kunne integrere svarene vi får fra forespørslene AJAX, for eksempel svar som følger med HTML Y CSS.
Selvfølgelig er det for øyeblikket veldig vanskelig å finne en nettleser som ikke er kompatibel med Javascript Y jQueryAvhengig av vårt område kan vi imidlertid finne noen tilfeller som kan gjøre livet veldig vanskelig.
En forespørsel AJAX fra jQuery må ha en grunnleggende struktur, der vi må etablere noen parametere som er nødvendige for rammeverket, må vi etablere metoden HTTP av forespørselen, ruten som forespørselen skal sendes til, svarformatet og til slutt, hva som bør gjøres hvis forespørselen lykkes eller når det oppstår en feil. La oss se i følgende ikke-funksjonelle kode hvordan vi kan se dette:

 $ .ajax ({type: "HTTP method", // POST, GET, PUT, DELETE url: "Request path", // http: / / www.example.com/request dataType: "Type data", / / html, xml, json success: function on success, error: function on error}); 

Vi ser at hver av delene som vi har beskrevet er parametere som forespørselen vår mottar, og at den gjøres gjennom metoden $ .ajax () som er levert av jQuery direkte, og det er en maske for koden Javascript fly som tilsvarer hver motor i hver nettleser som støttes, som på dette tidspunktet er nesten alle de siste reklamene som f.eks Chrome, Firefox, Opera, Safari Internet Explorer, og de som er avledet fra motorene til disse som vi har nevnt.
Vi skal nå praktisere det vi har sett i forrige seksjon når vi sender en forespørsel AJAX fra en side HTML som vi skal bygge i følgende eksempel. Vi må vite at vi kommer til å kreve den nyeste versjonen av jQuery vi kan få, men vi kan bruke den de lagrer i sin CDN, vil vi også trenge en liten webserver for å kunne rute filene vi skal skaffe asynkront, for dette kan vi bruke WAMP i Windows, eller en installasjon LAMPE i systemer Linux, angående MAC -plattformer vi kan bruke XAMP eller liknende.
I den følgende koden skal vi inkludere først jQuery, så vil vi lage en etikett i kroppen med en unik ID der vi vil plassere innholdet i svaret på forespørselen vår, og nær slutten av dokumentet vil vi lage en etikett manus hvor vi vil generere koden for å gjøre forespørselen, i attributtet til url vi kommer til å sende forespørselen til indeksen til mappen der filene våre ligger, vi gjør dette for å vise driften av koden vår, men måten å gjøre dette på er å be om en annen fil som vil tjene svaret vi trenger, la oss se koden:

 Eksempel på forespørsel fra AJAXBehandle AJAX 

I bildet nedenfor ser vi hvordan alt har fungert, hvor vi kan se et vellykket svar fra koden vår.

La oss se hva som skjer når vi endrer banen til forespørselen om en ikke-eksisterende for å tvinge en feil, oppdatere og trykke på knappen Behandle AJAX:

Vi kan se at det vi har plassert i feilkoden utløses. Men det mest interessante er at typen feil HTTP, i dette tilfellet var det en ressurs som ikke ble funnet eller 404, med litt dyktighet kan vi kanskje fange den og forbedre feilhåndteringen, dette er fortsatt et forskningstema for de som er interessert.
En av tingene som jQuery ønsker er at vi ikke kaster bort tid og koder å gjøre ting den lange veien, det er derfor det gir oss snarveier for samtaler AJAX mest vanlige metoder som FÅ Y POST, så ved å bruke snarveien lagrer vi noen få kodelinjer, og dermed kan vi redusere vekten på applikasjonen vår.
For dette i den offisielle dokumentasjonen til jQuery Vi har alle de eksisterende sakene, men vi skal gjøre det forrige eksemplet på nytt ved å bruke snarveien i dette tilfellet, men før vi ser funksjonskoden, la oss se det ikke-funksjonelle eksemplet:

$ .get (bane, data, SuccessFunction, ResponseType);

Som vi la merke til, er denne samtalen mye mindre, noe som hjelper oss med å få en renere og lettere kode. Når vi bruker dette på vårt tidligere eksempel, vil det være som følger:

 Eksempel på forespørsel fra AJAXBehandle AJAX 

Vi ser at antall linjer og tegn ble betydelig redusert, noe som ville forbedre dataoverføringen vår ved å bruke en lavere båndbredde. Hvis vi kjører alt i nettleseren, vil det gi oss følgende svar:

Med dette har vi fullført denne opplæringen, så så vi hvordan vi på en enkel måte har forklart hva den representerer AJAX og dens mest grunnleggende applikasjoner med jQueryFra nå av gjenstår det bare å fortsette å forske på og prøve å inkorporere denne utviklingsteknikken når fordelene er passende for våre applikasjoner.