Förstå AJAX med jQuery

AJAX Den består av en uppsättning tekniker och tekniker som gör att vi kan upprätta asynkron kommunikation mellan vad klienten ser på webben och den information som finns på serversidan av en webbsida.
En av de viktigaste egenskaperna som vi kan lyfta fram är att den bygger på de olika metoderna HTTP Vad POST, GET, PUT eller DELETE för att kunna skicka nödvändig data till applikationerna på servern.
I det tidiga utvecklingsstadiet med AJAX samtal måste byggas med Javascript platt, vilket genererade mycket kod för oss, dock jQuery hjälper oss att förenkla saker genom att ta med denna teknik och teknik till massorna, allt till förmån för både utvecklaren och användaren.
Vad är AJAX?AJAX motsvarar Asynkron Javascript och XML nämligen Javascript Y XML asynkron, vilket också innebär att det är något som inte är beroende av en fast struktur som ett skript PHP där instruktionerna utförs sekventiellt, naturligtvis sparar samtalen till metoder och funktioner för klasser och objekt.
Ovanstående förklarar ger oss möjlighet att ladda information eller skicka den utan att behöva ladda om eller göra en "komplett" begäran till servern, vi sätter den i citattecken eftersom samtalen AJAX Detta är normala förfrågningar, det är helt enkelt inte nödvändigt att uppdatera sidan i sin helhet om det inte är önskat beteende.
Att använda dessa tekniker och tekniker representerar några fördelar som inte många är medvetna om deras existens, många gånger använder vi det bara för en trendfråga, men om vi förstår dess fördelar kommer vi att kunna veta vilka projekt vi kan använda det för att få det mesta av det. Låt oss se nedan några av de viktigaste fördelarna med att använda AJAX:
Minskning av bandbreddVi uppnår detta tack vare önskemål från särskilt avsnitt, med detta kan vi till exempel uppnå att vi inte behöver ladda om allmänna stilar eller bilder om det vi vill är att uppdatera text.
Bättre användarupplevelseGenom att öka hastigheten på webbapplikationen har användaren en anmärkningsvärd förbättring av användningen, förutom att ge oss möjlighet som utvecklare att öka graden av interaktion med de element som vi har ordnat.
Ta bort beroende på webbläsareNär man använder jQuery behovet av att skriva kod som är beroende av webbläsare elimineras, detta hjälper oss att förbättra utvecklingshastigheten och produktiviteten i vår tid.
Eftersom ingenting är perfekt när du använder det AJAX Vi måste också förstå att det finns några nackdelar som kan få oss att reflektera och fundera över om det är det bästa alternativet för vårt projekt. Därefter kommer vi att se några av dessa punkter för att få en mer fullständig bild innan du börjar den tekniska delen av handledningen.
BeroendeOm en klient eller användare använder en mycket gammal webbläsare eller använder Javascript inaktiverad kan vår applikation lida eller inte fungera, vilket ger oss skyldigheten att göra särskilda fall när vi inte kan använda AJAX.
Skriv ytterligare kodEnligt vår ansökan måste vi skriva ytterligare kod för att kunna integrera de svar vi får från förfrågningarna AJAX, till exempel svar som följer med HTML Y CSS.
Naturligtvis är det för närvarande väldigt svårt att hitta en webbläsare som inte är kompatibel med Javascript Y jQueryBeroende på vårt område kan vi dock hitta några fall som kan göra livet väldigt svårt.
En begäran AJAX från jQuery måste ha en grundläggande struktur, där vi måste fastställa några parametrar som är nödvändiga för ramverket, måste vi fastställa metoden HTTP av begäran, rutten till vilken begäran kommer att göras, svarsformatet och slutligen, vad som ska göras om förfrågan lyckas eller när ett fel uppstår. Låt oss se i följande icke-funktionella kod hur vi kan se detta:

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

Vi ser att var och en av de sektioner som vi har beskrivit är parametrar som vår begäran får och att det görs genom metoden $ .ajax () som levereras av jQuery direkt, och det är en mask för koden Javascript plan som motsvarar varje motor i varje webbläsare som stöds, som vid denna tidpunkt är nästan alla de senaste reklamfilmerna som t.ex. Chrome, Firefox, Opera, Safari Internet Explorer, och de som härrör från motorerna i dessa som vi har nämnt.
Vi ska nu omsätta det vi har sett i föregående avsnitt när vi gör en begäran AJAX från en sida HTML som vi ska bygga i följande exempel. Vi måste veta att vi kommer att kräva den senaste versionen av jQuery vi kan få, men vi kan använda den de lagrar i sina CDN, vi kommer också att behöva en liten webbserver för att kunna dirigera filerna som vi ska skaffa asynkront, för detta kan vi använda WAMP i Windowseller en installation LAMPA i system Linux, angående MAC -plattformar som vi kan använda XAMP eller liknande.
I följande kod kommer vi att inkludera först jQuery, då skapar vi en etikett i kroppen med ett unikt id där vi kommer att placera innehållet i svaret på vår begäran, och nära slutet av dokumentet kommer vi att göra en etikett manus där vi kommer att generera koden för att göra begäran, i attributet till url vi kommer att göra förfrågan till indexet för mappen där våra filer finns, vi gör detta för att visa hur vår kod fungerar, men sättet att göra detta är att begära en annan fil som kommer att tjäna det svar vi behöver, låt oss se koden:

 Exempel på förfrågan från AJAXBearbeta AJAX 

I följande bild ser vi hur allt har fungerat, där vi kan se ett lyckat svar från vår kod.

Låt oss se vad som händer när vi ändrar sökvägen för begäran om en obefintlig för att tvinga fram ett fel, uppdatera och tryck på knappen Bearbeta AJAX:

Vi kan se att det vi har placerat i felkoden utlöses. Men det mest intressanta är att typen av fel HTTP, i det här fallet var det en resurs som inte hittades eller 404, med lite skicklighet kanske vi kan fånga det och förbättra felhanteringen, är detta fortfarande ett forskningsämne för intresserade.
En av de saker som jQuery vill är att vi inte slösar bort tid och kodar saker på långa vägar, det är därför det ger oss genvägar för samtal AJAX vanligaste metoderna som t.ex. SKAFFA SIG Y POSTA, så genom att använda genvägen sparar vi några rader kod och därmed kan vi minska vikten av vår applikation.
För detta i den officiella dokumentationen av jQuery Vi har alla befintliga fall, men vi kommer att göra om det tidigare exemplet med hjälp av genvägen i det här fallet, men innan vi ser funktionskoden, låt oss se det icke-funktionella exemplet:

$ .get (sökväg, data, SuccessFunction, ResponseType);

Som vi märkte är detta samtal mycket mindre, vilket hjälper oss att ha en renare och lättare kod.

 Exempel på förfrågan från AJAXBearbeta AJAX 

Vi ser att antalet rader och tecken minskades avsevärt, vilket skulle förbättra vår dataöverföring genom att använda en lägre bandbredd. Om vi ​​kör allt i webbläsaren skulle det ge oss följande svar:

Med detta har vi avslutat denna handledning, vi såg sedan hur vi på ett enkelt sätt har förklarat vad den representerar AJAX och dess mest grundläggande applikationer med jQueryFrån och med nu återstår det bara att fortsätta undersöka och försöka införliva denna utvecklingsteknik när dess fördelar är lämpliga för våra applikationer.