Ik denk dat het niet de moeite waard is om te vertellen wat AJAX is, want met de komst van het web two-zero halen de meeste gebruikers al hun neus op voor het volledig herladen van pagina's, en met de komst van jQuery is de implementatie veel eenvoudiger geworden ...
Opmerking: Alle voorbeelden gebruiken een verkorte manier om jQuery-methoden aan te roepen 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. De laadmethode is hiervoor geschikt. Deze methode kan de volgende parameters aannemen:
- url van de opgevraagde pagina
- functie waarvan het resultaat wordt ingevoerd (optionele parameter)
// aan het einde van het laden van de pagina
$ (document). klaar (functie () (
// hang op een klik op een element met id = voorbeeld-1
$ ("# voorbeeld-1"). klik (functie () (
// laad HTML-code van het bestand voorbeeld.html
$ (dit). laden ("ajax / voorbeeld.html");
} )
} ) ;
Een voorbeeld van geladen gegevens (bestandsinhoud voorbeeld.html):
jQuery.ajax
Dit is de meest eenvoudige methode en alle volgende methoden zijn slechts wrappers voor de jQuery.ajax-methode. Deze methode heeft slechts één invoerparameter - een object dat alle instellingen bevat (parameters die het waard zijn om te onthouden zijn gemarkeerd):- async - asynchrone aanvraag, standaard true
- cache - cache van browsergegevens in-/uitschakelen, standaard true
- contentType - standaard "application / x-www-form-urlencoded"
- gegevens- verzonden gegevens - tekenreeks of object
- dataFilter - filter voor invoergegevens
- data type- gegevenstype geretourneerd naar de callback-functie (xml, html, script, json, tekst, _default)
- global - trigger - verantwoordelijk voor het gebruik van globale AJAX-evenementen, standaard true
- ifModified - trigger - controleert of er wijzigingen zijn in de serverreactie, om niet nog een verzoek te verzenden, standaard false
- jsonp - reset de naam van de callback-functie om met JSONP te werken (standaard gegenereerd)
- processData - standaard worden verzonden gegevens verpakt in een object en verzonden als "application / x-www-form-urlencoded", indien nodig anders - uitschakelen
- 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
- compleet - vuurt aan het einde van het verzoek
- gebruikersnaam - inloggen
- wachtwoord - wachtwoord
$ .ajax ((
url: "/ajax/example.html", // specificeer de URL en
gegevenstype: "json", // type geladen gegevens
succes: functie (data, textStatus) ( // we hangen onze handler aan de succesfunctie
$ .elk (gegevens, functie (i, val) ( // verwerk de ontvangen gegevens
/* ... */
} ) ;
}
} ) ;
jQuery.get
Laadt een pagina met behulp van een GET-verzoek om gegevens over te dragen. Het kan de volgende parameters hebben:- url van de opgevraagde pagina
- verzonden gegevens (optioneel)
- callback-functie, die het resultaat zal worden gevoed (optionele parameter)
- gegevenstype geretourneerd naar de callback-functie (xml, html, script, json, tekst, _default)
Het formulier verzenden
Om een formulier via jQuery in te dienen, kunt u een van de vermelde methoden gebruiken, maar voor het gemak van het "verzamelen" van gegevens uit het formulier, is het beter om de jQuery Form-plug-in te gebruikenBestanden verzenden
Om bestanden via jQuery te verzenden, kunt u de Ajax File Upload-plug-in of One Click Upload gebruikenVoorbeelden van het gebruik van JSONP
Het gebruik van JSONP is vermeldenswaard omdat het een van de manieren is om het laden van gegevens over meerdere domeinen te implementeren. Als we een beetje overdrijven, dan is dit de verbinding van JavaScript op afstand "a die de informatie bevat die we nodig hebben in JSON-indeling, evenals een oproep naar onze lokale functie, waarvan we de naam specificeren bij toegang tot de externe server (meestal is dit een parameter terugbellen). Het volgende diagram (klikbaar) kan dit iets duidelijker aantonen:
Bij het werken met jQuery wordt de naam van de callback-functie automatisch gegenereerd voor elke oproep naar de externe server, hiervoor volstaat het om een GET-verzoek van het formulier te gebruiken:
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 de naam van de callback-functie expliciet specificeren met behulp van de jsonp-optie bij het aanroepen van de jQuery.ajax () -methode.
JQuery is een javascript-bibliotheek waarvan het doel is "minder schrijven, meer doen". jQuery is eenvoudig te verbinden met uw site en te gebruiken. Met jQuery wordt het veel gemakkelijker om javascript op uw site te gebruiken.
jQuery elimineert een hele reeks javascript-coderegels en laat u die reeks regels met slechts één methode implementeren.
Wat is AJAX?
AJAX is asynchroon (d.w.z. de browser die een verzoek heeft verzonden, kan alles doen, bijvoorbeeld een bericht weergeven over wachten op een reactie, door de pagina bladeren, enz.) JavaScript en XML. Het wordt gebruikt om dynamische en snelle webpagina's te maken. Met AJAX kunnen we een deel van een webpagina bijwerken zonder de hele pagina opnieuw te laden.
Hoe zit het met jQuery en AJAX?
De combinatie van jQuery en AJAX zorgt voor krachtige functionaliteit. Met jQuery en ajax kun je een verzoek indienen en informatie krijgen in verschillende formaten, waaronder XML, HTML en zelfs platte tekst. U kunt het JSON-formaat gebruiken om gegevens uit te wisselen. We kunnen de gegevens die we hebben ontvangen van het ajax-verzoek gebruiken in onze html-pagina.
jQuery maakt de bestaande browsergebaseerde Ajax API krachtiger en gebruiksvriendelijker. Het maken van ajax-aanroepen op de normale manier met javascript is een beetje lastig: omdat je er rekening mee moet houden dat verschillende browsers verschillende benaderingen vereisen voor het maken van het XMLHttpRequest-object. Ook wordt het verzenden van gegevens van bijvoorbeeld formulieren moeilijker als je regulier javascript gebruikt voor de ajax-aanroep.
jQuery biedt eenvoudige en krachtige functionaliteit die javascript AJAX-methoden uitbreidt en een flexibelere aanpak biedt.
In dit korte artikel laat ik je zien hoe jQuery en AJAX te gebruiken in een eenvoudige php-vorm... Laten we beginnen ... Om jQuery en AJAX te gebruiken, hebben we twee bestanden nodig, het eerste bestand bevat de html / php-code, waarmee het ajax-verzoek wordt gedaan. In het tweede bestand behandelen we het ajax-verzoek en sturen we het resultaat terug naar de eerste pagina.
Stap 1. Maak een bestand school.php en plak de volgende code erin:
In de bovenstaande code krijgen we de naam en het nummer van de student en, met behulp van jquery en ajax, sturen we deze naar details.php.
| Uw naam: | ||
| Rolnummer: | ||
Stap 2: Maak details.php en plaats de volgende code erin:
In de bovenstaande code krijgen we het adres van de student met behulp van het volgnummer en zijn naam.
Voor dit voorbeeld moet u een schooldatabase en een leerlingentabel maken. De studententabel bevat velden met namen, volgnummer en adres.
Ik hoop dat je dit artikel nuttig vindt.
AJAX is een acroniem dat staat voor Asynchronous Javascript en XML. Eigenlijk is AJAX geen nieuwe technologie, aangezien zowel Javascript als XML al geruime tijd bestaan, en AJAX is een synthese van deze technologieën. AJAX wordt meestal geassocieerd met de term Web 2.0 en aangeprezen als de nieuwste webtoepassing.
Met AJAX is het niet nodig om elke keer de hele pagina te vernieuwen, omdat slechts een specifiek deel ervan wordt bijgewerkt. Het is veel handiger, omdat je niet lang hoeft te wachten, en zuiniger, omdat niet iedereen onbeperkt internet heeft. Toegegeven, in dit geval moet de ontwikkelaar ervoor zorgen dat de gebruiker op de hoogte is van wat er op de pagina gebeurt. Dit kan met behulp van laadindicatoren, sms-berichten die aangeven dat er gegevens worden uitgewisseld met de server. Het moet ook duidelijk zijn dat niet alle browsers AJAX ondersteunen (oudere versies van browsers en tekstbrowsers). Bovendien kan Javascript door de gebruiker worden uitgeschakeld. Daarom mag u het gebruik van technologie niet misbruiken en uw toevlucht nemen tot alternatieve methoden om informatie op de website te presenteren.
Om de voordelen van AJAX samen te vatten:
- De mogelijkheid om een handige webinterface te maken
- Actieve gebruikersinteractie
- Het gebruiksgemak
Data uitwisseling
Om gegevens uit te wisselen, moet op de pagina een XMLHttpRequest-object worden aangemaakt, dat een soort bemiddelaar is tussen de browser van de gebruiker en de server (Fig. 1). Met XMLHttpRequest kunt u een verzoek naar de server sturen en een reactie ontvangen in de vorm van verschillende soorten gegevens.
Er zijn twee manieren om gegevens uit te wisselen met de server. De eerste manier is een GET-verzoek. In dit verzoek krijg je toegang tot een document op de server door er argumenten aan door te geven via de URL zelf. In dit geval is het aan de clientzijde logisch om de Javascript-escape-functie te gebruiken, zodat sommige gegevens het verzoek niet onderbreken.
Het clientgedeelte, geschreven in Javascript, moet de nodige functionaliteit bieden om veilig met de server te communiceren en methoden bieden voor het uitwisselen van gegevens op een van de bovenstaande manieren. De serverkant moet de invoergegevens verwerken en op basis daarvan nieuwe informatie genereren (bijvoorbeeld werken met een database) en deze teruggeven aan de klant. Om bijvoorbeeld informatie van de server op te vragen, kunt u een normaal GET-verzoek gebruiken met de overdracht van verschillende en kleine parameters, en om informatie bij te werken of nieuwe informatie toe te voegen, moet u een POST-verzoek gebruiken, omdat dit u om grote hoeveelheden gegevens over te dragen.
Zoals eerder vermeld, maakt AJAX gebruik van asynchrone gegevensoverdracht. Dit betekent dat terwijl de gegevensoverdracht aan de gang is, de gebruiker andere acties kan uitvoeren die hij nodig heeft. Op dit moment moet u de gebruiker op de hoogte stellen dat er een soort gegevensuitwisseling aan de gang is, anders denkt de gebruiker dat er iets fout is gebeurd en kan hij de site verlaten of de functie opnieuw oproepen, wat naar zijn mening is " bevroren". Indicatie tijdens gegevensuitwisseling in een Web 2.0-applicatie speelt een zeer belangrijke rol: bezoekers zijn wellicht nog niet gewend aan deze manier van paginaverversen.
Het antwoord van de server kan niet alleen XML zijn, zoals de naam van de technologie suggereert. Naast XML kunt u een antwoord krijgen in platte tekst of JSON (Javascript Object Notation). Als het antwoord in platte tekst is ontvangen, kan het onmiddellijk worden weergegeven in een container op de pagina. Wanneer een XML-antwoord wordt ontvangen, wordt het resulterende XML-document meestal aan de clientzijde verwerkt en worden de gegevens geconverteerd naar (X) HTML. Bij het ontvangen van een JSON-antwoord hoeft de client alleen de ontvangen code uit te voeren (de Javascript-evalfunctie) om een compleet Javascript-object te krijgen. Maar hier moet u voorzichtig zijn en rekening houden met het feit dat met behulp van deze technologie kwaadaardige code kan worden verzonden, daarom moet deze zorgvuldig worden gecontroleerd en verwerkt voordat de code wordt uitgevoerd die van de server is ontvangen. Er is zo'n praktijk als een "dummy"-verzoek, waarbij geen antwoord van de server wordt ontvangen, alleen de gegevens aan de serverzijde worden gewijzigd.
Dit object heeft verschillende eigenschappen in verschillende browsers, maar is over het algemeen hetzelfde.
XMLHttpRequest-objectmethoden
Merk op dat methodenamen in dezelfde Camel-stijl zijn geschreven als andere Javascript-functies. Wees voorzichtig bij het gebruik ervan.
afbreken ()- annulering van het huidige verzoek aan de server.
getAllResponseHeaders ()- haal alle antwoordheaders van de server.
getResponseHeader ("header_name")- verkrijg de opgegeven titel.
open ("request_type", "url", "asynchroon", "gebruikersnaam", "wachtwoord")- initialisatie van een verzoek aan de server, een indicatie van de verzoekmethode. Verzoektype en URL zijn vereiste parameters. Het derde argument is een booleaanse waarde. Gewoonlijk wordt het altijd gespecificeerd als waar of helemaal niet gespecificeerd (de standaard is waar). Het vierde en vijfde argument worden gebruikt voor authenticatie (het is erg onveilig om authenticatiegegevens op te slaan in een script, aangezien elke gebruiker het script kan bekijken).
verzenden ("inhoud")- stuur een HTTP-verzoek naar de server en ontvang een reactie.
setRequestHeader ("header_name", "value")- stel de waarden van de aanvraagheader in.
Objecteigenschappen XMLHttpRequest
onreadystatechange is een van de belangrijkste eigenschappen van het XMLHttpRequest-object. Met behulp van deze eigenschap wordt een handler ingesteld, die elke keer wordt aangeroepen als de status van een object verandert.
readyState- een nummer dat de status van het object aangeeft.
reactietekst- presentatie van het serverantwoord in de vorm van platte tekst (string).
responseXML- een DOM-compatibel documentobject ontvangen van de server.
toestand- de status van het antwoord van de server.
statusText- tekstuele weergave van de status van het antwoord van de server.
U moet de eigenschap readyState van naderbij bekijken:
- 0 - Het object is niet geïnitialiseerd.
- 1 - Het object laadt gegevens.
- 2 - Het object heeft zijn gegevens geladen.
- 3 - Het object is niet volledig geladen, maar het kan communiceren met de gebruiker.
- 4 - Het object is volledig geïnitialiseerd; reactie ontvangen van de server.
Een XMLHttpRequest-object maken
Zoals hierboven vermeld, is het maken van dit object voor elk type browser een uniek proces.
Als u bijvoorbeeld een object wilt maken in Gecko-compatibele browsers, Konqueror en Safari, gebruikt u de volgende uitdrukking:
Var Request = nieuw XMLHttpRequest ();
En voor Internet Explorer wordt het volgende gebruikt:
Var Request = nieuw ActiveXObject ("Microsoft.XMLHTTP");
Var Request = nieuw ActiveXObject ("Msxml2.XMLHTTP");
Om compatibiliteit tussen verschillende browsers te bereiken, moet u nu alle functies in één toevoegen:
Functie CreateRequest () (var Request = false; if (window.XMLHttpRequest) (// Gecko-compatibele browsers, Safari, Konqueror Request = new XMLHttpRequest ();) else if (window.ActiveXObject) (// Internet explorer try (Request = new ActiveXObject ("Microsoft.XMLHTTP");) catch (CatchException) (Request = new ActiveXObject ("Msxml2.XMLHTTP");)) if (! Request) (waarschuwing ("Kan XMLHttpRequest niet maken"));) return Request; )
Na dit alles kunt u dit object maken en hoeft u zich geen zorgen te maken over de prestaties van populaire browsers. Maar u kunt een object op verschillende plaatsen maken. Als u het globaal aanmaakt, is op een bepaald moment slechts één verzoek aan de server mogelijk. Het is mogelijk om een object aan te maken wanneer er een verzoek aan de server is (dit zal het probleem bijna volledig oplossen).
Serververzoek
Het algoritme voor het opvragen van de server ziet er als volgt uit:
- Controleren op het bestaan van XMLHttpRequest.
- Initialisatie van de verbinding met de server.
- Een verzoek naar de server verzenden.
- Verwerking van de ontvangen gegevens.
/ * Functie voor het verzenden van een verzoek naar een bestand op de server r_method - verzoektype: GET of POST r_path - pad naar een bestand r_args - argumenten van de vorm a = 1 & b = 2 & c = 3 ... r_handler - functie die een reactie van de server afhandelt * / function SendRequest (r_method , r_path, r_args, r_handler) (// Maak een verzoek var Request = CreateRequest (); // Controleer het bestaan van het verzoek opnieuw als (! Request) (return; ) // Wijs een aangepaste handler toe Request.onreadystatechange = function () (// Als de gegevensuitwisseling voltooid is als (Request.readyState == 4) (// Besturing overdragen aan de gebruikershandler r_handler (Request);)) // Controleren als een GET-verzoek is vereist if (r_method.toLowerCase () == "get" && r_args.length> 0) r_path + = "?" + r_args; // Initialiseer de verbinding Request.open (r_method, r_path, true); if (r_method.toLowerCase () == "post") (// Als dit POST-request is // Stel de Request.setRequestHeader in ("Content-Type", "application / x-www-form-urlencoded; charset = utf -8"); // Verzenden m verzoek Request.send (r_args); ) else (// Als dit een GET-verzoek is // Stuur een null-verzoek Request.send (null);))
Het is veel eenvoudiger geworden om een aanvraag aan te maken. Laten we bijvoorbeeld een functie schrijven die de inhoud van een bestand op de server ontvangt en naar een container uitvoert.
Functie ReadFile (bestandsnaam, container) (// Maak een handlerfunctie var Handler = function (Request) (document.getElementById (container) .innerHTML = Request.responseText;) // Stuur een verzoek SendRequest ("GET", bestandsnaam, " ", Behandelaar);)
Zo vindt de interactie met de server plaats.
Responsafhandeling
In het vorige voorbeeld hebben we een serververzoekfunctie gemaakt. Maar het is in feite onveilig, omdat we de status van het object en de status van het antwoord van de server niet verwerken.
Laten we onze code bijwerken zodat deze een visuele melding over het laadproces kan weergeven.
Request.onreadystatechange = function () (// Als de gegevensuitwisseling voltooid is if (Request.readyState == 4) (// Besturing overdragen aan de gebruikershandler r_handler (Request);) else (// De gebruiker informeren over het laden)) ...
Zoals u al weet, laat het object XMLHttpRequest u de status van het antwoord van de server weten. Laten we deze kans grijpen.
Request.onreadystatechange = function () (// Als de gegevensuitwisseling voltooid is if (Request.readyState == 4) (if (Request.status == 200) (// Besturing overdragen aan de gebruikershandler r_handler (Request);) else (// Informeer de gebruiker over de fout)) else (// Informeer de gebruiker over de download)) ...
Opties voor serverreacties
Er kunnen verschillende soorten gegevens van de server worden ontvangen:
- Platte tekst
Json is Javascript-objectnotatie. Het kan worden gebruikt om een object als een string weer te geven (hier is een analogie met een serialisatiefunctie). Wanneer u JSON-gegevens ontvangt, moet u deze uitvoeren om een volwaardig Javascript-object te krijgen en de nodige bewerkingen erop uit te voeren. Houd er rekening mee dat dergelijke gegevensoverdracht en uitvoering niet veilig is. Je moet bijhouden wat er voor uitvoering komt.
Voorbeeld JSON-code:
("data": ("misc": [("name": "JSON item één", "type": "Subheading 1"), ("name": "JSON item twee", "type": " Subtitle 2 ")]))
Na ontvangst van een dergelijke code voeren we de volgende actie uit:
Var responsedata = eval ("(" + Request.responseText + ")")
Na het uitvoeren van deze code is het object voor u beschikbaar reactiegegevens.
Werken met programmeertalen aan de serverzijde
Dit soort werk is niet anders dan normaal. Als voorbeeld neem ik PHP als de server-side taal. Er is niets veranderd aan de clientzijde, maar de serverzijde wordt nu weergegeven door een PHP-bestand.
Laten we traditiegetrouw beginnen met het begroeten van onze wondere wereld:
Echo "Hallo, wereld!";
Wanneer dit bestand wordt geopend, retourneert de client de tekenreeks Hallo, Wereld. Zoals u zich kunt voorstellen, biedt dit de breedste mogelijkheden voor bouwtoepassingen. Door argumenten door te geven bij het aanroepen van de server met XMLHttpRequest, kunt u de uitvoer parametriseren, waardoor u uitgebreide functionaliteit voor uw webtoepassing krijgt.
Naast PHP kunt u elke andere programmeertaal aan de serverzijde gebruiken.
Doet een verzoek aan de server zonder de pagina opnieuw te laden. Dit is een low-level methode met veel maatwerk. Het vormt de kern van alle andere ajax-methoden. Heeft twee gebruiksscenario's:
url- adres opvragen.
instellingen- in deze parameter kunt u de instellingen voor deze aanvraag instellen. Opgegeven met behulp van een object in het formaat (naam: waarde, naam: waarde ...). Geen van de instellingen is vereist. U kunt de standaardinstellingen instellen met de methode $ .ajaxSetup ().
Instellingenlijst
↓ naam: type (standaard)
Wanneer een aanvraag wordt gedaan, specificeren de headers de geldige inhoudstypen die van de server worden verwacht. Waarden van dit type worden overgenomen uit de parameter Accepts.
Standaard vinden alle verzoeken zonder herladen van de pagina asynchroon plaats (dat wil zeggen, na het verzenden van een verzoek naar de server stopt de pagina niet met werken in afwachting van een reactie). Als u synchrone query-uitvoering nodig hebt, stelt u de para meter in op false. Cross-domain en "jsonp"-verzoeken kunnen niet synchroon worden uitgevoerd.
Houd er rekening mee dat het uitvoeren van verzoeken in synchrone modus kan leiden tot paginablokkering totdat het verzoek volledig is voltooid.
Dit veld bevat een functie die wordt aangeroepen net voordat het ajax-verzoek naar de server wordt verzonden. Zo'n functie kan handig zijn voor het wijzigen van een jqXHR-object (in eerdere versies van de bibliotheek (tot 1.5) wordt XMLHttpRequest gebruikt in plaats van jqXHR). U kunt bijvoorbeeld de vereiste headers wijzigen / specificeren, enz. Object-jqXHR wordt als eerste argument aan de functie doorgegeven. Het tweede argument zijn de verzoekinstellingen.
In dit veld kunnen extra aanvraagheaders (header) worden opgegeven. Deze wijzigingen zijn van kracht voorafgaand aan de aanroep van beforeSend, waarin definitieve koptekstbewerkingen kunnen worden aangebracht.
Als deze instelling is ingesteld op 'true', wordt het verzoek alleen uitgevoerd met de status 'geslaagd' als het antwoord van de server afwijkt van het vorige antwoord. jQuery verifieert dit door te kijken naar de Last-Modified header. Vanaf 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 gevraagde gegevens van de server niet zijn gewijzigd sinds het vorige verzoek).
Hiermee kunt u de status van de paginabron op lokaal instellen (alsof het het bestandsprotocol gebruikt), zelfs als jQuery het anders herkende. De bibliotheek beslist dat de pagina lokaal wordt gestart in het geval van de volgende protocollen: bestand, * -extensie en widget.
Het wordt aanbevolen om de parameterwaarde in te stellen: isLocal globaal met behulp van de $ .ajaxSetup () functie, 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 - "httr: //siteName.ru? Callback = ...").
Vanaf jQuery-1.5 zal het specificeren van false in deze parameter voorkomen dat de extra parameter aan de url wordt toegevoegd. In dit geval moet u expliciet de waarde van de eigenschap jsonpCallback instellen. Bijvoorbeeld als volgt: (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 willekeurige naam voor deze functie, wat de voorkeursoptie is om de bibliotheek gemakkelijker te maken om mee te werken. Een van de redenen waarom u uw eigen functie voor het afhandelen van jsonp-verzoeken zou moeten specificeren, is om de caching van GET-verzoeken te verbeteren.
Sinds jQuery-1.5 kunt u in deze parameter een functie specificeren om de serverreactie zelf af te handelen. In dit geval moet de opgegeven functie de gegevens retourneren die van de server zijn ontvangen (in de opgegeven functie zijn ze beschikbaar in de eerste parameter).
Standaard worden alle gegevens die naar de server worden verzonden, vooraf geconverteerd naar een string (url-formaat: fName1 = waarde1 & fName2 = waarde2 & ...) die overeenkomt met "application / x-www-form-urlencoded". Als u gegevens moet verzenden die niet op deze manier kunnen worden verwerkt (bijvoorbeeld een DOM-document), moet u de optie processData uitschakelen.
Deze parameter wordt gebruikt voor ajax-verzoeken tussen domeinen van het GET-type, het dataType kan "jsonp" of "script" zijn. Bepaalt de codering waarin het domeinoverschrijdende verzoek wordt uitgevoerd. Dit is nodig als de server op een vreemd domein een codering gebruikt die verschilt van de codering op de thuisdomeinserver.
(Deze instelling is geïntroduceerd in jQuery-1.5) een set paren waarin de uitvoeringscodes van het verzoek worden toegewezen aan de functies die in dit geval worden aangeroepen. Voor bijvoorbeeld een 404-code (pagina's bestaan niet), kunt u een bericht op het scherm weergeven:
$ .ajax ((statusCode: (404: functie () (waarschuwing ( "Pagina niet gevonden") ; } } } ) ;
Functies die reageren op codes voor succesvolle uitvoering van een verzoek zullen dezelfde argumenten ontvangen als functies die een succesvolle uitvoering van een verzoek afhandelen (gespecificeerd in de succesparameter), en functies die reageren op foutcodes zullen hetzelfde zijn als voor foutfuncties.
De functie die wordt aangeroepen als het verzoek aan de server is voltooid. Er worden drie parameters aan doorgegeven: gegevens verzonden door de server en al voorverwerkt (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 (tot 1.5) wordt XMLHttpRequest gebruikt in plaats van jqXHR). Sinds jQuery-1.5 kan deze parameter, in plaats van een enkele functie, een reeks functies aannemen.
Tijd om te wachten op een reactie van de server. Ingesteld in milliseconden. Als deze tijd wordt overschreden, zal het verzoek worden voltooid met een fout en een foutgebeurtenis (zie beschrijving hierboven) die de status "time-out" heeft.
De tijd wordt geteld vanaf het moment dat de $ .ajax-functie wordt aangeroepen. Het kan voorkomen dat er op dit moment meerdere andere verzoeken worden gestart en dat de browser de uitvoering van het huidige verzoek uitstelt. In dit geval time-out kan worden voltooid, hoewel het verzoek in feite nog niet eens is gestart.
In jQuery-1.4 en eerder, wanneer de time-out verloopt, zal het XMLHttpRequest-object een foutstatus krijgen en kan toegang tot zijn velden een uitzondering veroorzaken. V Firefox 3.0+ script- en JSONP-verzoeken worden niet afgebroken als er een time-out optreedt. Ze zullen worden voltooid, zelfs nadat deze tijd is verstreken.
Een functie die een XMLHttpRequest-object levert. Standaard is dit object voor IE-browsers een ActiveXObject, anders is het XMLHttpRequest. Met deze parameter kunt u uw eigen versie van dit object insluiten.
(Deze instelling is geïntroduceerd in jQuery-1.5.1) Een set (naam:waarde)paren voor het wijzigen/toevoegen van de waarden van de corresponderende velden van het XMLHttpRequest object. U kunt bijvoorbeeld de eigenschap withCredentials instellen op true wanneer u een aanvraag voor meerdere domeinen uitvoert:
$ .ajax ((url: a_cross_domain_url, xhrFields: (withCredentials: true)));
V jQuery-1.5 de eigenschap withCredentials wordt niet ondersteund door native XMLHttpRequest en dit veld wordt genegeerd in een aanvraag voor meerdere domeinen. In alle volgende versies van de bibliotheek is dit opgelost.
Event handlers
Met de instellingen beforeSend, error, dataFilter, success en complete (beschreven in de vorige sectie) kunt u gebeurtenishandlers instellen die optreden op specifieke punten in de uitvoering van elk ajax-verzoek.
voorVerzenden gebeurt net voordat het verzoek naar de server wordt verzonden. fout gebeurt als het verzoek mislukt. dataFilter treedt op wanneer gegevens van de server binnenkomen. Maakt het mogelijk om onbewerkte gegevens te verwerken die door de server zijn verzonden. succes treedt op als de aanvraag met succes is voltooid. compleet gebeurt bij elke voltooiing van het verzoek.Een voorbeeld van een eenvoudig gebruik. Laten we een bericht weergeven als het verzoek is gelukt:
$ .ajax ((url: "ajax / test.html", succes: function () (waarschuwing ("Laden is uitgevoerd.");)));
Beginnend met jQuery-1.5, retourneert de $ .ajax () -methode een jqXHR-object dat onder andere de uitgestelde interface implementeert, waardoor u aanvullende uitvoeringshandlers kunt definiëren. Naast de standaard uitgestelde methoden .done (), .fail () en .then (), die u kunt gebruiken om handlers in te stellen, implementeert jqXHR .success (), .error () en.complete (). Dit wordt gedaan om overeen te komen met de bekende namen van de methoden die worden gebruikt om handlers in te stellen voor het uitvoeren van ajax-verzoeken. Beginnend met jQuery-1.8 worden deze drie methoden echter: ongewenst voor gebruik.
Sommige soorten verzoeken, zoals jsonp of GET-verzoeken voor meerdere domeinen, ondersteunen geen XMLHttpRequest-objecten. In dit geval zullen de handlers voor XMLHttpRequest en textStatus de waarde undefined bevatten.
Binnen de handlers bevat de variabele this de waarde van de parameter context... Als het niet was 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 (door middel van MIME). Daarnaast is het mogelijk om persoonlijk aan te geven (verduidelijken) hoe deze gegevens geïnterpreteerd dienen te 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 behulp van standaard jQuery-tools (evenals met een html-document). "html" - de resulterende html zal beschikbaar zijn in tekstvorm. Als het scripts in tags bevat
