Nuförtiden tenderar utvecklare att flytta ifrån jQuery och dess praktiska metoder för DOM-manipulation och Ajax-förfrågningar som gjorde den enormt populär. När det gäller Ajax-förfrågningarna, den Fetch API, eller alternativt Axios bibliotek, är nu mer populära verktyg för att utföra asynkrona operationer. Som sagt, jQuery är fortfarande mycket levande och driver nästan 70,000 XNUMX webbplatser över hela världen. Detta innebär att det fortfarande är värdefullt att veta hur man använder jQuery i utvecklarnas dagliga arbete, som att stödja äldre kodbaser eller underhålla projekt som använder jQuery som ett viktigt beroende.

Ajax är en teknik som gör det möjligt för utvecklare att göra asynkrona HTTP-förfrågningar utan att behöva uppdatera hela sidan. För att göra processen mindre besvärlig än den skulle vara i ren JavaScript, har utvecklare använt jQuery-biblioteket i flera år. I min artikel En introduktion till jQuerys stenografi Ajax-metoder, diskuterade jag några av jQuerys mest använda Ajax stenografimetoder: $.get(), $.post()och $.load(). De är bekväma metoder för att göra Ajax-förfrågningar på några rader kod.

Ibland behöver vi mer kontroll över de Ajax-samtal vi vill göra. Till exempel vill vi specificera vad som ska hända om ett Ajax-samtal misslyckas eller vi behöver utföra en Ajax-förfrågan men dess resultat behövs bara om det hämtas inom en viss tid. I sådana situationer kan vi lita på en annan funktion som tillhandahålls av jQuery, kallad $.ajax(), det är ämnet för denna handledning.

Smakämnen $.ajax() Funktion

JQuery $.ajax() funktionen används för att utföra en asynkron HTTP-förfrågan. Det lades till i biblioteket för länge sedan, existerande sedan version 1.0. De $.ajax() funktion är vad varje funktion som diskuteras i den tidigare nämnda artikeln kallar bakom scenen med hjälp av en förinställd konfiguration. Signaturerna för denna funktion visas nedan:

$.ajax(url[, settings])
$.ajax([settings])

Smakämnen url parameter är en sträng som innehåller URL:en du vill nå med Ajax-anropet, while settings är ett objekt som innehåller konfigurationen för Ajax-förfrågan.

I sin första form utför denna funktion en Ajax-förfrågan med hjälp av url parameter och alternativen som anges i settings. I den andra formen anges URL:en i settings parameter, eller kan utelämnas, i vilket fall begäran görs till den aktuella sidan.

Listan över de alternativ som accepteras av den här funktionen, som beskrivs i nästa avsnitt, är mycket lång, så jag ska hålla deras beskrivning kort. Om du vill studera deras innebörd på djupet kan du hänvisa till den officiella dokumentationen för $.ajax().

Smakämnen settings Parameter

Det finns många olika alternativ du kan ange för att böja $.ajax() till dina behov. I listan nedan kan du hitta deras namn och deras beskrivning sorterade i alfabetisk ordning:

• accepts: Innehållstypen som skickas i förfrågningshuvudet som talar om för servern vilken typ av svar den kommer att acceptera i gengäld.
• async: Ställ in det här alternativet på false för att utföra en synkron begäran.
• beforeSend: En återuppringningsfunktion för förhandsbegäran som kan användas för att ändra jqXHR objekt innan det skickas.
• cache: Ställ in det här alternativet på false för att tvinga begärda sidor att inte cachelagras av webbläsaren.
• complete: En funktion som ska anropas när begäran avslutas (efter success och error återuppringningar utförs).
• contents: Ett objekt som bestämmer hur biblioteket ska analysera svaret.
• contentType: Innehållstypen för data som skickas till servern.
• context: Ett objekt att använda som sammanhang (this) av alla Ajax-relaterade återuppringningar.
• converters: Ett objekt som innehåller dataType-to-dataType-konverterare.
• crossDomain: Ställ in den här egenskapen till true för att tvinga fram en begäran över flera domäner (som JSONP) på samma domän.
• data: Data som ska skickas till servern när Ajax-förfrågan utförs.
• dataFilter: En funktion som ska användas för att hantera råsvarsdata för XMLHttpRequest.
• dataType: Den typ av data som förväntas tillbaka från servern.
• error: En funktion som ska anropas om begäran misslyckas.
• global: Om globala Ajax-händelsehanterare ska utlösas för denna begäran.
• headers: Ett objekt med ytterligare rubriker att skicka till servern.
• ifModified: Ställ in det här alternativet på true om du vill tvinga begäran att bli framgångsrik endast om svaret har ändrats sedan den senaste begäran.
• isLocal: Ställ in det här alternativet på true om du vill tvinga jQuery att känna igen den nuvarande miljön som "lokal".
• jsonp: En sträng för att åsidosätta namnet på återuppringningsfunktionen i en JSONP-begäran.
• jsonpCallback: Anger namnet på återuppringningsfunktionen för en JSONP-begäran.
• mimeType: En sträng som specificerar mimetypen för att åsidosätta XHR-mimetypen.
• password: Ett lösenord som ska användas med XMLHttpRequest som svar på en begäran om HTTP-åtkomstautentisering.
• processData: Ställ in det här alternativet på false om du inte vill att data skickas till data alternativet (om det inte redan är en sträng) för att bearbetas och omvandlas till en frågesträng.
• scriptAttrs: Definierar ett objekt med ytterligare attribut som ska användas i en "script"- eller "jsonp"-förfrågan.
• scriptCharset: Ställer in teckenuppsättningsattributet på skripttaggen som används i begäran men gäller endast när "script"-transporten används.
• statusCode: Ett objekt med numeriska HTTP-koder och funktioner som ska anropas när svaret har motsvarande kod.
• success: En funktion som ska anropas om begäran lyckas.
• timeout: Ett tal som anger en timeout (i millisekunder) för begäran.
• traditional: Ställ in detta på true om du vill använda den traditionella stilen för paramserialisering.
• type: Typen av begäran som ska göras, som kan vara antingen "POST" eller "GET".
• url: En sträng som innehåller URL:en som begäran skickas till.
• username: Ett användarnamn som ska användas med XMLHttpRequest som svar på en begäran om HTTP-åtkomstautentisering.
• xhr: En callback för att skapa XMLHttpRequest-objektet.
• xhrFields: Ett objekt att ställa in på det inbyggda XHR-objektet.

