Doet een verzoek aan de server zonder de pagina opnieuw te laden. Dit is een methode op laag niveau met veel instellingen. Het ligt ten grondslag aan de werking van alle andere Ajax-methoden. Heeft twee gebruiksmogelijkheden:

url — verzoekadres.
instellingen - in deze parameter kunt u instellingen opgeven van dit verzoek. Opgegeven met behulp van een object in de indeling (naam:waarde, naam:waarde...) . Geen van de instellingen is vereist. U kunt standaardinstellingen instellen met de methode $.ajaxSetup().

Lijst met instellingen

↓ naam :type (standaardwaarde)

Wanneer een verzoek wordt gedaan, geven de headers de toegestane inhoudstypen aan die van de server worden verwacht. De waarden van deze typen worden overgenomen uit de accept-parameter.

Standaard vinden alle verzoeken zonder herladen van de pagina asynchroon plaats (dat wil zeggen dat na het verzenden van een verzoek naar de server de pagina niet stopt met werken terwijl op een antwoord wordt gewacht). Als u het verzoek synchroon moet uitvoeren, stelt u de parameter in op false . Cross-domein- en 'jsonp'-aanvragen kunnen niet in de synchrone modus worden uitgevoerd.

Houd er rekening mee dat het uitvoeren van verzoeken in de synchrone modus ertoe kan leiden dat de pagina wordt geblokkeerd totdat het verzoek volledig is voltooid.

Dit veld bevat een functie die wordt aangeroepen onmiddellijk voordat een ajax-verzoek naar de server wordt verzonden. Deze functie kan handig zijn voor het wijzigen van het jqXHR-object (in eerdere versies van de bibliotheek (tot 1.5) wordt XMLHttpRequest gebruikt in plaats van jqXHR). U kunt bijvoorbeeld de benodigde headers wijzigen/specificeren, etc. Het jqXHR-object wordt als eerste argument aan de functie doorgegeven. Het tweede argument zijn de verzoekinstellingen.

In dit veld kunt u aanvullende verzoekheaders opgeven. Deze wijzigingen worden ingevoerd voordat beforeSend wordt aangeroepen, waar de laatste koptekstbewerkingen kunnen worden aangebracht.

Wanneer deze instelling op true staat, wordt het verzoek alleen met de status "succesvol" uitgevoerd als het antwoord van de server afwijkt van het vorige antwoord. jQuery controleert dit feit door naar de Last-Modified-header te kijken. Sinds jQuery-1.4 wordt naast Last-Modified ook "etag" gecontroleerd (beide worden geleverd door de server en zijn nodig om de browser te laten weten dat de opgevraagde gegevens van de server niet zijn gewijzigd ten opzichte van het vorige verzoek) .

Hiermee kunt u de bronstatus van een pagina instellen op lokaal (alsof deze via het bestandsprotocol verloopt), zelfs als jQuery deze anders herkent. De bibliotheek besluit dat de pagina lokaal draait in het geval van de volgende protocollen: bestand, *-extensie en widget.

Het wordt aanbevolen om de parameterwaarde in te stellen isLokaal globaal - met behulp van de functie $.ajaxSetup(), en niet in de instellingen van individuele Ajax-verzoeken.

Definieert de naam van de parameter die aan de URL wordt toegevoegd tijdens een jsonp-verzoek (standaard wordt "callback" gebruikt - "http://siteName.ru?callback=...").

Vanaf jQuery-1.5 voorkomt het instellen van deze parameter op false dat er een extra parameter aan de URL wordt toegevoegd. In dit geval moet u expliciet de waarde van de eigenschap jsonpCallback instellen. Bijvoorbeeld: (jsonp:false, jsonpCallback:"callbackName") .

Definieert de naam van de functie die wordt aangeroepen wanneer de server reageert op een jsonp-verzoek. Standaard genereert jQuery een aangepaste naam voor deze functie, wat een voorkeursoptie is die het werk van de bibliotheek vereenvoudigt. Een van de redenen om uw eigen jsonp-verzoekverwerkingsfunctie te specificeren is het verbeteren van de caching van GET-verzoeken.

Vanaf jQuery-1.5 kunt u in deze parameter een functie opgeven om de serverreactie zelf af te handelen. In dit geval moet de opgegeven functie de gegevens retourneren die zijn ontvangen van de server (in de opgegeven functie zijn deze beschikbaar in de eerste parameter).

Standaard worden alle gegevens die naar de server worden verzonden, vooraf geconverteerd naar een tekenreeks (url-indeling: fName1=waarde1&fName2=waarde2&...) die overeenkomt met "application/x-www-form-urlencoded". Als u gegevens moet verzenden die niet aan een dergelijke verwerking kunnen worden onderworpen (bijvoorbeeld een DOM-document), moet u de optie processData uitschakelen.

Deze parameter wordt gebruikt voor ajax-aanvragen tussen domeinen van het GET-type. Het dataType kan 'jsonp' of 'script' zijn. Definieert de codering waarin het cross-domeinverzoek wordt uitgevoerd. Dit is nodig als een server op een buitenlands domein een codering gebruikt die afwijkt van de codering op de server van zijn eigen domein.

