Share
In het eerste artikel van deze serie hebben we de fundamenten van AJAX besproken. In de tweede hebben we gekeken naar een werkvoorbeeld met behulp van vanilla JavaScript.
In deze zelfstudie doorlopen we enkele van de aan AQAX gerelateerde functies en methoden van jQuery. Meer in het bijzonder zullen we de steno van naderbij bekijken laden methode en de generieke Ajax functie.
Accentsconagua
laden MethodejQuery laden methode is een eenvoudige maar krachtige methode voor het ophalen van externe gegevens. Hieronder ziet u de syntaxis ervan:
$ (selector) .load (url [, gegevens] [, volledig])
De volgende tabel toont de mogelijke parameters:
| Parameter | Omschrijving | Verplicht |
|---|---|---|
| url | Een tekenreeks met de URL waarnaar het verzoek wordt verzonden. | Ja |
| gegevens | De gegevens (als een tekenreeks of gewoon object) die met de aanvraag naar de server worden verzonden. | Nee |
| compleet | Een callback-functie die wordt uitgevoerd wanneer het verzoek is voltooid, met succes of zonder succes. | Nee |
Dit zijn de parameters van de callback-functie:
| Parameter | Omschrijving |
|---|---|
| responseText | De gegevens die uit het verzoek zijn opgehaald. |
| textStatus | Een string die de status van het verzoek categoriseert. |
| jqXHR | Het jQuery XMLHttpRequest (jqXHR) -object, dat een superset is van het native XMLHttpRequest (XHR) -object van de browser. |
De volgende lijst geeft een samenvatting van de mogelijke waarden van de textStatus parameter:
- success - notmodified - nocontent - error - timeout - abort - parsererror
Om beter te begrijpen hoe het laden methode werkt, laten we het voorbeeld bekijken dat in de vorige zelfstudie is besproken.
Nogmaals, kijk eens naar deze eenvoudige HTML-structuur:
Zo ziet het eruit:
Vergeet niet dat we de inhoud van de. Willen bijwerken #bio element met de antwoordgegevens, zodra op de knop is geklikt.
Hier is de vereiste jQuery-code:
var $ btn = $ ('# request'); var $ bio = $ ('# bio'); $ btn.on ('klik', functie () $ (this) .hide (); $ bio.load ('Bio.txt', completeFunction);); function completeFunction (responseText, textStatus, request) $ bio.css ('border', '1px solid # e8e8e8'); if (textStatus == 'error') $ bio.text ('Er is een fout opgetreden tijdens uw aanvraag:' + request.status + "+ request.statusText); Ervan uitgaande dat het verzoek succesvol is (dat wil zeggen wanneer textStatus is succes of niet-gemodificeerd), zou het eindresultaat er als volgt uitzien:
Overweeg ook de volgende visualisatie die een succesvol verzoek beschrijft:
Het linkerdeel van deze visualisatie toont het XHR-object zoals het wordt afgedrukt in de browserconsole als we pure JavaScript gebruiken (zie vorige tutorial) om het verzoek te maken. Aan de andere kant geeft het rechterdeel het betreffende jqXHR-object weer zoals het wordt afgedrukt als we de laden methode.
In het geval van een niet succesvol verzoek, zou echter een overeenkomstig bericht moeten verschijnen. Om dit te doen, controleren we de waarde van de textStatus parameter en toon een foutmelding:
Notitie: Als u het voorbeeld uitvoert vanuit uw lokale omgeving (en sla de Bio.txt bestand erin), zal het foutbericht waarschijnlijk anders zijn. U ziet bijvoorbeeld het volgende resultaat:
Ten slotte is het vermeldenswaard dat, standaard, de laden methode gebruikt de HTTP KRIJGEN methode, tenzij we gegevens verzenden als een object naar de server. Alleen dan, de POST methode wordt aangeroepen.
Zie de relevante demo van Codepen hieronder:
Laten we nu de indeling aanpassen van het bestand dat we van de server vragen. Specifiek voor dit voorbeeld zijn de gewenste gegevens opgenomen in de Bio.html bestand in plaats van de Bio.txt het dossier. Ook vermeldenswaard: het doelbestand bevat twee alinea's.
Ervan uitgaande dat we alleen de eerste paragraaf willen laden, moeten we de initiële code als volgt bijwerken:
$ btn.on ('klik', functie () // deze regel wijzigt alleen $ bio.load ('Bio.html p: first-child', completFunction);); Zo ziet het eruit:
En hier is de Codepen-demo:
In deze zelfstudie heb ik laten zien hoe u AJAX met jQuery kunt gebruiken. Om de dingen interessanter te maken, hebben we ook gewerkt met een paar praktische voorbeelden. In de laatst overgebleven tutorial van deze serie zullen we de dingen inpakken door met een meer betrokken voorbeeld te werken.