Det är en ganska lång lista, eller hur? Tja, som utvecklare slutade du förmodligen läsa den här listan vid det femte eller sjätte elementet antar jag, men det är bra. Nästa avsnitt kommer att bli mer spännande, eftersom vi kommer att lägga $.ajax() funktion och några av dessa alternativ till handling.

Att sätta ihop allt

I det här avsnittet kommer vi att se den här funktionen och några av dess alternativ i aktion.

Ett första exempel på $.ajax()

Vi börjar med en enkel demo som återger samma kod som vi utvecklade i föregående artikel, men den här gången tar vi $.ajax(). Koden jag pratar om visas nedan för din bekvämlighet:

$('#main-menu a').on('click', function(event) { event.preventDefault(); $('#main').load(this.href + ' #main *', function(responseText, status) { if (status === 'success') { $('#notification-bar').text('The page has been successfully loaded'); } else { $('#notification-bar').text('An error occurred'); } });
});

Uppdaterar detta utdrag för att använda $.ajax() funktion får vi koden som visas nedan:

$('#main-menu a').on('click', function(event) { event.preventDefault(); $.ajax(this.href, { success: function(data) { $('#main').html($(data).find('#main *')); $('#notification-bar').text('The page has been successfully loaded');
}, error: function() { $('#notification-bar').text('An error occurred'); } });
});

Här kan du se att jag använde den första formen av funktionen. Jag har angett webbadressen att skicka förfrågan till som den första parametern och sedan ett inställningsobjekt som den andra parametern. Den senare drar nytta av bara två av de många egenskaper som diskuterades i föregående avsnitt — success och error — att specificera vad som ska göras om begäran lyckas respektive misslyckas.

Hämta ett föredrag från Joind.in med hjälp av $.ajax()

Det andra exemplet jag vill diskutera skapar en JSONP-förfrågan för att hämta viss information från en tjänst som kallas Gå med. Den senare är en webbplats där evenemangsdeltagare kan lämna feedback om ett evenemang och dess sessioner. Specifikt kommer jag att skapa ett kodavsnitt som med hjälp av $.ajax() funktion, hämtar titeln och beskrivningen av mitt föredrag Modern front-end med ögonen på en PHP-utvecklare.

Koden för att uppnå detta mål är följande:

$.ajax({ url: 'http://api.joind.in/v2.1/talks/10889', data: { format: 'json' }, error: function() { $('#info').html('<p>An error has occurred</p>'); }, dataType: 'jsonp', success: function(data) { var $title = $('<h1>').text(data.talks[0].talk_title); var $description = $('<p>').text(data.talks[0].talk_description); $('#info') .append($title) .append($description); }, type: 'GET'
});

I utdraget ovan använde jag flera av egenskaperna som anges ovan. Först och främst kan du se att jag använder den andra formen av $.ajax(), vilket gör att jag kan ange webbadressen som begäran skickas till som en egenskap (url) av objektet bokstavlig. Eftersom Joind.ins API accepterar en JSONP-begäran, ställer jag in i koden ovan vilken typ av begäran jag vill använda genom att ange dataType fast egendom. Sedan använde jag data egenskap för att definiera formatets typ som jag vill hämta från servern som krävs av API:et. Den senare kräver dock dessa data som en del av frågesträngen för en GET-förfrågan, därför anger jag också type egenskapsinställning GET som dess värde. Till slut skrev jag en error återuppringning för att visa ett meddelande vid fel, och en success återuppringning för att visa titeln och beskrivningen av föredraget om det lyckas.

En livedemo av denna kod visas nedan:

Slutsats

I den här handledningen diskuterade jag de mest kraftfulla av Ajax-funktionerna som erbjuds av jQuery, $.ajax(). Det låter dig utföra Ajax-förfrågningar med mycket kontroll över hur förfrågan skickas till servern och hur svaret behandlas. Tack vare den här funktionen har du de verktyg du behöver för att tillfredsställa alla dina projekts krav om ingen av stenografifunktionerna passar bra.

För att få en ännu bättre förståelse för den här funktionens potential uppmuntrar jag dig att leka med kodexemplen och att försöka modifiera koden för att använda några andra alternativ som accepteras av settings parameter.

Om du vill lära dig mer om JavaScript, kolla in våra JavaScript-titlar på SitePoint Premium. Ha så kul!

Källa: https://www.sitepoint.com/use-jquerys-ajax-function/?utm_source=rss