ramp succes php. Gegroet, lieve vriend! Voorbeelden van het gebruik van JSONP

accepteert (standaard: afhankelijk van dataType ).

Type: Gewoon object.
Een set sleutel/waarde-paren waarnaar wordt verzonden Aanvaarden verzoekkop. Deze header vertelt de server welk soort antwoord het verzoek als reactie zal accepteren. Houd er rekening mee dat de waarde van de parameter die is opgegeven in dataType (het type gegevens dat we van de server verwachten) wordt toegewezen aan de waarde die is opgegeven in de parameter. Om het antwoord van de server correct te verwerken, moet u bovendien een functie opgeven in de parameter converters die de geconverteerde antwoordwaarde retourneert. Bijvoorbeeld: $.ajax(( accepteert : ( mycustomtype: "application/x-some-custom-type " ) , // specificeer hoe de antwoordconverters moeten worden verwerkt : ("text mycustomtype ": function ( resultaat) ( // retourneer de geconverteerde responswaarde return newresult; ) ) ), // Verwacht gegevenstype ("mycustomtype") dataType: "mycustomtype" ) );

async (standaard: true ).

Type: Booleaans.
Standaard worden alle verzoeken asynchroon verzonden; als u synchrone verzoeken wilt organiseren, stelt u deze parameter in op false . Houd er rekening mee dat query's tussen domeinen en een element waarvan de parameter dataType is "jsonp" ondersteunen geen verzoeken in de synchrone modus. Houd er rekening mee dat u met synchrone verzoeken de browser tijdelijk kunt blokkeren door alle acties uit te schakelen terwijl het verzoek actief is.

vóórVerzenden. Type: Functie(jqXHR jqXHR,GewoonObject instellingen).
Een callback-functie die wordt aangeroepen voordat het AJAX-verzoek wordt gedaan. Met deze functie kunt u het jqXHR-object (in jQuery 1.4.x het XMLHTTPRequest-object) wijzigen voordat het wordt verzonden. Het jqXHR-object is een add-on die het XMLHttpRequest-object uitbreidt, het object bevat veel eigenschappen en methoden waarmee u completere informatie over de serverreactie kunt verkrijgen, en het object bevat ook Promise-methoden. Als de beforeSend-functie false retourneert, wordt het AJAX-verzoek geannuleerd. Sinds versie jQuery 1.5 de beforeSend-functie wordt aangeroepen, ongeacht het verzoektype.

cache (standaard: true, voor dataType "script" En "jsonp" vals).

Type: Booleaans.
Indien ingesteld op false, zorgt dit ervoor dat de opgevraagde pagina's niet door de browser in de cache worden opgeslagen. Houd er rekening mee dat false alleen correct werkt met HOOFD En KRIJGEN verzoeken.

compleet.

Type: Functie(jqXHR jqXHR, Snaar tekstStatus).
Een functie die wordt aangeroepen wanneer het verzoek eindigt (de functie wordt uitgevoerd na AJAX-gebeurtenissen "succes" of "fout"). Er worden twee parameters aan de functie doorgegeven: jqXHR(in jQuery 1.4.x-object XMLHTTPRequest) en een regel die overeenkomt met de verzoekstatus ( "succes", "niet aangepast", "geen inhoud", "fout", "time-out", "abortus", of "parserfout"). Sinds jQuery 1.5 kan de volledige parameter een reeks functies accepteren die één voor één worden aangeroepen.

inhoud.

Type: Gewoon object.
Een object dat bestaat uit string/regex-paren die bepalen hoe jQuery het antwoord zal verwerken (parseren), afhankelijk van het inhoudstype. Toegevoegd in jQuery 1.5.

contentType (standaard: "application/x-www-form-urlencoded; charset=UTF-8").

Type: Booleaans of String.
Definieert het type inhoud dat wordt opgegeven in de aanvraag bij het verzenden van gegevens naar de server. Sinds jQuery 1.6 is het mogelijk om de waarde false op te geven, in welk geval jQuery het veld in de header niet doorgeeft Inhoudstype helemaal niet.

context.

Type: Gewoon object.
Bij het uitvoeren van AJAX-callback-functies is hun uitvoeringscontext het vensterobject. Met de contextparameter kunt u de functie-uitvoeringscontext zo configureren dat $(this ) verwijst naar een specifiek DOM-element of object. Bijvoorbeeld: $.ajax(( url : "test.html ", context : $(".myClass "), // nieuwe functie-uitvoering context succes : function ()( // als het verzoek succesvol is, roep dan de functie aan $ (this .html ("Alles is in orde"); // voeg tekstinhoud toe aan het element met class.myClass ) ) );

converters

Standaard waarden:
( "* tekst ": window.String, // elk type tekst "text html": true, // tekst in html "text json": jQuery.parseJSON, // tekst in JSON "text xml": jQuery.parseXML // tekst in XML) Type: PlainObject.
Een object dat het gegevenstype bevat dat moet worden geconverteerd en hoe dit moet worden geconverteerd. De waarde van elke converter is een functie die de geconverteerde responswaarde retourneert. Toegevoegd in jQuery 1.5.

crossDomain (standaard: false voor verzoeken binnen hetzelfde domein, true voor verzoeken tussen verschillende domeinen).

Type: Booleaans.
Als u een cross-domein verzoek wilt doen terwijl u zich in hetzelfde domein bevindt (bijvoorbeeld een jsonp-verzoek), stelt u deze parameter in op true . Hierdoor kunt u bijvoorbeeld een verzoek vanaf uw server omleiden naar een ander domein. Toegevoegd in jQuery 1.5.

Type: PlainObject, of String, of Array.
Gegevens die naar de server worden verzonden. Als ze geen string zijn, worden ze geconverteerd naar een querystring. Voor KRIJGEN verzoeken, wordt de tekenreeks aan de URL toegevoegd. Om automatische verwerking te voorkomen, kunt u de parameter processData met de waarde false gebruiken. Als gegevens worden overgedragen als onderdeel van een object, moeten deze uit sleutel-waardeparen bestaan. Als de waarde een array is, serialiseert jQuery meerdere waarden met dezelfde sleutel (afhankelijk van de waarde van de traditionele parameter, waardoor het traditionele serialisatietype mogelijk wordt gemaakt op basis van de $.param-methode).

gegevensFilter.

Type: Functie(String gegevens, Snaar type) => Alles.
De functie wordt aangeroepen na de succesvolle voltooiing van een AJAX-verzoek en stelt u in staat de “ruwe” gegevens te verwerken die zijn ontvangen van het serverantwoord. Het retourneren van gegevens dient direct na verwerking te gebeuren. De functie heeft twee argumenten nodig: gegevens- gegevens ontvangen van de server in de vorm van een string en type- het type van deze gegevens (de waarde van de parameter dataType).

dataType (standaard: xml, json, script, of html).

Type: Tekenreeks.
Definieert het type gegevens dat u van de server verwacht te ontvangen. Als het gegevenstype niet is opgegeven, probeert jQuery dit te bepalen op basis van het MIME-type uit het antwoord ( XML type MIME zal resulteren in XML, vanaf jQuery 1.4 json zal een voorwerp geven JavaScript, script zal het script uitvoeren en al het andere zal als een string worden geretourneerd).


Basistypen (het resultaat wordt doorgegeven als het eerste argument aan de succes-callback-functie):

• "xml" - retourneert XML document dat kan worden weergegeven met jQuery.
• "html" - retourneert HTML als platte tekst worden tags verwerkt en uitgevoerd zodra ze in het documentobjectmodel zijn ingevoegd ( DOM).
• "script" - evalueert het antwoord als JavaScript en retourneert het als platte tekst. Schakelt caching uit door de parameter _= toe te voegen aan de querytekenreeks, zelfs als de cacheparameter true is. Dit zal de methode veranderen NA V KRIJGEN voor cross-domein verzoeken.
• "json" - evalueert het antwoord als JSON en retourneert een object JavaScript. Cross-domein "json" verzoeken worden omgezet naar "jsonp", als jsonp niet is opgegeven in de aanvraagparameters: false . Gegevens JSON worden in een strikte volgorde geparseerd en moeten voldoen aan het algemeen aanvaarde formaat, indien onjuist JSON wordt afgewezen en er wordt een fout gegenereerd. Vanaf jQuery 1.9 wordt een leeg antwoord niet geaccepteerd; de server moet NULL of () als antwoord retourneren.
• "jsonp" - laadt gegevens in het formaat JSON, met behulp van het downloadformaat JSONP. Voegt een extra parameter "?callback=?" toe aan het einde URL adressen voor het opgeven van de naam van de handlerfunctie. Schakelt caching uit door de parameter _= toe te voegen URL adres, zelfs als de cacheparameter waar is.
• "tekst" is een gewone tekstreeks.
• meerdere waarden - waarden worden gescheiden door een spatie. Sinds versie 1.5 kan jQuery het datatype dat wordt ontvangen in het Content-Type van de header omzetten naar het datatype dat u nodig heeft. Als u bijvoorbeeld wilt dat een tekstantwoord wordt geïnterpreteerd als XML, gebruikt u 'tekst-XML' voor dat gegevenstype. U kunt ook een JSONP-verzoek indienen, deze als tekst ontvangen en interpreteren als XML: "jsonp-tekst-XML" . De volgende regel zal hetzelfde doen: "jsonp XML" , jQuery zal proberen te converteren van JSONP V XML, na een mislukte poging zal proberen te converteren JSONP in de tekst en vervolgens van de tekst naar XML.

• Type: Functie(jqXHR jqXHR, Snaar tekstStatus, Snaar foutGegooid).
  Een callback-functie die wordt aangeroepen als het AJAX-verzoek niet is voltooid. De functie ontvangt drie argumenten:

  • jqXHR- jqXHR-object (in jQuery 1.4.x, XMLHttpRequest-object).
  • tekstStatus- een tekenreeks die het type fout beschrijft dat is opgetreden. Mogelijke waarden (anders dan null ) zijn dat niet "time-out", "fout", "abortus" En "parserfout".
  • foutGegooid- extra uitzonderingsobject indien opgetreden. Wanneer er een fout optreedt HTTP het argument ontvangt het tekstgedeelte van de staat, b.v. "Niet gevonden", of "Interne Server Fout".
  Sinds versie jQuery 1.5 Het is toegestaan ​​om een ​​reeks functies als parameterwaarde door te geven, en elke functie wordt op zijn beurt aangeroepen. Houd er rekening mee dat deze handler niet wordt aangeroepen voor cross-domein scripts en JSONP-verzoeken.

• globaal (standaard: true ).

  Type: Booleaans.
  Een Booleaanse parameter die bepaalt of globale AJAX-gebeurtenishandlers mogen worden aangeroepen voor dit verzoek. De standaardwaarde is waar. Als u wilt voorkomen dat globale gebeurtenishandlers zoals .ajaxStart() of .ajaxStop() worden aangeroepen, gebruik dan false .

  kopteksten (standaard: ( ) ).

  Type: Gewoon object.
  Een object dat sleutel/waarde-paren van aanvullende verzoekheaders bevat die samen met het verzoek moeten worden verzonden met behulp van het XMLHttpRequest-object. Houd er rekening mee dat de titel X-Requested-With: XMLHttpRequest wordt altijd toegevoegd, maar de waarde van XMLHttpRequest kan standaard worden gewijzigd met deze parameter. Headerwaarden kunnen ook worden overschreven door de parameter beforeSend. Toegevoegd in jQuery 1.5.

  ifModified (standaard: false ).

  Type: Booleaans.
  Standaard is de waarde false , negeert de headervelden van het HTTP-verzoek en wanneer deze is ingesteld op true, wordt het AJAX-verzoek overgedragen naar de succesvolle status ( succes), alleen als het antwoord van de server sinds het laatste verzoek is gewijzigd. Validatie wordt uitgevoerd door het veld Laatst gewijzigde header aan te vinken. Sinds versie jQuery 1.4, naast de Last-Modified-header is ook de “etag” aangevinkt ( entiteitstag) is een privé-ID die door een webserver wordt toegewezen aan een specifieke versie van een bron die op een URL wordt gevonden. Als de broninhoud voor dit adres verandert in een nieuw adres, wordt er een nieuwe ETAG toegewezen.

  isLocal (standaard: afhankelijk van de huidige locatie).

  Type: Booleaans.
  Gebruik true om de huidige omgeving als "lokaal" te definiëren (bijvoorbeeld file:///url), zelfs als jQuery deze standaard niet als zodanig herkent. De volgende protocollen worden momenteel als lokaal erkend: bestand, *-verlenging En widget. Als u de parameter isLocal moet wijzigen, is het raadzaam dit eenmalig te doen met behulp van de functie $.ajaxSetup(). Toegevoegd in jQuery 1.5.1.

  Type: Booleaans of String.
  Overschrijft de naam van de callback-functie in JSONP verzoek. Deze waarde wordt gebruikt in plaats van "callback" ( "http://domein.ru/test.php?callback=?") als onderdeel van de queryreeks in de URL. De waarde (jsonp: "onLoad") wordt bijvoorbeeld aan de server doorgegeven als de volgende querytekenreeks "http://domein/test.php?onLoad=?".
  Sinds jQuery 1.5 voorkomt het instellen van de jsonp-parameter op false dat de tekenreeks "?callback" wordt toegevoegd aan de URL, of wordt geprobeerd het antwoord op te lossen. In dit geval moet u bovendien de waarde van de jsonpCallback-parameter opgeven, bijvoorbeeld: ( jsonp : false , jsonpCallback : "callbackName " ) Als u om veiligheidsredenen het doel van uw AJAX-verzoeken niet vertrouwt, wordt het aanbevolen om stel de waarde van de jsonp-parameter in op false .

  jsonpTerugbellen.

  Type: Tekenreeks of Functie.
  Specificeert de naam van de callback-functie voor JSONP verzoek. Deze waarde wordt gebruikt in plaats van een willekeurige naam die automatisch wordt gegenereerd en toegewezen door jQuery. Het wordt aanbevolen dat jQuery zelf de unieke naam genereert, dit maakt het gemakkelijker om verzoeken te beheren en mogelijke fouten af ​​te handelen. In sommige gevallen zal het instellen van uw eigen functienaam de browsercaching verbeteren KRIJGEN verzoeken.
  Sinds jQuery 1.5 kunt u een functie opgeven als de waarde van de parameter jsonpCallback. In dit geval moet de waarde van de parameter jsonpCallback worden ingesteld op de retourwaarde van deze functie.

  methode (standaard: "KRIJGEN").

  Type: Tekenreeks.
  Methode HTTP, gebruikt voor de query (bijvoorbeeld "NA", "KRIJGEN", "NEERZETTEN"). Toegevoegd in jQuery 1.9.0.

  mime type.

  Type: Tekenreeks.
  Een MIME-type dat het standaard MIME-type overschrijft dat is opgegeven in het XHR-object. Toegevoegd in jQuery 1.5.1.

  wachtwoord.

  Type: Tekenreeks.
  Het wachtwoord dat wordt gebruikt met XMLHttpRequest in het antwoord op het toegangsverificatieverzoek HTTP.

  processData (standaard: waar).

  Type: Booleaans.
  Standaard worden gegevens die als object aan de gegevensparameter worden doorgegeven, verwerkt en geconverteerd naar een queryreeks die geschikt is voor het standaardgegevenstype "application/x-www-form-urlencoded". Als u DOMDocument of andere onverwerkte gegevens moet verzenden, stelt u deze parameter in op false .

  scriptCharset.

  Type: Tekenreeks.
  Stelt het tekensetkenmerk (tekencodering) in op de HTML-tag die in het verzoek wordt gebruikt. Wordt gebruikt wanneer de codering op de pagina verschilt van de codering van het externe script. Houd er rekening mee dat de parameter scriptCharset alleen van toepassing is op verzoeken tussen domeinen met een parameter type met de waarde "KRIJGEN"(standaard) en dataType-parameter met waarde "jsonp", of "script".

  statusCode (standaard: ( ) ).

  Type: Gewoon object.
  Numerieke codes-object HTTP en functies die worden aangeroepen wanneer de serverresponscode de juiste waarde heeft (een specifieke code HTTP). De volgende functie wordt bijvoorbeeld aangeroepen als er een responscode wordt ontvangen van de server 404 , of "Niet gevonden"(standaard HTTP-antwoordcode die aangeeft dat de client met de server kon communiceren, maar de server de gegevens niet kon vinden zoals gevraagd.): $.ajax(( statusCode : ( 404: function ()( // execute function if HTTP responscode 404 alert("pagina niet gevonden ");, 403: function ()( // voer de functie uit als de HTTP-antwoordcode 403 alert("toegang geweigerd"); ) ) ) );

  succes.

  Type: Functie (alles gegevens, Snaar tekstStatus, jqXHR jqXHR).
  Een callback-functie die wordt aangeroepen als het AJAX-verzoek succesvol is. Er worden drie argumenten aan de functie doorgegeven:

  • gegevens- gegevens geretourneerd door de server. De gegevens worden opgemaakt volgens de parameters dataType of dataFilter , indien opgegeven
  • tekstStatus- een string die de status van het verzoek beschrijft.
  • jqXHR- jqXHR-object (tot versie jQuery 1.4.x XMLHttpRequest-object).
  Sinds versie jQuery 1.5 Het is toegestaan ​​om een ​​reeks functies als parameterwaarde door te geven, en elke functie wordt op zijn beurt aangeroepen.

• time-out.

  Soort: Nummer.
  Installeert binnen milliseconden verzoek time-out. Betekenis 0 betekent dat er geen time-out is ingesteld. Houd er rekening mee dat deze parameter de time-outwaarde overschrijft die is ingesteld met de functie $.ajaxSetup(). De wachttijd begint op het moment dat de methode $.ajax() wordt aangeroepen.

  traditioneel.

  Type: Booleaans.
  Als u van plan bent traditionele serialisatie-opties te gebruiken (geschikt voor gebruik in string URL verzoek of verzoek AJAX) en stel vervolgens de waarde van deze parameter in op true .

  type (standaard: "KRIJGEN").

  Type: Tekenreeks.
  Een alias voor de methodeparameter. Als u versies gebruikt, moet u type gebruiken jQuery vóór 1.9.0.

  url (standaard: huidige pagina).

  Type: Tekenreeks.
  Een regel met URL het adres waarnaar het verzoek wordt verzonden.

  gebruikersnaam.

  Type: Tekenreeks.
  De gebruikersnaam die moet worden gebruikt met XMLHttpRequest in het antwoord op het toegangsverificatieverzoek HTTP.

  xhr (standaard: ActiveXObject, wanneer beschikbaar ( Internet Explorer), in andere gevallen XMLHttpRequest .

  Typ: Functie() .
  Callback om een ​​XMLHttpRequest-object te maken. Met deze parameter kunt u het XMLHttpRequest-object overschrijven om uw eigen implementatie te leveren.

  xhrVelden.

  Type: Gewoon object.
  Een object dat de paren veld_naam:veld_waarde bevat en dat wordt ingesteld op het XHR-object. U kunt bijvoorbeeld definiëren of aanvragen voor meerdere domeinen moeten worden gemaakt met inloggegevens zoals koekje, autorisatieheaders of TLS-certificaten: $.ajax(( url: "cross_domain_url ", // het adres waarnaar het verzoek zal worden verzonden xhrFields: ( withCredentials: true // ondersteund in jQuery 1.5.1 + ) ) );

We leerden over de directe methoden van jQuery voor het werken met Ajax (zoals get(), post() en load()). Dit artikel beschrijft de jQuery Ajax API op laag niveau.

De term laag niveau lijkt erop te wijzen dat u gebruik maakt van de verborgen mogelijkheden van de query-engine, maar dat is niet helemaal waar. De hier beschreven methoden zijn minder handig dan de eerder besproken methoden, maar met een beetje extra inspanning kunt u de query zo configureren dat deze precies aan uw behoeften voldoet, wat niet altijd mogelijk is met directe of hulpmethoden.

Het maken van query's met behulp van een API op laag niveau is niet veel moeilijker dan het gebruik van directe of hulpmethoden. Het verschil is dat u met deze aanpak veel andere aspecten van het verzoek kunt controleren en veel meer informatie kunt krijgen over het verzoek dat wordt uitgevoerd. Centraal in de low-level API staat de methode ajax(), waarvan hieronder een eenvoudig voorbeeld wordt weergegeven (met behulp van het bronbestand en het bestand mydata.json dat in het vorige artikel is beschreven):

$(function() ( $.ajax("mydata.json", ( success: function(data) ( var template = $("#flowerTmpl'); template.tmpl(data.slice(0, 3)).appendTo ("#row1"); template.tmpl(data.slice(3)).appendTo("#row2" ));

De argumenten voor de methode ajax() zijn de aangevraagde URL en een gegevensweergaveobject waarvan de eigenschappen een reeks sleutelwaardeparen definiëren, die elk een verzoekparameter definiëren. Hier bevat het object dat aan de methode ajax() wordt doorgegeven slechts één parameter, success, die de functie specificeert die wordt aangeroepen als het verzoek succesvol is.

In dit voorbeeld vragen we het bestand mydata.json op bij de server en gebruiken dit samen met een gegevenssjabloon om elementen te maken en deze in het document in te voegen, zoals we in het vorige artikel hebben gedaan met behulp van directe methoden. Standaard creëert de ajax()-methode een HTTP GET-verzoek, d.w.z. dit voorbeeld is gelijk aan het gebruik van de methoden get() en getJSON().

De methode ajax() retourneert een jqXHR-object dat kan worden gebruikt om details over het verzoek te verkrijgen en waarmee interactie kan worden gevoerd. Het jqXHR-object is een wrapper rond het XMLHttpRequest-object dat de basis vormt voor browser Ajax-ondersteuning.

Voor de meeste Ajax-bewerkingen kan het jqXHR-object eenvoudigweg worden genegeerd, wat ik aanbeveel. Dit object wordt gebruikt in gevallen waarin het nodig is om meer volledige informatie over het antwoord van de server te verkrijgen dan wat op andere manieren kan worden verkregen. Het kan ook worden gebruikt om de parameters van een Ajax-verzoek te configureren, maar dit is gemakkelijker te doen met behulp van de instellingen die beschikbaar zijn voor de methode ajax(). De eigenschappen en methoden van het jqXHR-object worden beschreven in de onderstaande tabel:

Het jqXHR-object verschijnt op verschillende plaatsen in de code. Het wordt eerst gebruikt om het resultaat op te slaan dat wordt geretourneerd door de methode ajax(), zoals weergegeven in het onderstaande voorbeeld:

$(function() ( var jqxhr = $.ajax("mydata.json", ( success: function(data) ( var template = $("#flowerTmpl'); template.tmpl(data.slice(0, 3) ).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2") )); jqxhr.status + " " + jqxhr.statusText); if (jqxhr.readyState == 4) ( console.log("Verzoek voltooid: " + jqxhr.responseText); clearInterval(timerID); ) ), 100); ;

In dit voorbeeld slaan we het resultaat op dat wordt geretourneerd door de methode ajax() en gebruiken we vervolgens de methode setInterval() om elke 100 ms verzoekinformatie uit te voeren. Het gebruik van het resultaat dat wordt geretourneerd door de methode ajax() verandert niets aan het feit dat het verzoek asynchroon wordt uitgevoerd. Er moeten dus voorzorgsmaatregelen worden genomen bij het werken met het jqXHR-object. Om de status van het verzoek te controleren, gebruiken we de eigenschap readyState (de waarde van 4 komt overeen met de voltooiing van het verzoek) en geven we het serverantwoord op de console weer.

Voor dit scenario ziet de console-uitvoer er als volgt uit (deze kan er in uw browser enigszins anders uitzien):

Ik gebruik het jqXHR-object alleen in zeldzame gevallen en doe het helemaal niet als dit het resultaat is dat wordt geretourneerd door de methode ajax(). jQuery vuurt automatisch een Ajax-verzoek af bij het aanroepen van de ajax()-methode, dus ik vind de mogelijkheid om de verzoekparameters aan te passen niet erg nuttig. Als ik met het jqXHR-object wil werken (meestal om meer informatie te krijgen over de serverreactie), doe ik dit meestal via gebeurtenishandlerparameters, waar we het hierna over zullen hebben. Ze geven mij informatie over de status van het verzoek, waardoor ik het niet meer hoef uit te zoeken.

Een van de belangrijkste beschikbare opties is URL-parameter, waarmee u een URL voor het verzoek kunt opgeven. U kunt deze optie gebruiken als alternatief voor het doorgeven van een URL als argument aan de methode ajax(), zoals weergegeven in het onderstaande voorbeeld:

$(function() ( $.ajax(( url: "mydata.json", success: function(data) ( var template = $("#flowerTmpl'); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2" ));

Gebruik om het vereiste type query dat moet worden uitgevoerd op te geven typeparameter. Standaard worden GET-verzoeken gedaan, zoals in het vorige voorbeeld. Hieronder vindt u een voorbeeld van het gebruik van de ajax()-methode om een ​​POST-verzoek te maken en formuliergegevens naar de server te verzenden:

$(function() ( $.ajax(( url: "mydata.json", success: function(data) ( var template = $("#flowerTmpl'); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); // Klik op de handler op de knop "Bestellen" $("knop").klik (function( e) ( $.ajax(( url: "phphandler.php", type: "post", data: $("form").serialize(), succes: processServerResponse, dataType: "json" )); e.preventDefault () )); function processServerResponse(data) ( // Verberg aanvankelijk alle producten var inputElems = $("div.dcell").hide(); for (var prop in data) ( // Toon alleen die producten, de volgorde waarvan groter is dan 0 // (het antwoord van de server bevat alleen dergelijke producten) var filtered = inputElems.has("input") .appendTo("#row1").show( ) // De basiselementen verbergen van het formulier $( "#buttonDiv, #totalDiv").remove(); // Nieuwe elementen uit de sjabloon weergeven totalTmpl $("#totalTmpl").tmpl(data).appendTo("body" )); Totaal aantal bestellingen: $(totaal) Bestelling .png"/> $(naam):

Ik zal dit voorbeeld hier niet in detail beschrijven, omdat... we hebben het in het vorige artikel in detail bekeken (alleen met behulp van de methode post()). Ik merk alleen op dat we hier, naast het type, nog een aantal parameters hebben gebruikt. Om het doel van het POST-verzoek te specificeren, wordt de eerder beschreven url-parameter gebruikt. De te verzenden gegevens worden gespecificeerd met behulp van de dataparameter, waarvan de waarde wordt ingesteld met behulp van de serialize()-methode die in het vorige artikel is beschreven. Het type gegevens dat van de server wordt ontvangen, wordt opgegeven in de parameter dataType.

Met verschillende parameters kunt u functies opgeven voor het afhandelen van gebeurtenissen die kunnen worden geactiveerd gedurende de levenscyclus van een Ajax-verzoek. Op deze manier specificeert u de callback-functies die zo'n belangrijke rol spelen bij Ajax-verzoeken. U bent al bekend met een ervan als u de succesparameter in het vorige voorbeeld in ogenschouw neemt. De lijst met parameters die aan gebeurtenissen zijn gekoppeld, samen met hun korte beschrijvingen, wordt weergegeven in de onderstaande tabel:

In de bovenstaande voorbeelden werden bij gebruik van de succesparameter twee argumenten weggelaten uit de functieaanroep: een bericht dat het resultaat van het verzoek beschrijft en een jqXHR-object. Hieronder vindt u een voorbeeld van het gebruik van een functie waaraan deze argumenten moeten doorgegeven worden:

$(function() ($.ajax(( url: "mydata.json", succes: function(data, status, jqxhr) ( console.log("Status: " + status); console.log("jqXHR status: " + jqxhr.status + " " + jqxhr.statusText); console.log(jqxhr.getAllResponseHeaders()); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ))); ));

Het statusargument is een tekenreeks die de uitkomst van het verzoek beschrijft. De callback-functie die we specificeren met behulp van de succesparameter wordt alleen uitgevoerd voor succesvolle verzoeken, dus de waarde van dit argument is meestal succes. De uitzondering hierop is wanneer u de parameter ifModified gebruikt, zoals hieronder beschreven.

De callback-functies voor alle Ajax-gebeurtenissen volgen hetzelfde patroon, maar dit argument is vooral nuttig voor een aantal andere gebeurtenissen.

Het laatste argument is het jqXHR-object. U hoeft de status van het verzoek niet te achterhalen voordat u met dit object gaat werken, omdat u weet dat de functie alleen wordt uitgevoerd als het verzoek slaagt. In dit voorbeeld wordt het jqXHR-object gebruikt om informatie te verkrijgen over de status van het verzoek en de headers die de server in het antwoord heeft opgenomen, en om deze informatie naar de console af te drukken.

In dit geval ziet het resultaat er als volgt uit (afhankelijk van welke server u gebruikt, heeft u mogelijk een andere set headers):

De parameter error wordt gebruikt om een ​​functie op te geven die moet worden aangeroepen als de aanvraag mislukt. Een overeenkomstig voorbeeld wordt hieronder gegeven:

Fout (kleur: rood; rand: medium effen rood; opvulling: 4px; marge: auto; breedte: 200px; tekst uitlijnen: midden)

$(function() ( $.ajax(( url: "NoSuchFile.json", succes: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); fout: function(jqxhr, status, errorMsg) ( $("") .text( "Status : " + status + " Fout: " + errorMsg).insertAfter("h1" ));

Hier wordt het bestand NoSuchFile.json opgevraagd, dat niet op de server aanwezig is, en daarom kan het verzoek uiteraard niet worden voltooid, waardoor de functie wordt aangeroepen die is opgegeven met de parameter error. De argumenten voor deze functie zijn het jqXHR-object, het foutstatusbericht en het foutbericht dat wordt ontvangen in het serverantwoord. Binnen deze functie wordt een div-element aan het document toegevoegd dat de waarden van de status- en errorMsg-argumenten weergeeft, zoals weergegeven in de afbeelding:

Met de parameter beforeSend kunt u een functie opgeven die wordt aangeroepen voordat aanvragen worden verzonden. Hierdoor kunt u de aanvraag op het laatste moment configureren door parameters toe te voegen of te vervangen die zijn doorgegeven aan de methode ajax() (wat vooral handig kan zijn als meerdere aanvragen hetzelfde object gebruiken dat de vereiste parameterwaarden bevat). Een voorbeeld van het gebruik van deze aanpak wordt hieronder weergegeven:

$(function() ( $.ajax(( success: function(data) ( var template = $("#flowerTmpl'); template.tmpl(data.slice(0, 3)).appendTo("#row1") ; template.tmpl(data.slice(3)).appendTo("#row2"); fout: function(jqxhr, status, errorMsg) ( $("") .text("Status: " + status + " Fout: " + errorMsg) .insertAfter("h1"); ), beforeSend: function(jqxhr, instellingen) ( settings.url = "mijndata.json"; ) )); ));

De argumenten voor deze functie zijn een jqXHR-object (wat handig kan zijn voor het aanpassen van verzoekheaders of het annuleren van het verzoek voordat het wordt verzonden) en een object dat de parameters bevat die zijn doorgegeven aan de ajax()-methode. In dit voorbeeld wordt de URL voor het Ajax-verzoek ingesteld met behulp van de parameter beforeSend.

In de voorgaande voorbeelden hebben we gereageerd op het optreden van gebeurtenissen die verband houden met Ajax-verzoeken door een enkele functie aan te roepen, maar in de parameters success, error, complete en beforeSend kunt u een reeks functies specificeren, die elk zullen worden uitgevoerd wanneer de corresponderende gebeurtenis wordt geactiveerd. Een eenvoudig voorbeeld hiervan vindt u hieronder:

$(function() ( $.ajax(( success: , beforeSend: function(jqxhr, settings) ( settings.url = "mydata.json"; ) )); function processData(data, status, jqxhr) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) function reportStatus(data, status, jqxhr) ( console.log("Status: " + status + " Resultaatcode: " + jqxhr.status); ) ));

In dit voorbeeld is de succesparameter ingesteld op een array die bestaat uit twee functies, waarvan er één gegevens gebruikt om elementen aan het document toe te voegen, en de tweede informatie naar de console afdrukt.

Met de contextparameter kunt u het element opgeven dat aan de variabele this wordt toegewezen wanneer de gebeurtenishandler wordt aangeroepen. Dit kan worden gebruikt om toegang te krijgen tot doelelementen in een document zonder ze in een handlerfunctie te hoeven selecteren. Een overeenkomstig voorbeeld wordt hieronder gegeven:

$(function() ( $.ajax(( success: function(data) ( var template = $("#flowerTmpl'); template.tmpl(data.slice(0, 3)).appendTo("#row1") ; template.tmpl(data.slice(3)).appendTo("#row2"); beforeSend: function(jqxhr, instellingen) ( settings.url = "mijndata.json"; ), context: $("h1 ") , compleet: function(jqxhr, status) ( var color = status == "succes" ? "groen": "rood"; this.css("border", "dikke vaste stof" + kleur); ) ))) ;

Hier wordt de contextparameter ingesteld op een jQuery-object dat de h1-elementen van het document bevat. In de functie die wordt gedefinieerd door de volledige parameter, framen we de geselecteerde elementen (in dit geval het element, aangezien er slechts één h1-element in het document staat) door de methode css() aan te roepen op het jQuery-object (hiernaar wordt verwezen). De randkleur wordt bepaald op basis van de aanvraagstatus.

De contextparameter kan worden gebruikt om elk object als context in te stellen, en u bent verantwoordelijk voor het uitvoeren van alleen geldige bewerkingen op dat object. Als u bijvoorbeeld de context instelt op een HTMLElement, moet u dat object doorgeven aan de functie $() voordat u er jQuery-methoden op aanroept.

Er is een groep parameters waarmee u de basisinstellingen van een Ajax-verzoek kunt uitvoeren (we hebben er hierboven enkele besproken, URL en type). Van alle beschikbare opties zijn deze het minst interessant en hun namen spreken vooral voor zich. De betreffende parameters worden weergegeven in de onderstaande tabel:

Gebruikers realiseren zich vaak niet eens dat Ajax-verzoeken worden uitgevoerd, en daarom is het specificeren van een acceptabele time-outduur geen slecht idee, omdat dit gebruikers zal behoeden voor het vervelende wachten totdat een onbekend proces is voltooid. Hieronder vindt u een voorbeeld van het instellen van een time-out voor een verzoek:

$(function() ($.ajax(( time-out: 5000, headers: ( "X-HTTP-Method-Override": "PUT")), succes: function(data) ( var template = $("#flowerTmpl") ; template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); .log("Fout: " + status);

In dit voorbeeld stelt de time-outparameter de maximale time-outduur in op 5 seconden. Als het verzoek niet binnen deze tijd is voltooid, wordt de functie die is opgegeven met de foutparameter aangeroepen en wordt de foutcode weergegeven die is opgegeven door de statusparameter.

De timer start onmiddellijk nadat een verzoek naar de browser is verzonden, en de meeste browsers stellen limieten aan het aantal verzoeken dat tegelijkertijd kan worden uitgevoerd. Dit betekent dat er een risico bestaat dat tegen de tijd dat de time-out verstrijkt, het verzoek niet eens actief zal zijn. Om dit te voorkomen, moet u rekening houden met browserbeperkingen en de grootte en verwachte duur van eventuele andere actieve Ajax-verzoeken.

Bovendien gebruikt dit voorbeeld hieronder de parameter headers om een ​​header aan de aanvraag toe te voegen. Het gegevensweergaveobject wordt gebruikt om kopteksten op te geven. De hier gebruikte header kan handig zijn voor het maken van webapplicaties die de REST-architectuurstijl ondersteunen, zolang de server deze correct herkent.

In de volgende secties worden de nuttigste en opmerkelijkste geavanceerde opties beschreven die van toepassing zijn op Ajax-verzoeken. Ze worden meestal zelden gebruikt, maar als ze nodig zijn, zijn ze onmisbaar. Met deze opties kunt u de manier waarop jQuery met Ajax samenwerkt, verfijnen.

De modus voor het uitvoeren van de query wordt bestuurd met behulp van asynchrone parameter. De standaardwaarde true voor deze parameter betekent dat het verzoek wordt uitgevoerd in de asynchrone modus, terwijl de waarde false de synchrone modus is.

Wanneer een verzoek synchroon wordt uitgevoerd, gedraagt ​​de methode ajax() zich als een normale functie en gaat de browser pas verder met het uitvoeren van andere scriptinstructies nadat het verzoek is uitgevoerd.

Door het gebruiken van ifModified-parameter Het is mogelijk om ervoor te zorgen dat gegevens alleen worden ontvangen als deze sinds het laatste verzoek zijn gewijzigd. Dit gedrag wordt bepaald door de Last-Modified-header. Dit vermijdt nutteloze gegevensoverdrachten die de gebruiker geen nieuwe informatie opleveren in vergelijking met wat hij al heeft. Standaard is ifModified false, wat jQuery vertelt de Last-Modified-header te negeren en de gegevens toch aan te leveren.

Hieronder vindt u een voorbeeld van het gebruik van deze parameter:

$(function() ( $("button").click(function(e) ( $.ajax("mydata.json", ( ifModified: true, success: function(data, status) ( if (status == " succes") ( $("#row1, #row2").children().remove(); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo( "#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); else if (status == "niet gewijzigd") ($("img").css("border" , "dik effen groen");

In dit voorbeeld wordt de parameter ifModified ingesteld op true. De succesfunctie wordt altijd aangeroepen, maar als de inhoud niet is gewijzigd sinds de laatste keer dat deze werd opgevraagd, is het data-argument ongedefinieerd en het statusargument niet-gewijzigde waarde.

In dit geval worden de uitgevoerde acties bepaald door de waarde van het statusargument. Als de waarde van dit argument succes is, wordt het data-argument gebruikt om elementen aan het document toe te voegen. Als het statusargument notmodified is, gebruiken we de css()-methode om elementen te framen die al in het document aanwezig zijn.

Als reactie op de klikgebeurtenis die aan de knop is gekoppeld, wordt de methode ajax() aangeroepen. Dit maakt het mogelijk om dezelfde zoekopdracht meerdere keren te herhalen om het effect van de parameter ifModified aan te tonen, zoals weergegeven in de afbeelding:

Hoe nuttig deze optie ook is, ik raad aan deze met voorzichtigheid te gebruiken. Als een verzoek wordt verzonden als gevolg van een actie van een gebruiker (bijvoorbeeld het klikken op een knop), bestaat de mogelijkheid dat de gebruiker op de knop heeft geklikt omdat het vorige verzoek niet is voltooid zoals verwacht.

Stel u voor dat u gegevens opvraagt, maar dat de methode die is opgegeven in de succesparameter een fout bevat die verhindert dat de inhoud van het document correct wordt bijgewerkt. Vervolgens is uw volgende actie het opnieuw proberen op de knop te klikken om het verwachte resultaat te bereiken. Als u de parameter ifModified slecht gebruikt, kunt u de acties van de gebruiker negeren, waardoor deze gedwongen wordt serieuzere actie te ondernemen om het probleem op te lossen.

statusCode-parameter Hiermee kunt u opties voor verdere acties selecteren, afhankelijk van de responscode op HTTP-verzoeken. Het kan worden gebruikt in plaats van de succes- en foutparameters, of als aanvulling daarop. Hieronder wordt een voorbeeld gegeven van onafhankelijk gebruik van de parameter statusCode:

$(function() ( $.ajax(( url: "mijndata.json", statusCode: ( 200: function(data) ( var template = $("#flowerTmpl'); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); 404: function(jqxhr, status, errorMsg) ( $("") .text ("Status: " + status + " Fout: " + errorMsg) .insertAfter("h1" ) );

Hier wordt de parameter statusCode gespecificeerd als een object dat een relatie tot stand brengt tussen responscodes voor HTTP-verzoeken en de bijbehorende functies die op de server moeten worden uitgevoerd. Welke argumenten aan functies worden doorgegeven, hangt af van het feit of de responscode een succesvol verzoek of een fout weerspiegelt.

Als de code (bijvoorbeeld 200) overeenkomt met een succesvol verzoek, zijn de argumenten dezelfde als die welke zouden worden doorgegeven aan de functie die is opgegeven door de succesparameter. Anders (bijvoorbeeld een 404-antwoordcode die aangeeft dat het opgevraagde bestand niet is gevonden) zijn de argumenten dezelfde als die welke zouden worden doorgegeven aan de functie die is opgegeven door de parameter error.

Zoals u kunt zien, biedt deze tool geen directe informatie over responscodes. Ik gebruik het vaak bij het debuggen van browser-server-interacties, meestal om erachter te komen waarom jQuery zich niet gedraagt ​​zoals ik dat wil. In dit geval gebruik ik de statusCode-parameter naast de succes- en foutparameters en voer ik de informatie uit naar de console. Als deze parameters samen worden gebruikt, worden eerst de succes- en foutfuncties uitgevoerd en vervolgens worden de functies die zijn gedefinieerd door de parameter statusCode uitgevoerd.

Door het gebruiken van dataFilter-parameter u kunt een functie opgeven die wordt aangeroepen om de door de server geretourneerde gegevens vooraf op te schonen. Deze tool is onmisbaar in gevallen waarin de gegevens die door de server worden verzonden niet geheel bevredigend voor u zijn, hetzij omdat deze op een ongepaste manier zijn geformatteerd, of omdat deze gegevens bevatten die u niet wilt verwerken.

Deze tool helpt me enorm bij het werken met Microsoft ASP.NET-servers die externe gegevens aan JSON-gegevens toevoegen. Het verwijderen van dergelijke gegevens met behulp van de parameter dataFilter vereist slechts minimale inspanning. Hieronder vindt u een voorbeeld van het gebruik van de parameter dataFilter:

$(function() ( $.ajax(( url: "mydata.json", success: function(data) ( var template = $("#flowerTmpl'); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); dataType: "json", dataFilter: function(data, dataType) ( if (dataType = = " json") ( var filteredData = $.parseJSON(data); filteredData.shift(); return JSON.stringify(filteredData.reverse()); ) else ( return data; ) ));

De functie geeft de gegevens door die zijn ontvangen van de server en de waarde van de parameter dataType. Als dataType niet wordt gebruikt, wordt het tweede argument ingesteld op ongedefinieerd. Het is jouw taak om de gefilterde gegevens terug te sturen. In dit voorbeeld gaat onze aandacht uit naar gegevens in JSON-formaat:

Var gefilterdeData = $.parseJSON(data); gefilterdeData.shift(); return JSON.stringify(gefilterdeData.reverse()); ...

Om het voorbeeld illustratiever te maken, voert het enkele extra bewerkingen uit. Eerst worden de JSON-gegevens geparseerd in een JavaScript-array met behulp van de jQuery parseJSON-methode. Vervolgens wordt het eerste element uit de array verwijderd met behulp van de shift()-methode, en wordt de volgorde van de overige elementen omgekeerd met behulp van de reverse()-methode.

Het enige wat de functie hoeft te doen is een string retourneren, dus we roepen JSON.stringify() aan, wetende dat jQuery de gegevens naar een JavaScript-object zal converteren voordat de succesfunctie wordt aangeroepen. Dit voorbeeld demonstreerde de mogelijkheid om een ​​element uit een array te verwijderen, maar afhankelijk van de situatie konden we elk ander type verwerking uitvoeren.

Het eindresultaat wordt weergegeven in de figuur:

Ik heb een recensie van een van mijn favoriete instellingen voor het laatst bewaard. Het is je misschien opgevallen dat jQuery automatisch een aantal handige conversies uitvoert bij het ophalen van bepaalde gegevenstypen. Bij het ontvangen van JSON-gegevens biedt jQuery bijvoorbeeld een succesfunctie die een JavaScript-object gebruikt in plaats van de originele onbewerkte JSON-tekenreeks.

Om dergelijke transformaties te beheren, wordt het gebruikt converters parameter. De waarde van deze parameter is een object dat een mapping tot stand brengt tussen gegevenstypen en functies die worden gebruikt om deze te verwerken. In het onderstaande voorbeeld ziet u hoe u deze optie kunt gebruiken om HTML-gegevens automatisch naar een jQuery-object te converteren:

$(function() ($.ajax(( url: "flowers.html", // In dit voorbeeld laden we HTML-opmaak, geen JSON-gegevenssucces: function(data, status, jqxhr) ( var elems = data.filter( "div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2"); ": functie(gegevens) ( return $(gegevens); ) ) ));

In dit voorbeeld wordt een functie geregistreerd voor het gegevenstype tekst html. Let op de ruimte tussen de componenten van het opgegeven MIME-type (in tegenstelling tot de tekst/html-notatievorm). De functie accepteert gegevens ontvangen van de server en retourneert de geconverteerde gegevens. In dit geval bestaat de gegevenstransformatie uit het doorgeven van het HTML-fragment in het bestand bloemen.html aan de functie $() en het retourneren van het resultaat. Dit betekent dat de normale jQuery-methoden van toepassing zijn op het object dat wordt doorgegeven als het gegevensargument voor succes.

Wanneer u met dataconverters werkt, kunt u zich te veel laten meeslepen. Ik probeer altijd de verleiding te vermijden om met deze functies meer te doen dan nodig is. Soms kom ik bijvoorbeeld in de verleiding om een ​​sjabloon toe te passen op JSON-gegevens en de resulterende HTML-elementen terug te geven. Hoewel deze techniek erg handig is, heeft u er weinig aan als iemand anders uw code probeert uit te breiden of als u bijvoorbeeld later zelf een intensieve gegevensverwerking moet uitvoeren om deze in de oorspronkelijke vorm te krijgen.

Nu u bekend bent met de ajax()-methode en de beschikbare opties om ermee te werken, kunnen we een paar aanvullende methoden bekijken die jQuery biedt om het gemakkelijker te maken om verzoeken aan te passen.

Met de methode ajaxSetup() kunt u parameterwaarden instellen die standaard in alle Ajax-verzoeken worden gebruikt, waardoor u niet bij elk verzoek parameters hoeft te configureren. Een voorbeeld van het gebruik van deze methode wordt hieronder gegeven:

") .text("Status: " + status + " Error: " + errorMsg) .insertAfter("h1"); ), converters: ("text html": function(data) ( return $(data); ) ) )); $.ajax(( url: "bloemen.html", succes: function(data, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice( 0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2" ));

De methode ajaxSetup() wordt aangeroepen met de functie jQuery $ op dezelfde manier als de methode ajax() werd aangeroepen. Het argument voor de methode ajaxSetup() is een object dat de parameterwaarden bevat die u standaard wilt gebruiken voor alle Ajax-verzoeken. In dit voorbeeld stellen we standaardwaarden in voor de parameters time-out, global, error en converters.

Nadat de methode ajaxSetup() is aangeroepen, hoeven we alleen de waarden te definiëren van de parameters die we willen wijzigen, of van de parameters die niet standaard worden opgegeven. Dit levert een aanzienlijke tijdsbesparing op in gevallen waarin u veel query's moet uitvoeren met dezelfde parameterwaarden.

De methode ajaxSetup() definieert bdie van toepassing zijn op alle Ajax-verzoeken. De mogelijkheid om parameters voor individuele Ajax-verzoeken dynamisch te configureren wordt geboden door de ajaxPrefilter() -methode. Een voorbeeld van het gebruik van deze methode wordt hieronder gegeven:

$(function() ( $.ajaxSetup(( time-out: 15000, globaal: false, error: function(jqxhr, status, errorMsg) ( $("") .text("Status: " + status + " Error: " + errorMsg) .insertAfter("h1"); converters: ("text html": function(data) ( return $(data); ) ) )); ) ( if (originalSettings.dataType == "html") ( settings.timeout = 2000; ) else ( jqxhr.abort(); ) )) $.ajax(( url: "bloemen.html", dataType: " html" , succes: function(data, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems. slice(3).appendTo("#row2");

De functie die u opgeeft, wordt uitgevoerd voor elk nieuw Ajax-verzoek. De argumenten die aan de functie worden doorgegeven, zijn de verzoekparameters (inclusief eventuele standaardwaarden die u instelt met de methode ajaxSetup()), evenals de originele parameters die zijn doorgegeven aan de methode ajax() (exclusief eventuele standaardwaarden) en het jqXHR-verzoek voorwerp.

We brengen wijzigingen aan in het object dat als eerste argument is doorgegeven, zoals weergegeven in het voorbeeld. Als in dit scenario de parameter dataType aanwezig is tussen de parameters die worden doorgegeven aan de methode ajax(), wordt de time-outduur ingesteld op twee seconden. Om te voorkomen dat alle andere verzoeken worden verzonden, wordt de methode abort() aangeroepen op het jqXHR-object.

Opmerking: In alle voorbeelden wordt een afkorting gebruikt voor het aanroepen van jQuery-methoden met behulp van de functie $(dollarteken).

Laten we beginnen met het eenvoudigste: HTML-code laden in het DOM-element dat we op de pagina nodig hebben. Hiervoor gebruiken we de laadmethode. Deze methode kan de volgende parameters accepteren:

• async - verzoek om asynchronie, standaard waar
• cache - caching van browsergegevens in-/uitschakelen, standaard is waar
• contentType - standaard "application/x-www-form-urlencoded"
• data - verzonden gegevens - string of object
• dataFilter - filter voor invoergegevens
• dataType - gegevenstype dat wordt geretourneerd naar de callback-functie (xml, html, script, json, text, _default)
• globaal - trigger - verantwoordelijk voor het gebruik van globale AJAX-evenementen, standaard waar
• ifModified - trigger - controleert of er wijzigingen zijn geweest in de serverreactie, om geen nieuw verzoek te verzenden, standaard false
• jsonp - reset de naam van de callback-functie om met JSONP te werken (standaard automatisch gegenereerd)
• processData - standaard worden de verzonden gegevens in een object verpakt en verzonden als "application/x-www-form-urlencoded", schakel dit indien nodig uit
• scriptCharset - codering - relevant voor het laden van JSONP en JavaScript
• time-out - time-outtijd in milliseconden
• type - GET of POST
• url - URL van de opgevraagde pagina

• beforeSend - wordt geactiveerd voordat het verzoek wordt verzonden
• fout - als er een fout is opgetreden
• succes - als er geen fouten zijn opgetreden
• voltooid - wordt geactiveerd aan het einde van het verzoek

• gebruikersnaam - inloggen
• wachtwoord - wachtwoord

Wanneer u met jQuery werkt, wordt de naam van de callback-functie automatisch gegenereerd voor elke oproep naar een externe server. Gebruik hiervoor gewoon een GET-verzoek zoals:
http://api.domain.com/?type=jsonp&query=test&callback=?
Het laatste vraagteken (?) wordt vervangen door de naam van de callback-functie. Als u deze methode niet wilt gebruiken, moet u expliciet de naam van de callback-functie opgeven met behulp van de optie jsonp wanneer u de methode jQuery.ajax() aanroept.

Dit artikel bevat voorbeelden van de code die ik gebruik om ajax-verzoeken naar de server te sturen met behulp van jQuery. Hun taken kunnen verschillen, dus er kunnen verschillende functies voor worden gebruikt, wat het schrijven van code vereenvoudigt.

Dit is het eenvoudigste ajax-verzoek via jQuery waarbij html-gegevens worden ontvangen en in een dom-element worden ingevoegd met id = "result" (de inhoud van het element wordt vervangen):

$("#resultaat").load("");

Een geavanceerdere use-case voor belasting:

$("#result").load("", (par1:val1, par2:val2, ...), function(response, status, xhr) ( if (status == "succes") ( alert("Gereed "); ) else ( alert("Fout: " + xhr.status + " " + xhr.statusText); ) ));

In dit voorbeeld worden ook parameters doorgegeven aan de server en wordt na ontvangst van het antwoord gecontroleerd of er sprake is van een fout (er is bijvoorbeeld geen antwoord ontvangen van de server) en worden er diverse acties uitgevoerd.

Deze functies verzenden een Ajax-verzoek met behulp van de get- en post-http-methoden. Ik zal u een paar voorbeelden geven van het gebruik ervan.

$.get("", // adres voor het verzenden van het verzoek (par1:val1, par2:val2, ...), // het verzenden van enkele gegevens met een verzoekfunctie(data) ( // enkele acties met die ontvangen van de servergegevensgegevens ));

Gegevensoverdracht is niet vereist, noch het uitvoeren van enige actie na ontvangst van een reactie van de server, d.w.z. in dit geval kunnen de regels 3 en 4-6 indien nodig worden verwijderd en zo de code verder worden ingekort.

Het type gegevens dat van de server wordt ontvangen, kan worden gespecificeerd door dataType toe te voegen (zie hieronder) - standaard wordt dit automatisch bepaald.

Het gebruik van post is vergelijkbaar, maar in het volgende voorbeeld gebruik ik een functieaanroep nadat ik een antwoord van de server heb ontvangen.

$.post("", (par1:val1, par2:val2, ...), onSuccess); function onSuccess(data) ( // enkele acties met gegevens ontvangen van de servergegevens )

In feite zijn de get- en post-functies verkorte versies van de ajax-functie, die ik hieronder zal bespreken.

getJSON is een verkorte versie van een ajax-verzoek dat de GET-methode gebruikt en gegevens ontvangt in de vorm van json. De methode is bijvoorbeeld handig om een ​​soort reeks gegevens te verkrijgen en er vervolgens mee te werken.

$.getJSON("", (par1:val1, par2:val2, ...)).success(function(data) ( // doe iets met de gegevens, loop er bijvoorbeeld doorheen en print: for (var i =0; i 10, "tekst" => "testregel 1"); $arr = array("id" => 20, "tekst" => "testregel 2"); => "testregel 3"); echo json_encode($arr);

Op dezelfde manier kunt u stdClass-objecten van de server overbrengen door ze naar een json-string te converteren.

Nu zal ik een voorbeeld geven van een eenvoudig get-verzoek met behulp van de ajax-functie en het ontvangen van html-gegevens.

$.ajax(( url: "", dataType: "html", success: function(data) ( // enkele acties met de ontvangen data ) ));

Het verzoek aan de server wordt gedaan met behulp van de get-methode, omdat de parameter die verantwoordelijk is voor het type verzoek is standaard GET.

Een voorbeeld van het uitvoeren van een verzoek met behulp van de ajax-functie met gegevensoverdracht met behulp van de post-methode en gebeurtenisverwerking. Hieronder beschrijf ik aanvullende parameters die het meest worden gebruikt.

$.ajax(( url: "", type: "post", data: "", // kan een string zijn, of u kunt bijvoorbeeld dit doen: $("input, input:checked, input:checked , select, textarea" ) dataType: "json", beforeSend: function() ( $("#sendajax").button("loading"); ), compleet: function() ( $("#sendajax").button ("reset" ); success: function(json) ( // enkele acties met de ontvangen gegevens), error: function(xhr, ajaxOptions, throwError) ( alert(thrownError + "\r\n" + xhr.statusText + "\r \n" + xhr.responseText);

Verzendknop:

Versturen

In het bovenstaande voorbeeld verandert, wanneer u op de knop klikt, eerst de status van de knop (de tekst erop verandert in "Verzenden..." en deze wordt inactief), wat wordt gedaan met behulp van de parameter beforeSend. Vervolgens wordt een verzoek verzonden waarbij de benodigde gegevens worden overgedragen. Nadat er een antwoord van de server is ontvangen, keert de status van de knop terug naar de vorige status (de tekst verandert in “Verzenden” en wordt actief). Het antwoord wordt ontvangen in de vorm van json-gegevens.

Ik zal kort de parameters beschrijven voor het verzenden van een Ajax-verzoek, wat meestal nuttig kan zijn:

Hieronder geef ik nog een paar voorbeelden van het gebruik van ajax-verzoeken.

Voorbeeld van HTML-formuliercode:

Uw naam:

JavaScript-code:

$("#mijnformulier").submit(function(e) ( e.preventDefault(); $.ajax(( type: $(this).attr("method"), url: "", data: $(this ).serialize(), async: false, dataType: "html", success: function(result)( alert("Formulier ingediend"); ) ));

Om te voorkomen dat de pagina opnieuw wordt geladen wanneer op de knop "Verzenden" wordt geklikt, overschrijven we eerst de standaardacties van de browser met behulp van e.preventDefaults() .

In de dataparameter geven we alle formuliervelden door met behulp van $(this).serialize() - deze functie converteert alle invoer en selecteert naar een string die geschikt is om naar de server te verzenden.

Ook wordt hier de parameter async: false gebruikt, zodat er niets anders kan worden geklikt of gedaan totdat het formulier naar de server is verzonden.

Het probleem van het verzenden van een bestand of afbeelding naar de server zonder de pagina opnieuw te laden, komt vrij vaak voor. In dit voorbeeld bekijk ik twee functies tegelijk: een bestand selecteren door op een knop te klikken, die op welke manier dan ook kan worden ontworpen, en de voortgang weergeven bij het overbrengen van een bestand naar de server met behulp van een Ajax-verzoek.

De html-code zal er als volgt uitzien:

Afbeelding uploaden

#addfile ( positie: relatief; overflow: verborgen; breedte: 180px; hoogte: 34px; ) #load_file ( positie: absoluut; boven: 0; links: 0; breedte: 180px; hoogte: 34px; lettergrootte: 0px; dekking : 0; filter: alpha(dekking:0); #load_file:hover ( cursor: aanwijzer; )

De essentie van het idee is dat er bovenop de knop een standaard invoer voor het selecteren van een bestand wordt weergegeven, maar deze is volledig transparant en heeft dezelfde afmetingen als de knop. Op deze manier ziet de gebruiker een knop, maar als hij erover zweeft, zweeft hij daadwerkelijk over een invoer. Dienovereenkomstig wordt, wanneer hij op de knop klikt, daadwerkelijk op de bestandsselectie-invoer gedrukt. Om te voorkomen dat de cursor gaat knipperen na het selecteren van een bestand, is de lettergrootte ingesteld op 0px.

Nu de javascript-code voor het verzenden van het bestand naar de server die de voortgang weergeeft:

$(function() ( $("#load_file").on("change", laadbestand); )); function loadfile() ( $("#addfile span").html("0% geladen"); files = $("#load_file").files; var form = new FormData(); form.append("upload" , bestanden); $.ajax(( url: "", type: "POST", data: formulier, cache: false, processData: false, contentType: false, xhr: function() ( var myXhr = $.ajaxSettings.xhr (); if (myXhr.upload) ( myXhr.upload.addEventListener("progress",ShowProgress, false); ) retourneer myXhr; ), complete: function(data)( $("#addfile span").html(" Afbeelding laden"); $("#load_file").val(""); ), success: function(message)( alert(message); ), error: function(jqXHR, textStatus, errorThrown) ( alert(textStatus+" "+errorThrown); ) )); ) function ShowProgress(e) ( if(e.lengthComputable)( $("#addfile span").html("Geladen "+Math.round(100*e.loaded/e. totaal)+" %");

Wanneer u een bestand naar de server uploadt, geeft de knop aan hoeveel % er al naar de server is overgebracht. Nadat het laden is voltooid, wordt de knopnaam geretourneerd zoals deze was en wordt de waarde van de bestandsinvoer ingesteld op leeg, zodat er opnieuw een nieuw bestand kan worden geselecteerd.

Voorbeeld van een servergedeelte in PHP (op verzoek van Evgeniy):

$bericht = ""; if (empty($_FILES["upload"]["name"]) || $_FILES["upload"] == "none") ( $message = "Je hebt geen bestand geselecteerd"; ) else if ($ _FILES[ "upload"]["size"] == 0 || $_FILES["upload"]["size"] > 9437184) ( $message = "De bestandsgrootte valt niet binnen de norm (maximaal 9 MB)" ; ) else if ( ($_FILES["upload"]["type"] != "afbeelding/jpeg") && ($_FILES["upload"]["type"] != "afbeelding/pjpeg") && ( $_FILES["upload "]["type"] != "afbeelding/gif") && ($_FILES["upload"]["type"] != "afbeelding/png")) ( $message = "Alleen JPG , GIF-afbeeldingen mogen worden geüpload en PNG."; ) else if (!is_uploaded_file($_FILES["upload"]["tmp_name"])) ( $message = "Er is iets misgegaan. Probeer het bestand opnieuw te uploaden." ; ) else ($ ftype = $_FILES["upload"]["type"]; $fname = "nieuwenaam_afbeelding.".($ftype == "afbeelding/gif" ? "gif" : ($ftype == "afbeelding) /png" ? " png" : "jpg")); if (move_uploaded_file($_FILES["upload"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"].."/files/".$fname)) ( $message = "Afbeelding succesvol geladen."; ) else ( $message = "Er is iets misgegaan. Probeer het bestand opnieuw te downloaden."; ) ) exit($message);

Informatie over de geüploade afbeelding wordt opgenomen in $_FILES["upload"] , omdat Het script heeft het bestand als volgt toegevoegd: form.append("upload", files); Dienovereenkomstig hoeft het PHP-programma alleen maar te controleren of het bestand overeenkomt met de verwachte parameters, het bestand naar de gewenste map te verplaatsen (in het voorbeeld de map Bestanden) onder de gewenste naam (in het voorbeeld nieuwenaam_afbeelding) en een antwoord terugsturen naar de browser, dat in mijn voorbeeld eenvoudigweg aan de gebruiker wordt weergegeven met het alert(message) commando;

Er zijn veel situaties waarin het mogelijk en zelfs noodzakelijk is om Ajax-verzoeken te gebruiken en het is niet mogelijk om ze hier allemaal te bespreken. Als u echter suggesties heeft over welke andere voorbeelden zinvol kunnen zijn om hier toe te voegen, kunt u dit in de opmerkingen schrijven.

AJAX is een groep technologieën die wordt gebruikt bij webontwikkeling om interactieve applicaties te creëren. Met AJAX kunt u gegevens van de server overbrengen zonder de pagina opnieuw te laden. Op deze manier kun je zeer indrukwekkende resultaten behalen. En de jQuery-bibliotheek vereenvoudigt de implementatie van AJAX aanzienlijk met behulp van ingebouwde methoden.

Gebruik de methode $.ajax of jQuery.ajax om de technologie te implementeren:

$.ajax(properties) of $.ajax(url [, eigenschappen])

De tweede parameter is toegevoegd in versie 1.5 van jQuery.

url - adres van de opgevraagde pagina;

eigenschappen - eigenschappen opvragen.

Zie de jQuery-documentatie voor een volledige lijst met opties.

In deze tutorial gebruiken we een aantal van de meest gebruikte parameters.

succes (functie) - deze functie wordt aangeroepen nadat het verzoek met succes is voltooid. De functie ontvangt 1 tot 3 parameters (afhankelijk van de versie van de gebruikte bibliotheek). Maar de eerste parameter bevat altijd de gegevens die door de server worden geretourneerd.

data (object/string) - gebruikersgegevens die worden doorgegeven aan de opgevraagde pagina.

dataType (string) - mogelijke waarden: xml, json, script of html. Beschrijving van het type gegevens dat wordt verwacht in het serverantwoord.

type (string) - verzoektype. Mogelijke waarden: GET of POST. Standaard: GET.

url (string) - URL voor het verzoek.

Gemakkelijke tekstoverdracht.

$.ajax(( url: "response.php?action=sample1", succes: function(data) ( $(.results").html(data); ) ));

Er is een .result div-element voor het antwoord.

Wachten op een antwoord

De server retourneert eenvoudigweg de string:

Echo "Voorbeeld 1 - overdracht succesvol voltooid";

We geven gebruikersgegevens door aan het PHP-script.

$.ajax(( type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", succes: function(data)( $(.results").html( gegevens);

De server retourneert een string met de verzonden gegevens erin:

Echo "Voorbeeld 2 - overdracht succesvol voltooid. Parameters: naam = " . $_POST["naam"] . ", bijnaam= " . $_POST["bijnaam"];

JavaScript-code doorgeven en uitvoeren

$.ajax(( dataType: "script", url: "response.php?action=sample3", ))

De server voert de code uit:

Echo "$(".results").html("Voorbeeld 3 - JavaScript uitvoeren");";

Wij gebruiken XML. Het voorbeeld kan gebruikt worden om met externe XML te werken, bijvoorbeeld een RSS-feed.

$.ajax(( dataType: "xml", url: "response.php?action=sample4", success: function(xmldata)( $(".results").html(""); $(xmldata).find ("item").each(function())( $(" ").html($(this).text()).appendTo(".results"); ) ));

De server zou XML-code moeten retourneren:

Header("Contenttype: applicatie/xml; charset=UTF-8"); echo