(Deze instelling is geïntroduceerd in jQuery-1.5) een set paren waarin aanvraaguitvoeringscodes zijn gekoppeld aan functies die zullen worden aangeroepen. Voor code 404 (pagina's bestaan ​​niet) kunt u bijvoorbeeld een bericht op het scherm weergeven:

$.ajax (( statusCode: ( 404: function () ( alert ("Pagina niet gevonden" ; )) ) );

Functies die reageren op aanvraagsuccescodes zullen dezelfde argumenten ontvangen als de succesvolle aanvraaghandlerfuncties (gespecificeerd in de succesparameter), en functies die reageren op foutcodes zullen dezelfde zijn als die van foutfuncties.

Een functie die wordt aangeroepen als het verzoek aan de server succesvol is voltooid. Er worden drie parameters doorgegeven: gegevens die door de server zijn verzonden en al zijn voorbewerkt (wat verschillend is voor verschillende datatypes). De tweede parameter is een string met de uitvoeringsstatus. De derde parameter bevat het jqXHR-object (in eerdere versies van de bibliotheek (vóór 1.5) wordt XMLHttpRequest gebruikt in plaats van jqXHR). Vanaf jQuery-1.5 kan deze parameter, in plaats van een enkele functie, een reeks functies accepteren.

Wachttijd op een reactie van de server. Ingesteld in milliseconden. Als deze tijd wordt overschreden, wordt het verzoek voltooid met een fout en vindt er een foutgebeurtenis plaats (zie beschrijving hierboven), die de status "time-out" heeft.

De tijd wordt geteld vanaf het moment dat de functie $.ajax wordt aangeroepen. Het kan gebeuren dat er op dit moment meerdere andere verzoeken actief zijn en dat de browser de uitvoering van het huidige verzoek vertraagt. In dit geval time-out kan worden voltooid, hoewel het verzoek in feite nog niet eens is gestart.

Wanneer in jQuery-1.4 en eerder een time-out optreedt voor het XMLHttpRequest-object, gaat het in een foutstatus en kan toegang tot de velden tot een uitzondering leiden. In Firefox 3.0+ worden script- en JSONP-verzoeken niet afgebroken als er een time-out optreedt. Ze zullen ook na het verstrijken van deze tijd worden voltooid.

Een functie die een XMLHttpRequest-object levert. Voor IE-browsers is dit object standaard ActiveXObject, en in andere gevallen is het XMLHttpRequest. Met deze optie kunt u uw eigen versie van dit object implementeren.

(Deze instelling is geïntroduceerd in jQuery-1.5.1) Een set (naam:waarde)-paren voor het wijzigen/toevoegen van de waarden van de overeenkomstige velden van het XMLHttpRequest-object. U kunt bijvoorbeeld de eigenschap withCredentials instellen op true bij het uitvoeren van een aanvraag voor meerdere domeinen:

$.ajax (( url: a_cross_domain_url, xhrFields: (withCredentials: true ) ) ;

In jQuery-1.5 wordt de eigenschap withCredentials niet ondersteund door native XMLHttpRequest en zal deze worden genegeerd in een aanvraag voor meerdere domeinen. Dit is opgelost in alle volgende versies van de bibliotheek.

Gebeurtenishandlers

Met de beforeSend-, error-, dataFilter-, success- en complete-instellingen (hun beschrijving staat in de vorige sectie) kunt u gebeurtenishandlers instellen die op bepaalde momenten in de uitvoering van elk Ajax-verzoek voorkomen.

vóórVerzenden vindt plaats onmiddellijk voordat het verzoek naar de server wordt verzonden. fout treedt op wanneer het verzoek mislukt. gegevensFilter vindt plaats wanneer gegevens van de server binnenkomen. Hiermee kunt u ‘ruwe’ gegevens verwerken die door de server zijn verzonden. succes vindt plaats wanneer het verzoek met succes is voltooid. compleet vindt plaats wanneer een verzoek is voltooid.

Eenvoudig gebruiksvoorbeeld. We zullen een bericht weergeven wanneer het verzoek succesvol is voltooid:

$.ajax (( url: "ajax/test.html" , succes: function () ( alert ("Laden is uitgevoerd." ; ) ) );

Vanaf jQuery-1.5 retourneert de methode $.ajax() een jqXHR-object dat, onder andere, de uitgestelde interface implementeert, waarmee u aanvullende uitvoeringshandlers kunt opgeven. Naast de methoden .done(), .fail() en .then() die standaard zijn voor het uitgestelde object, waarmee u handlers kunt installeren, implementeert jqXHR .success(), .error() en .complete() . Dit wordt gedaan om te voldoen aan de gebruikelijke namen van de methoden waarmee handlers voor het uitvoeren van ajax-verzoeken worden geïnstalleerd. Vanaf jQuery-1.8 worden deze drie methoden echter verouderd.

Sommige verzoektypen, zoals jsonp- of cross-domein GET-verzoeken, ondersteunen het gebruik van XMLHttpRequest-objecten niet. In dit geval bevatten de XMLHttpRequest en textStatus die aan de handlers worden doorgegeven de waarde undefined .

Binnen handlers bevat de variabele this de waarde van de parameter context. Als dit niet is ingesteld, bevat dit het instellingenobject.

dataType-parameter

De functie $.ajax() leert over het type gegevens dat door de server wordt verzonden vanaf de server zelf (via MIME). Daarnaast is er de mogelijkheid om persoonlijk aan te geven (verduidelijken) hoe deze gegevens geïnterpreteerd moeten worden. Dit wordt gedaan met behulp van de dataType-parameter. Mogelijke waarden voor deze parameter:

"xml"— het resulterende XML-document zal beschikbaar zijn in tekstvorm. Je kunt ermee werken met standaard jQuery-tools (maar ook met een html-document). "html"— de resulterende html zal beschikbaar zijn in tekstvorm. Als het scripts in tags bevat, worden deze alleen automatisch uitgevoerd wanneer de html-tekst in de DOM wordt geplaatst. "script"— de ontvangen gegevens worden uitgevoerd als javascript. Variabelen die doorgaans het antwoord van de server bevatten, bevatten een jqXHR-object. "json", "jsonp"— de ontvangen gegevens worden vooraf omgezet in een javascript-object. Als het parseren mislukt (wat kan gebeuren als de json fouten bevat), wordt er een foutuitzondering voor het parseren van bestanden gegenereerd. Als de server waartoe u toegang heeft zich op een ander domein bevindt, moet jsonp worden gebruikt in plaats van json. U kunt meer te weten komen over json en jsonp op Wikipedia. "tekst"— de ontvangen gegevens zullen in platte tekst beschikbaar zijn, zonder voorafgaande verwerking.

Opmerking 1: Wanneer een verzoek wordt verzonden naar een domein van derden (wat alleen mogelijk is als dataType gelijk is aan jsonp of script), worden fouthandlers en globale gebeurtenissen niet geactiveerd.

Opmerking 2: Het gegevenstype dat is opgegeven in dataType mag niet conflicteren met de MIME-informatie die door de server wordt verstrekt. XML-gegevens moeten bijvoorbeeld door de server worden weergegeven als text/xml of application/xml . Als dit mislukt, zal jQuery proberen de ontvangen gegevens naar het opgegeven type te converteren (meer hierover in de sectie Converters).

Gegevens naar de server verzenden

Standaard wordt een verzoek aan de server gedaan met behulp van de HTTP GET-methode. Doe indien nodig een verzoek POST-methode, moet u de juiste waarde opgeven in de type-instelling. Gegevens die via de POST-methode worden verzonden, worden geconverteerd naar UTF-8 als deze zich in een andere codering bevinden, zoals vereist door de W3C XMLHTTPRequest-standaard.

De gegevensparameter kan worden opgegeven als een tekenreeks in het formaat sleutel1=waarde1&sleutel2=waarde2 (gegevensoverdrachtformaat in url), of als een object met een set (naam:waarde) paren - (sleutel1: "waarde1", sleutel2: "waarde2") . In het laatste geval converteert jQuery voordat de gegevens worden verzonden gegeven voorwerp naar een string met behulp van $.param() . Deze conversie kan echter worden teruggedraaid door de instelling processData in te stellen op false . Conversie naar een string is bijvoorbeeld ongewenst bij het versturen van een xml-object naar de server. In dit geval is het raadzaam om de contentType-instelling te wijzigen van application/x-www-form-urlencoded naar een geschikter mimetype.

Opmerking: De meeste browsers staan ​​geen Ajax-verzoeken toe voor bronnen met andere domeinen, subdomeinen en protocollen dan de huidige. Deze beperking is echter niet van toepassing op jsonp- en scriptaanvragen.

Gegevens ontvangen van de server

De gegevens die van de server worden ontvangen, kunnen worden verstrekt als een tekenreeks of een object, afhankelijk van de waarde van de dataType-parameter (zie dataType hierboven). Deze gegevens zijn altijd beschikbaar in de eerste parameter van de ajax-verzoekuitvoeringshandler:

$.ajax (( url: "some.php" , succes: function (data) ( alert ("Winstgegevens: " + data ) ; ) ) );

Voor tekst- en xml-typen zijn de gegevens die door de server worden verzonden ook beschikbaar in jqXHR, namelijk in respectievelijk de responseText- of responseXML-velden.

Geavanceerde instellingen

Met behulp van de globale parameter kunt u de uitvoering van gebeurtenishandlers (.ajaxSend(), .ajaxError(), enz.) voor individuele verzoeken uitschakelen. Dit kan bijvoorbeeld handig zijn als het laden van animatie in deze handlers wordt gestart/gestopt. Als sommige verzoeken heel vaak en snel worden uitgevoerd, kan het voor hen nuttig zijn om de uitvoering van handlers uit te schakelen. Voor cross-domein script- en jsonp-aanvragen wordt de globale parameter automatisch uitgeschakeld.

Als authenticatiegegevens (login/wachtwoord) vereist zijn om een ​​verzoek aan de server te doen, kunt u deze opgeven in de gebruikersnaam en wachtwoordinstellingen van het ajax-verzoek.

Om een ​​verzoek uit te voeren naar de server is er nodig bepaalde tijd. Als de server gedurende deze tijd geen antwoord verzendt, eindigt het verzoek met een foutmelding (status "time-out"). De wachttijd voor een reactie van de server kan worden gewijzigd door de gewenste waarde (in milliseconden) in te stellen in de time-outinstelling.

Het kan voorkomen dat de hostcodering afwijkt van de codering die in het ajax-verzoek wordt gevraagd javascript-bestand. In dergelijke gevallen is het noodzakelijk om de codering van deze laatste op te geven in de scriptCharset-instelling.

In de meeste gevallen vindt het Ajax-verzoek asynchroon plaats, maar in sommige gevallen kan het nodig zijn om het verzoek sequentieel uit te voeren (wanneer verdere uitvoering van het script onmogelijk is zonder een reactie van de server te ontvangen). U kunt het verzoek synchroon maken als u de asynchrone instelling uitschakelt. Het is echter de moeite waard om te onthouden dat in dit geval de pagina vastloopt terwijl u wacht op een antwoord van de server.

Voorbeelden van gebruik

Meest eenvoudige optie use zal $.ajax() aanroepen zonder parameters op te geven:

$.ajax(); // een GET-verzoek naar het URL-adres wordt naar de server verzonden huidige pagina

en zonder enige parameter op te geven.

Als u een js-bestand moet laden en uitvoeren, kunt u dit als volgt doen:

Laten we een POST-verzoek indienen bij de server, waarbij we twee parameters specificeren en de gebruiker op de hoogte stellen van het succesvol voltooide verzoek:

$.ajax (( type: "POST" , url: "some.php" , data: "name=John&location=Boston" , succes: function (msg) ( alert ("Gegevens zijn aangekomen: " + msg ) ; ) ) ) ;

Laten we de inhoud van de gewenste html-pagina bijwerken:

$.ajax (( url: "test.html" , cache: false , succes: functie (html) ($("#results" ) .append (html) ; ) ) );

Laten we een synchroon verzoek indienen bij de server. Terwijl het verzoek wordt uitgevoerd, reageert de pagina niet op gebruikersacties:

// schrijf de gegevens die vanaf de server zijn verzonden naar de html-variabele var html = $.ajax (( url: "some.php" , async: false ) ) .responseText ;

Als parameter sturen we een XML-object naar de server. Om deze correct te verzenden, moet u de voorafgaande conversie van parameters (processData:false) annuleren. Als behandelaar voor het succesvol afronden van een aanvraag zullen wij u specificeren aangepaste functie handvatReactie:

var xmlDocument = [ creëren xml-document] ;

$.ajax (( url: "page.php" , processData: false , data: xmlDocument, succes: handleResponse ) );

Geavanceerde aanpak

Vanaf jQuery-1.5 zijn er drie nieuwe richtingen waarmee u $.ajax() nog dieper kunt gebruiken. Met de eerste (Prefilters) kunt u aanvullende manipulaties uitvoeren onmiddellijk voordat u het verzoek verzendt. Met de tweede benadering (Converters) kunt u jQuery vertellen hoe gegevens die van de server zijn ontvangen, moeten worden geconverteerd als deze niet overeenkomen met het verwachte formaat. De derde benadering (Transports) is het laagste niveau waarmee u zelfstandig een verzoek aan de server kunt organiseren.

Voorfilters

Deze aanpak bestaat uit het opzetten van een handler die wordt aangeroepen voordat elk Ajax-verzoek wordt gedaan. Deze handler gaat vooraf aan de uitvoering van eventuele andere Ajax-handlers. Het wordt geïnstalleerd met behulp van de functie $.ajaxPrefilter():

$.ajaxPrefilter (functie (opties, originalOptions, jqXHR) ( ) ) ;
Waar opties
— instellingen van het huidige verzoek, originele Opties
- standaardinstellingen, jqXHR

— jqXHR voorwerp van dit verzoek. Het is handig om in voorfilters te verwerken aangepaste instellingen (d.w.z. nieuwe instellingen die onbekend zijn voor de bibliotheek die in het verzoek is opgegeven). U kunt bijvoorbeeld binnenkomen eigen opstelling

var currentRequests = ( );

$.ajaxPrefilter (functie (opties, originalOptions, jqXHR) ( if (options.abortOnRetry) ( if (currentRequests[ options.url ]) ( currentRequests[ options.url ] .abort () ; ) currentRequests[ options.url ] = jqXHR ;))); Het is handig om te verwerken en bestaande instellingen

. Zo kunt u bijvoorbeeld een cross-domein verzoek wijzigen in een verzoek dat wordt omgeleid via uw domeinserver:

$.ajaxPrefilter (functie (opties) ( if (options.crossDomain) ( options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url ) ; options.crossDomain = false ; ) );

Bovendien kunt u de dataType-waarden opgeven waarop het voorfilter zal werken. U kunt dus bijvoorbeeld json- en scripttypen opgeven: $.ajaxPrefilter ("json script", function (options, originalOptions, jqXHR) ( // Opties wijzigen, controleren basisinstellingen

(originalOptions) en jqXHR-object) );

Ten slotte kunt u de dataType-waarde wijzigen om de gewenste waarde te retourneren:

$.ajaxPrefilter (function (options) ( // wijzig dataType in script als de url aan bepaalde voorwaarden voldoet if (isActuallyScript(options.url) ) ( return "script" ; ) );

Deze aanpak garandeert niet alleen dat het verzoek van type verandert in script, maar ook dat andere voorfilterhandlers die dit type specificeren in de eerste parameter ook zullen worden uitgevoerd.

Converters

Dit principe bestaat uit het installeren van een handler die werkt als het dataType dat in de instellingen is opgegeven, niet overeenkomt met het datatype dat door de server wordt verzonden.

Converters is een Ajax-instelling, dus globaal in te stellen:

// op deze manier kunt u een handler instellen die werkt als, in plaats van // het type mydatatype dat u hebt opgegeven in dataType, gegevens van het type tekst worden ontvangen $.ajaxSetup (( converters: ("text mydatatype" : function ( textValue ) ( if (valid( textValue ) ) ( // verwerking van de verzonden tekst return mydatatypeValue; ) else ( // als de door de server verzonden gegevens niet overeenkomen met wat wordt verwacht, // kunt u een uitzondering genereren. throw exceptionObject; ) ) ));

Converters helpen u bij het introduceren van uw eigen (aangepaste) dataType. Het is belangrijk op te merken dat alleen kleine letters mogen worden gebruikt in de naam van een dergelijk dataType! Een verzoek voor het hierboven genoemde gegevenstype "mydatatype" zou er als volgt uit kunnen zien:

$.ajax (url, (dataType: "mijndatatype" ) );

In dit artikel wordt besproken wat AJAX en jQuery zijn en worden voorbeelden gegeven van hoe u ze kunt gebruiken.

AJAX is een tool voor het bouwen van webapplicaties die communiceren met de server in achtergrond. In dit geval ontvangt de gebruiker een aanvraag met dynamische update inhoud zonder de hele pagina opnieuw te laden.

jQuery - JavaScript-framework, een bibliotheek waarmee u gemakkelijker een aantal Javascript-functies kunt gebruiken, zoals: creëren visuele effecten, gebeurtenisafhandeling, werken met DOM- en AJAX-ondersteuning.

U kunt de nieuwste versie van jQuery downloaden en alle functies in detail leren kennen op de website van de ontwikkelaar: http://www.jquery.com/

In dit artikel zullen we slechts één jQuery-bibliotheekfunctie bekijken, namelijk de functie $.ajax(). Met deze functie kunnen we zowel gegevens naar de server verzenden als reacties van de server ontvangen, allemaal op de achtergrond, zonder de pagina opnieuw te laden. De instellingen voor het ontvangen of verzenden van gegevens zijn afhankelijk van de parameters waarmee de functie $.ajax() wordt aangeroepen. De belangrijkste zullen hieronder worden besproken. Meer over parameters kunt u lezen in de jQuery-handleiding.

Laten we verder gaan met het bekijken van voorbeelden.

Belangrijk!
Om de voorbeelden correct te laten werken, moet u:
1. Alle bestanden moeten in UTF-8-codering zijn geschreven.
2. Scripts moeten op de webserver worden uitgevoerd en niet als een bestand in de browser worden uitgevoerd.

Voorbeeld 1: Inhoud dynamisch bijwerken met behulp van een timer

Laten we een eenvoudig programma maken dat de huidige tijd weergeeft, één keer per seconde bijgewerkt met behulp van een timer. Een kenmerk van dit programma is het verkrijgen van informatie over de huidige tijd uit een ander extern bestand.

Inhoud van het index.html-bestand.

function show() ( $.ajax(( url: "time.php", cache: false, success: function(html)( $("#content").html(html); ) )); ) $(document ).ready(function())( show(); setInterval("show()",1000); ));

De code heeft verschillende functies, laten we ze uitleggen.

1. De jQuery-bibliotheek is opgenomen in de header HTML-bestand, hiervoor is deze regel geschreven.

Het jquery.js-bestand zelf bevindt zich in dezelfde map als de voorbeeldbestanden.

2. Er wordt een container gemaakt in de hoofdtekst van het document waarin we de inhoud zullen laden.

3. Er is een op het eerste gezicht vreemde functie $(document).ready() voor nodig correcte werking jQuery, bovendien kunnen we daarin alle voorbereidingen uitvoeren om het programma te laten werken. In ons geval roepen we de functie show() aan, die het mechanisme specificeert voor het ophalen van inhoud uit een ander bestand, en stellen we een timer in zodat de functie show() eenmaal per seconde wordt aangeroepen.

$(document).ready(function())( show(); setInterval("show()",1000); ));

4. De functie show() bestaat uit het aanroepen van de functie $.ajax() met een bepaald aantal parameters, waardoor we op de achtergrond informatie kunnen verkrijgen uit een extern bestand op de server.

$.ajax(( url: "time.php", cache: false, succes: function(html)( $("#content").html(html); ) ));

Laten we eens kijken naar de gebruikte parameters van de functie $.ajax().

URL: "time.php" Geeft toegang tot het time.php-bestand om inhoud op te halen.
cache: false Queryresultaten worden niet in de cache opgeslagen.

success: function(html)( $("#content").html(html); ) Als het verzoek succesvol is, gaat de controle over naar de functie, die de inhoud als parameter ontvangt en de bijbehorende container schrijft. Het schrijven naar de container gebeurt op deze regel:

$("#inhoud").html(html);

Inhoud van het time.php-bestand.

Het doel van het time.php-bestand is om de huidige tijd op het scherm weer te geven.

Download voorbeeldbronbestanden (16,6 kb):

Inhoud van het index.html-bestand.

Voorbeeld 2: Inhoud dynamisch bijwerken op basis van gebruikersselectie

Een programma dat inhoud dynamisch laadt naar goeddunken van de gebruiker.

Welke pagina wil je openen?

$(document).ready(function())( $("#btn1").click(function())( $.ajax(( url: "page1.html", cache: false, succes: function(html) ($ ("#content").html(html); )); $("#btn2").click(function())( $.ajax(( url: "page2.html", cache: false, succes : functie(html)( $("#content").html(html); ) ));

In de hoofdtekst van het document is een formulier gemaakt met twee knoppen waarmee de gebruiker de gewenste inhoud selecteert. En een container voor het laden van inhoud. De klikgebeurtenis op de knop "Pagina 1" wordt afgehandeld door de functie $("#btn1").click() en de klikgebeurtenis op de knop "Pagina 2" wordt verwerkt door de functie $("#btn2"). klik() functie. De inhoud van de bestanden page1.html en page2.html, die dynamisch in het inhoudsgebied worden geladen, zijn eenvoudige HTML-pagina's of

tekstbestanden

met inhoud.

Download voorbeeldbronbestanden (18,4 kb):

Inhoud van het index.html-bestand.

Voorbeeld 3: Gegevens naar de server op de achtergrond verzenden en inhoud ontvangen


Laten we eens kijken naar een voorbeeld waarbij de ingevoerde gebruikersnaam naar de server wordt verzonden. Wanneer de server een naam ontvangt, geeft hij een begroeting en telt hij het aantal tekens in de ingevoerde naam.

In de hoofdtekst van het document is een formulier voor het invoeren van een gebruikersnaam gemaakt. En een container voor het laden van dynamische inhoud.

Houd er rekening mee dat het formulier zelf niet de gebruikelijke actie- en methodevelden heeft. De functie $("#myForm").submit() dient als handler voor het geval dat u op de knop "Verzenden" klikt. Laten we deze functie eens bekijken.

$("#mijnFormulier").submit(function())( $.ajax(( type: "POST", url: "greetings.php", data: "gebruikersnaam="+$("#gebruikersnaam").val ( ), succes: function(html)( $("#content").html(html); ) ));

Zoals we kunnen zien, heeft het belangrijkste werk opnieuw te maken met de functie $.ajax(). Deze keer verschijnen er aanvullende parameters waar in de voorbeelden 1 en 2 geen rekening mee is gehouden. Namelijk:

Type: "POST" Type gegevensoverdracht. data: "username="+$("#username").val() Parameters doorgegeven aan de server. IN in dit geval
we geven de inhoud van het gebruikersnaamveld door - de gebruikersnaam. Over het algemeen worden parameters op dezelfde manier geschreven als in de GET-methode, op één regel, bijvoorbeeld:

gegevens: "gebruikersnaam=Vasya&leeftijd=18&seks=man"

Houd er rekening mee dat er aan het einde een regel staat:

Retour vals; Dit wordt gedaan zodat het formulier niet probeert gegevens over te dragen naar het bestand van waaruit het wordt gestart en de pagina niet opnieuw wordt geladen.

Inhoud van het groeten.php-bestand.

We tonen de begroeting en tellen het aantal tekens in de naam.

Download voorbeeldbronbestanden (16,8 kb):

Concluderend is het de moeite waard om te zeggen dat naast de voor de hand liggende voordelen van het maken van pagina's met behulp van dynamische bijgewerkte inhoud, er een aantal nadelen zijn waarmee rekening moet worden gehouden bij het ontwikkelen van een site, namelijk:

1. Op pagina's met dynamische inhoudsupdates werkt de knop "Terug" in de browser niet correct.

2. Pagina's met dynamische inhoudsupdates veranderen de URL's niet afhankelijk van hun inhoud, dus er kunnen geen bladwijzers voor worden gemaakt. 3. Pagina's met dynamische inhoudsupdates worden niet geïndexeerd zoekmachines

, omdat ze voeren geen JavaScript-opdrachten uit. U kunt van de bovengenoemde nadelen afkomen programmatisch

. Dit artikel bespreekt dergelijke methoden niet. In het tijdperk moderne internet worden de meeste websites steeds interactiever. Als we voorheen, om bijgewerkte gegevens te ontvangen, de hele pagina moesten vernieuwen, zijn er nu technologieën verschenen waarmee we niet de hele pagina kunnen laden, maar slechts een afzonderlijk deel ervan. Dit biedt op zijn beurt gemak voor zowel gebruikers als servereigenaren, omdat voor de gebruiker de pagina alleen maar sneller laadt pagina's, en de server hoeft de pagina niet elke keer te genereren en aan de gebruiker weer te geven. Deze functies zijn eenvoudig te implementeren met behulp van php en ajax.

Vandaag zullen we een klein voorbeeld bekijken om beter te begrijpen hoe het AJAX-concept werkt. Soms is het voor beginners moeilijk om te begrijpen hoe php en ajax met elkaar omgaan; veel mensen zoeken naar voorbeelden van hoe ze formulieren direct kunnen valideren zonder de hele pagina opnieuw te laden. Ik zal je kort laten zien hoe dit wordt gedaan, zodat je de basisbeginselen en principes begrijpt waarmee je in de toekomst sneller andere tools onder de knie kunt krijgen en je eigen scripts kunt schrijven.

Laten we een kleine taak voor onszelf bedenken en de beschikbaarheid controleren e-mailadressen in de database zonder de pagina opnieuw te laden met behulp van php en ajax. Dit voorbeeld laat goed zien hoe we met de server kunnen communiceren zonder de pagina in de browser opnieuw te laden, en dit wordt ook vaak gebruikt voor verschillende soorten validatie van gebruikersformulieren. In de hoofdmap zullen we 3 bestanden aanmaken met de namen index.php, email.php, validate.js.

Een pagina maken

Laten we creëren eenvoudige pagina met één formulier dat slechts één veld bevat voor het invoeren van e-mail.
Index.php-bestandssyntaxis

AJAX-zelfstudie

De eenvoudigste manier om met AJAX te werken is door het jQuery-framework aan te sluiten, en dat is precies wat ik deed. jQuery biedt ons een gemakkelijk te begrijpen en gemakkelijk te gebruiken syntaxis voor het verzenden van AJAX-verzoeken, dus waarom zou u daar niet van profiteren?

Een js-script maken

Syntaxis van het validate.js-bestand

$(document).ready(function())( var email = ""; $("#email").keyup(function())( var waarde = $(this).val(); $.ajax(( type: "POST", url:"email.php", data:"email="+waarde, succes:function(msg)( if(msg == "geldig")( $("#message").html( "Deze e-mail kan worden gebruikt. Deze e-mail is al in gebruik." ) ) ) ) ); $("#submit").click(function())( if(email == "")( alert(alert()) "Plaats gegevens in alle e-mails"); )else( $.ajax(( type: "POST", url:"email.php", data:"add_email="+email, success:function(msg)( $ ("#bericht" ).html(msg);

PHP-handler

Dit script ontvangt een POST-verzoek van de client, verwerkt het en retourneert het resultaat. AJAX leest de uitslag en neemt op basis daarvan een beslissing.
Syntaxis van e-mail.php-bestand

$connection = mysqli_connect("localhost", "e-mail", "e-mail", "e-mail"); if(isset($_POST["email"]) && $_POST["email"] != "")( $email = $_POST["email"]; $email = mysqli_real_escape_string($connection,$email); if (!filter_var($email, FILTER_VALIDATE_EMAIL))( echo "invalid"; )else( $sql = "SELECT id FROM e-mail WHERE email="$email""; $result = mysqli_query($connection,$sql); if( mysqli_num_rows($result) == 1)( echo "ongeldig"; )else( echo "geldig"; ) ) ) if(isset($_POST["add_email"]) && $_POST["add_email"] != "" )( $email = mysqli_real_escape_string($connection,$_POST["add_email"]); $sql = "INSERT IN e-mail(email) VALUES("$email")"; if(mysqli_query($connection,$sql))( echo Succes"; )else( echo "Fout"; ) )

In ons php-script de meest voorkomende code die een berichtverzoek verwerkt en op de pagina afdrukt specifieke tekst. Als gevolg hiervan verzendt AJAX php-verzoek script, het script verwerkt het en produceert het resultaat, AJAX leest het resultaat en wijzigt de pagina in realtime.

AJAX stuurt een POST-verzoek naar het script met behulp van dit stukje code:

$.ajax(( type:"POST", url:"email.php", data:"email="+waarde, succes:function(msg)( if(msg == "geldig")( $("#message ").html("Deze e-mail kan worden gebruikt."); email = value; )else( $("#message").html("Deze e-mail is al in gebruik."); ) ) ));

type - Verzoektype, POST of GET. In ons geval POST;
url - het adres van het script waarnaar het verzoek wordt verzonden;
gegevens - gegevens die in het verzoek worden verzonden;
succes - wat te doen als gevolg van een succesvolle uitvoering van het verzoek. In ons geval heet de functie;

In het script zelf wordt de aanwezigheid van een e-mail in de database gecontroleerd telkens wanneer er een teken in het e-mailveld wordt ingevoerd. In het script is de sectie $("#email").keyup(function()()); verantwoordelijk voor het verwerken van invoer. , die controleert op een toetsaanslag in een veld met id = "email" .
Zoals je kunt zien, is de code vrij eenvoudig en vereist het geen bijzonder goede vaardigheden om te begrijpen. Alles is gekoppeld aan het verwerken van de gebeurtenissen keyup() - een toetsaanslag, klik() - een muisklik op een element. Dit wordt gevolgd door een AJAX-verzoek en antwoord van het script. Met php en ajax kun je dus bijna onbegrensde mogelijkheden om interactieve pagina's te maken.
Deze code pretendeert niet van hoge kwaliteit te zijn, maar als u hem ontwikkelt, de juiste validaties op client- en serverniveau toevoegt en CSS introduceert, dan kan deze in uw projecten worden gebruikt.
Als u vragen heeft, aarzel dan niet om opmerkingen te schrijven.
Ik wens je Fijne dag en tot snel :)

Een set sleutel/waarde-paren die de aanvraag configureren AJAX. Alle parameters zijn optioneel. Het is acceptabel, maar niet aanbevolen, om voor elke parameter een standaardwaarde in te stellen met behulp van de methode $.ajaxSetup().
De methode $.ajax() ondersteunt de volgende parameters:

accepteert (standaard: afhankelijk van dataType ).

Type: Gewoon object.
Een set sleutel/waarde-paren waarnaar wordt verzonden Accepteren 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 antwoordwaarde 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 query's 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 meer kunt krijgen volledige informatie over de reactie van de server, 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" "jsonp" En

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"script" HOOFD KRIJGEN

verzoeken.

Type: Functie(jqXHR Type: Functie(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: Type: Functie(jqXHR(in jQuery 1.4.x-object XMLHTTPRequest) en een regel die overeenkomt met de verzoekstatus ( "succes", "niet gewijzigd", "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. Vanaf 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 raamobject. 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 de class.myClass ) ) );

converters

Standaardwaarden:
( "* 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 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 HOOFD 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 Hoe platte tekst, tags worden verwerkt en uitgevoerd na invoeging in objectmodel documenteren ( 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 HOOFD 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. JSON Gegevens JSON worden in een strikte volgorde geparseerd en moeten voldoen aan het algemeen aanvaarde formaat, indien onjuist
• wordt afgewezen en er wordt een fout gegenereerd. Sinds jQuery 1.9 wordt een leeg antwoord niet geaccepteerd, de server moet NULL of () als antwoord retourneren. JSON"jsonp" - laadt gegevens in het formaat , met behulp van het downloadformaat JSONP . Voegt een extra parameter "?callback=?" toe aan het einde URL . Voegt een extra parameter "?callback=?" toe aan het einde 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 gegevenstype dat wordt ontvangen, converteren Koptekst Inhoudstype, naar het gewenste gegevenstype. 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 , met behulp van het downloadformaat V XML, na een mislukte poging zal proberen te converteren , met behulp van het downloadformaat in de tekst en vervolgens van de tekst naar XML.

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

  • Type: Functie(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""script" "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 serverfout".
  Sinds versie over de reactie van de server, en het object bevat ook Promise-methoden. Als de beforeSend-functie false retourneert, wordt het AJAX-verzoek geannuleerd. Sinds versie 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 ingesteld op false , negeert headervelden HTTP-verzoek, en als de waarde waar is, wordt het AJAX-verzoek met succes overgedragen naar de 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"script" 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 , met behulp van het downloadformaat verzoek. Deze waarde wordt gebruikt in plaats van "callback" ( "http://domein.ru/test.php?callback=?") als onderdeel van een queryreeks in URL-adres e. De waarde (jsonp: "onLoad") wordt bijvoorbeeld in het formulier naar de server verzonden volgende regel verzoek "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 , met behulp van het downloadformaat 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 HOOFD 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.

  mimeType.

  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 meerdere domeinen met een parameter type met de waarde "KRIJGEN"(standaard) en dataType-parameter met waarde "jsonp", of cache (standaard: true, voor dataType.

  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). Bijvoorbeeld, volgende functie wordt aangeroepen als er een responscode wordt ontvangen van de server 404 , of "Niet gevonden" (standaardcode HTTP-antwoord dat aangeeft dat de client met de server heeft kunnen communiceren, maar de server kan de gegevens niet vinden zoals gevraagd.): $.ajax(( statusCode : ( 404: function ()( // voer de functie uit als de HTTP-antwoordcode is 404 alert("pagina niet gevonden"); , 403: function ()( // voer de functie uit als de HTTP-antwoordcode 403 alert("toegang geweigerd"); ) ) ) is);

  succes.

  Type: Functie (alles gegevens, Snaar tekstStatus, jqXHR Type: Functie(jqXHR).
  Een callback-functie die wordt aangeroepen als het AJAX-verzoek succesvol is.

  • gegevens Er worden drie argumenten aan de functie doorgegeven:
  • tekstStatus- gegevens geretourneerd door de server. De gegevens worden opgemaakt volgens de parameters dataType of dataFilter , indien opgegeven
  • Type: Functie(jqXHR- een string die de status van het verzoek beschrijft. - jqXHR-object (tot versie jQuery 1.4.x
  XMLHttpRequest-object). over de reactie van de server, en het object bevat ook Promise-methoden. Als de beforeSend-functie false retourneert, wordt het AJAX-verzoek geannuleerd. Sinds versie Sinds versie

• 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 0 time-out aanvragen. Betekenis

  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.

  Type: Booleaans.
  Als u van plan bent traditionele serialisatie-opties te gebruiken (geschikt voor gebruik in string . Voegt een extra parameter "?callback=?" toe aan het einde 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 . Voegt een extra parameter "?callback=?" toe aan het einde het adres waarnaar het verzoek wordt verzonden.

  gebruikersnaam.

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

  xhr (standaard: ActiveXObject, indien 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 behulp van 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 + ) ) );

Het artikel is lang geleden geschreven - 08/03/2010

Zoals beloofd vervolg ik de serie artikelen over JQuery - een uitstekend JavaScript-framework waarmee je alles kunt doen!

In het laatste artikel hadden we het over JQuery in het algemeen - we keken naar het principe van de werking ervan en de eenvoudigste voorbeelden werden gegeven. In dit artikel zullen we een onderwerp als AJAX bespreken met behulp van JQuery(met voorbeelden).

xmlHttpRequest

Weet jij wat xmlHttpRequest is? XmlHttpRequest is een object waarmee de browser verzoeken aan de server kan doen zonder de pagina opnieuw te laden. En dit blijkt in feite uit de naam: http-verzoek - een verzoek om http-protocol. Maar met xml is het interessanter: ondanks de aanduiding van deze taal in de naam, werkt het XHR-object (dit is een afkorting van xmlHttpRequest) met gegevens van elk formaat, niet alleen met XML. Eigenlijk is de Ajax-technologie op dit onderdeel gebaseerd. Je kunt er meer over lezen op de website xmlhttprequest.ru, voorbeelden van gebruik kun je zien op artikel over CURLe, maar dit is voor ons nu van weinig belang. Laten we nu eens kijken naar Ajax met JQuery.

jQuery AJAX

Zoals altijd - van eenvoudig tot complex:

$.ajax(( url: "/ajax.php?act=jquery_test", // De URL waartoe we toegang hebben typ: "KRIJG", // type: kan GET of POST zijn (meer daarover hieronder) succes: functie(antwoord)( // succes - een functie die wordt aangeroepen wanneer het verzoek succesvol is en de gegevens zijn ontvangen alert("De server heeft het antwoord geretourneerd: " + antwoord);

)));

Dit is het eenvoudigste voorbeeld van het gebruik van Ajax in JQuery. Laten we nu eens kijken hoe u gegevens naar de server kunt verzenden met behulp van de POST-methode: $.ajax(( url: "/ajax.php?act=ajax_jquery_post", type: "POST", contentType: "application/x-www-form-urlencoded", // Type overgedragen gegevens data: "text="+$("#text").val() +"&id=282&c=w", // en dit zijn in feite gegevens (willekeurig)

success: function(response)( alert("Gegevens verzonden! De server heeft het antwoord geretourneerd: " + respons); ) ));

Dit was een voorbeeld van het verzenden van gegevens naar de server met behulp van JQuery AJAX. Nu iets over andere formaten: $.ajax(( url: "ajax.php?act=ajax_jquery", type: "POST", dataType: "JSON", // formaten kunnen zijn: JSON, XML, HTML, tekst en enkele andere

data: someData, succes: function(response)( //enkele acties ) ));

• Naast het feit dat we voor de ‘succes’-gebeurtenis een handler kunnen koppelen, kunnen we ook de afhandeling van andere evenementen koppelen:
• succes wordt aangeroepen wanneer het verzoek slaagt. Er worden parameters doorgegeven: gegevens die door de server worden geretourneerd, een string met de serverresponscode en een xmlHttpRequest-object.
• fout wordt aangeroepen wanneer het verzoek mislukt. Verzonden: xmlHttpRequest en een string die het fouttype aangeeft
• complete wordt aangeroepen wanneer het verzoek is voltooid. Het eindigde gewoon, of het nu geluk was of niet. Verzonden: xmlHttpRequest en een string die de succes- of foutcode aangeeft.
• dataFilter wordt aangeroepen voordat succes wordt aangeroepen. De gegevens die van de server worden ontvangen, worden ernaar verzonden. Daarin kunnen we wat met de gegevens werken en moeten we deze retourneren (retour ...). Als deze functie aanwezig is, wordt wat we uit het dataFilter retourneren succesvol

beforeSend wordt, zoals de naam al doet vermoeden, aangeroepen voordat een verzoek naar de server wordt verzonden
Persoonlijk gebruik ik meestal succes en fouten, en soms compleet, en de rest gebruik ik zeer zelden.

Nu een voorbeeld: $.ajax(( url: "ajax.php?act=iets", type: "GET", // iets we krijgen succes: function(response, code)( // ja, we hebben de laatste parameter gemist - we hebben deze niet nodig if (code==200)( alert("De server heeft geretourneerd: " + respons); )else( alert("De server heeft een vreemde responscode geretourneerd: " + code); ) ), error: function(xhr, str) ( alert("Er is een fout opgetreden: " + xhr.responseCode); ) complete: function())( // en hier nemen we geen van de voorgestelde parameters :) Ze verborgen bijvoorbeeld een knop die een verzoek veroorzaakte } });

Dit is een serieuzer, professioneel voorbeeld, om zo te zeggen, met foutafhandeling.

jQuery.ajaxSetup()

Er is zo'n prachtige methode in JQuery - ajaxSetup. Met zijn hulp kunt u globaal alle noodzakelijke opties instellen gedurende het hele script. Voorbeeld:

$(document).ready(function())( $.ajaxSetup(( url: "ajax.php", type: "POST", succes: function(data)( $("#somefield").val(data) ; ) fout: function())( $("#somebutton").addClass("error"); ) )); $("#somebutton1").click(function())( $.ajax((data: "act= 1") )); $("#some2").klik(functie())( $.ajax((gegevens: "act=2")); ) ));

$.ajax-opties

En nu, na een beetje geoefend te hebben, zal ik je het theoretische gedeelte vertellen - over JQuery Ajax-opties

• asynchroon (waar of onwaar). Standaard ingesteld op waar. Schakelt asynchrone verzoeken in of uit (zie xmlHttpRequest-component). Houd er rekening mee dat als u synchrone verzoeken inschakelt, u uw browser mogelijk laat crashen!
• cache (waar of onwaar). Schakelt browsercaching in of uit
• inhoudstype(tekenreeks). Het type inhoud dat naar de server wordt verzonden. Gebruik bij het indienen van formulieren application/x-www-form-urlencoded
• gegevens(tekenreeks). Gegevens verzonden naar de server.
• gegevensType(tekenreeks). Het type gegevens dat van de server wordt verwacht. Als er niets is opgegeven, probeert JQuery het resultaat te bepalen op basis van het MIME-type van het antwoord. Kan waarden aannemen: xml, json, script, html.
• ifModified (waar of onwaar (standaard)). Indien ingesteld op true, zal het verzoek alleen slagen als het antwoord is veranderd sinds het laatste verzoek (dit wordt bereikt door de Last-Modified-header te controleren)
• time-out (in milliseconden). De waarde waarna de verbinding met de server wordt verbroken (time-out)
• type (tekenreeks: GET of POST). Type verzoek aan de server: GET of POST
• url (tekenreeks). De serverpagina waarnaar het verzoek wordt verzonden.

Dus we ontdekten Ajax op JQuery. Wachten volgend artikel— het zal naar iets lekkers kijken met JQuery;)