Indholdsfortegnelse
AJAX Det består af et sæt teknikker og teknologier, der giver os mulighed for at etablere asynkron kommunikation mellem, hvad klienten ser på internettet og de oplysninger, der findes på serversiden af en webside.En af de vigtigste egenskaber, som vi kan fremhæve, er, at den er afhængig af de forskellige metoder HTTP Hvad POST, GET, PUT eller DELETE for at kunne sende de nødvendige data til applikationerne på serveren.
I den tidlige fase af udviklingen med AJAX opkald skulle bygges ved hjælp af Javascript flad, hvilket dog genererede en masse kode til os jQuery hjælper os med at forenkle tingene ved at bringe vedtagelsen af denne teknik og teknologier til masserne, alt til fordel for både udvikleren og brugeren.
Hvad er AJAX?AJAX svarer til Asynkron Javascript og XML nemlig Javascript Y XML asynkron, hvilket også betyder, at det er noget, der ikke afhænger af en fast struktur som f.eks. et script PHP hvor instruktionerne udføres sekventielt, naturligvis gemmer opkaldene til metoder og funktioner i klasser og objekter.
Ovenstående forklaret giver os mulighed for at indlæse oplysninger eller sende dem uden at skulle genindlæse eller foretage en "komplet" anmodning til serveren, vi sætter det i anførselstegn, fordi opkaldene AJAX Dette er normale anmodninger, det er simpelthen ikke nødvendigt at opdatere siden i sin helhed, hvis det ikke er den ønskede adfærd.
Brug af disse teknikker og teknologier repræsenterer nogle fordele, som ikke mange er klar over deres eksistens, mange gange bruger vi det kun for et spørgsmål om tendens, men hvis vi forstår dets fordele, vil vi være i stand til at vide, hvilke projekter vi kan anvende det for at få mest ud af det. Lad os se nogle af de vigtigste fordele ved at bruge nedenfor AJAX:
Båndbreddeforbrug reduceretVi opnår dette takket være anmodninger fra især sektioner, med dette kan vi f.eks. Opnå ikke at skulle genindlæse generelle stilarter eller billeder, hvis det vi ønsker er at opdatere tekst.
Bedre brugeroplevelseVed at øge webapplikationens hastighed har brugeren en bemærkelsesværdig forbedring i brugen, udover at give os mulighed for som udviklere at øge graden af interaktion med de elementer, vi har arrangeret.
Fjern browserafhængighedVed brug jQuery behovet for at skrive kode, der er browserafhængig, elimineres, dette hjælper os med at forbedre udviklingshastighed og produktivitet i vores tid.
Da intet er perfekt, når det bruges AJAX Vi skal også forstå, at der er nogle ulemper, der kan få os til at reflektere og tænke over, om det er den bedste løsning til vores projekt. Dernæst vil vi se nogle af disse punkter for at få et mere komplet billede, inden du starter den tekniske del af selvstudiet.
AfhængighedHvis en klient eller bruger bruger en meget gammel browser eller har brug af Javascript deaktiveret, kan vores ansøgning lide eller ikke fungere, hvilket giver os forpligtelsen til at lave særlige tilfælde, når vi ikke kan bruge AJAX.
Skriv ekstra kodeIfølge vores ansøgning skal vi skrive yderligere kode for at kunne integrere de svar, vi får fra anmodningerne AJAX, såsom svar, der følger med HTML Y CSS.
Selvfølgelig er det på nuværende tidspunkt meget svært at finde en browser, der ikke er kompatibel med Javascript Y jQueryAfhængigt af vores område kan vi dog finde nogle tilfælde, der kan gøre livet meget svært.
En forespørgsel AJAX fra jQuery skal have en grundlæggende struktur, hvor vi skal etablere nogle parametre, der er nødvendige for rammen, skal vi etablere metoden HTTP af anmodningen, den rute, hvortil anmodningen vil blive fremsat, svarformatet og endelig, hvad der skal gøres, hvis anmodningen er vellykket, eller hvis der opstår en fejl. Lad os se i den følgende ikke-funktionelle kode, hvordan vi kan se dette:
$ .ajax ({type: "HTTP -metode", // POST, GET, PUT, DELETE url: "Anmodningssti", // http: / / www.example.com/anmodningdatatype: "Datatype", / / html, xml, json success: function on success, error: function on error}); Vi ser, at hver af de sektioner, vi har beskrevet, er parametre, som vores anmodning modtager, og at det sker gennem metoden $ .ajax () som leveres af jQuery direkte, og det er en maske til koden Javascript fly, der svarer til hver motor i hver understøttet browser, som på dette tidspunkt er næsten alle de nyeste reklamer som f.eks Chrome, Firefox, Opera, Safari Internet Explorer, og dem, der stammer fra motorerne i disse, som vi har nævnt.
Vi skal nu omsætte det, vi har set i det foregående afsnit, når vi sender en anmodning AJAX fra en side HTML som vi skal bygge i følgende eksempel. Vi skal vide, at vi kommer til at kræve den mest aktuelle version af jQuery vi kan få, men vi kan bruge den, de gemmer i deres CDN, har vi også brug for en lille webserver for at kunne dirigere de filer, som vi skal hente asynkront, til dette kan vi bruge WAMP i Windowseller en installation LAMPE i systemer Linux, angående MAC -platforme, vi kan bruge XAMP eller lignende.
I den følgende kode vil vi først inkludere jQuery, så vil vi oprette en etiket i kroppen med et unikt id, hvor vi vil placere indholdet af svaret på vores anmodning, og nær slutningen af dokumentet vil vi lave en etiket manuskript hvor vi vil generere koden til at fremsætte anmodningen, i attributten for url vi vil gøre anmodningen til indekset i den mappe, hvor vores filer er placeret, vi gør dette for at vise funktionen af vores kode, men måden at gøre dette på er at anmode om en anden fil, der tjener det svar, vi har brug for, lad os lade se koden:
AJAX -anmodningseksempelBehandl AJAX
I det følgende billede ser vi, hvordan alt har fungeret, hvor vi kan se et vellykket svar fra vores kode.
En af de ting, der jQuery ønsker er, at vi ikke spilder tid og koder for at gøre ting på den lange vej, det er derfor, det giver os genveje til opkald AJAX mest almindelige metoder som f.eks FÅ Y STOLPE, så ved at bruge genvejen gemmer vi et par linjer kode, og dermed kan vi reducere vægten af vores applikation.
For dette i den officielle dokumentation af jQuery Vi har alle de eksisterende sager, men vi vil gentage det tidligere eksempel ved hjælp af i dette tilfælde genvejen, men før vi ser funktionskoden, lad os se det ikke-funktionelle eksempel:
$ .get (sti, data, SuccessFunction, ResponseType);
Da vi bemærkede, at dette opkald er meget mindre, hvilket hjælper os med at få en renere og lettere kode, nu ved at anvende dette på vores tidligere eksempel, ville det være som følger:
AJAX -anmodningseksempelBehandl AJAX
Vi ser, at antallet af linjer og tegn blev reduceret betydeligt, hvilket ville forbedre vores dataoverførsel ved at bruge en lavere båndbredde. Hvis vi kører alt i browseren, ville det give os følgende svar:
