Share
Na de vorige drie tutorials te hebben gevolgd, had u AJAX goed moeten begrijpen. In deze laatste zelfstudie verwerken we de zaken door met een meer betrokken voorbeeld te werken.
Bekijk de volgende markeringen om een idee te krijgen van de structuur van dit voorbeeld:
De markup voor de hoofd element wordt hieronder getoond:
Populaire front-end frameworks
Klik op een ieder om details te laden via AJAX.
Bootstrap Foundation UIkit Semantic UI Skelet Material Design Lite
Let op de tekstlinks. Deze komen overeen met verschillende front-end frameworks. Zoals we in de volgende sectie zullen zien, zal elke keer dat we op de links klikken, een AJAX-aanvraag worden uitgevoerd. Vervolgens het element met de klasse van modaal wordt weergegeven en de inhoud ervan wordt bijgewerkt met gegevens die zijn opgehaald uit het antwoord.
Hier is hoe het hoofd element ziet eruit als:
De volgende stap is om de structuur van ons modale te onderzoeken. Dit is de HTML-code:
- Kader
- Huidige versie
- Aantal Github-sterren
- Officiële Pagina
Zoals je ziet, bevat de modal een paar lege elementen. We plaatsen deze in de HTML omdat hun tekst zal veranderen afhankelijk van de link waarop we klikken en de reactie die we ophalen.
De afbeelding hieronder laat zien hoe de modal in eerste instantie verschijnt:
Standaard is de modal verborgen. Daarnaast verbergen we ook de lader. Dit verschijnt alleen als de AJAX-aanvraag wordt geactiveerd.
Bekijk de bijbehorende CSS-regels:
.modaal opaciteit: 0; .lader display: none;
Merk op dat we de ondoorzichtigheid eigendom (en niet het tonen property) om de modal te verbergen omdat deze eigenschap tot de CSS-animateerbare eigenschappen behoort. Op deze manier kunnen we de toestanden van de modale (dat wil zeggen de open en gesloten toestanden) overzetten.
Voor de doeleinden van dit voorbeeld zullen we ervoor kiezen om zelf het JSON-antwoord te bouwen. In het bijzonder is de verwachte respons (dat wil zeggen de Demo.json bestand) zal een array van objecten zijn. Elk object bevat details over de gerelateerde front-end frameworks.
Bovendien is de waarde van de naam eigenschap komt overeen met de tekstlinks van de hoofd element (zie vorige paragraaf). Met dat in gedachten ziet de structuur van de reactie er ongeveer zo uit:
["url": "http://getbootstrap.com/", "numberOfStars": "88.260+", "currentVersion": "3.3.5", "name": "Bootstrap", "url": "http://foundation.zurb.com/", "numberOfStars": "21.180+", "currentVersion": "5.5.3", "name": "Foundation", // 4 extra objecten hier]
Notitie: de waarden die we hebben gebruikt voor de numberOfStars en huidige versie eigenschappen zijn nep en puur voor demonstratiedoeleinden.
Net als bij de vorige voorbeelden in deze serie, gebruiken we AJAX om een statisch bestand aan te vragen. Als we echter inhoud willen insluiten die afkomstig is van andere sites (bijvoorbeeld Google Maps, Flickr), moeten we hun API-documentatie lezen en indien nodig een API-sleutel aanvragen..
Bovendien leven onze doeldata op dezelfde server als de demopagina. Daarom vermijden we de beperkingen die kunnen optreden bij interactie met services van derden (zie het gedeelte "Beperkingen van AJAX-verzoeken" van de eerste zelfstudie).
In deze sectie gebruiken we jQuery's Ajax functie om een AJAX-aanvraag te initialiseren. Voordat we dit doen, laten we eerst onze variabelen definiëren door de meest gebruikte jQuery-selectors in cache op te slaan:
Accentsconagua
var $ list = $ ('. m-info'), var $ message = $ ('. m-message'); var $ modal = $ ('. modal'); var $ loader = $ ('. loader'); var $ framework; Nu is het tijd om de code te onderzoeken die verantwoordelijk is voor de uitvoering van het verzoek:
$ ('. boxes a'). on ('klik', functie (e) e.preventDefault (); $ framework = $ (this) .text (); $ .ajax (url: 'Demo.json' , dataType: 'json', beforeSend: function () $ loader.show ();). done (successFunction) .fail (errorFunction) .always (alwaysFunction);); U zult de syntaxis voor de Ajax functie ziet er als volgt uit:
$ .Ajax ([Settings])
De instellingen parameter is een configuratieobject dat informatie bevat over ons verzoek. Het aantal eigenschappen dat dit object kan hebben is erg lang (ongeveer 34 eigenschappen). Voor de eenvoud zullen we alleen die bespreken die in deze demo worden gebruikt. Specifieker:
| Eigendom | Omschrijving |
|---|---|
| url | Een tekenreeks met de URL waarnaar het verzoek wordt verzonden. |
| data type | Het formaat van de antwoordgegevens (bijv. json, xml, html). |
| beforeSend | Een callback-functie die wordt uitgevoerd voordat we de aanvraag verzenden. Hier activeert deze functie de code die de lader toont. |
Voordat we verder gaan, is het de moeite waard om drie dingen te noemen:
Ajax functie: $ .ajax (url [, instellingen]) instellingen parameter zijn optioneel.KRIJGEN.De Ajax functie retourneert het jQuery XMLHttpRequest- of jqXHR-object. Dit object implementeert de Promise-interface en bevat daarom alle eigenschappen, methoden en gedrag van een belofte.
In dit voorbeeld gebruiken we de volgende Promise-methoden:
gedaanmislukkenaltijdDe gedaan methode wordt geactiveerd als het verzoek slaagt. Het ontvangt een of meer argumenten, die allemaal een enkele functie of een reeks functies kunnen zijn. Bijvoorbeeld in onze demo, de successFunction () wordt doorgegeven als een argument.
De callback-functie (bijv. successFunction ()) accepteert drie argumenten. Ten eerste de geretourneerde gegevens. Ten tweede, een string die de status van het verzoek categoriseert (zie het vorige artikel voor de mogelijke waarden). Ten slotte het jqXHR-object.
De mislukken methode wordt aangeroepen als het verzoek mislukt. Het ontvangt een of meer argumenten, die allemaal een enkele functie of een reeks functies kunnen zijn. Bijvoorbeeld in onze demo, de errorfunctie () wordt doorgegeven als een argument.
De callback-functie (bijv. errorfunctie ()) accepteert drie argumenten: het jqXHR-object, een tekenreeks die de status van het verzoek categoriseert en een andere tekenreeks die de resulterende fout aangeeft. Deze fout ontvangt het tekstgedeelte van de HTTP-status, zoals Niet gevonden of Verboden.
De altijd methode wordt uitgevoerd wanneer het verzoek is voltooid, ongeacht het succes (dat wil zeggen de gedaan methode wordt uitgevoerd) of fout (d.w.z. mislukken methode wordt uitgevoerd) ervan. Nogmaals, het ontvangt als een argument een enkele functie of een reeks functies. Bijvoorbeeld in onze demo, de alwaysFunction () wordt doorgegeven als een argument.
De status van het verzoek specificeert de argumenten van de functie. In het geval van een succesvol verzoek, is de callback (bijv. alwaysFunction ()) ontvangt dezelfde argumenten als de callback van de gedaan methode. Integendeel, als het verzoek faalt, accepteert het dezelfde argumenten als het terugbellen van de mislukken methode.
Notitie: In plaats van de gedaan, mislukken, en altijd Belofte methoden die in dit voorbeeld worden gebruikt, we kunnen evengoed de succes, fout, en compleet callback-functies. Deze functies worden gedefinieerd in de instellingen parameter.
Als het verzoek slaagt, kunnen we de responsgegevens terugkrijgen. Vervolgens manipuleren we het om de lege elementen van het modale te bevolken.
Beschouw de code voor de successFunction Bel terug:
function successFunction (data) if (data.length> 0) for (var i = 0; i < data.length; i++) if ($framework === data[i].name) $list.show(); $message.hide(); $list.find('li:nth-of-type(2)').text($framework); $list.find('li:nth-of-type(4)').text(data[i].currentVersion); $list.find('li:nth-of-type(6)').text(data[i].numberOfStars); $list.find('li:nth-of-type(8)').html('' + data[i].url + ''); break; else $list.hide(); $message.show().text('No data received for this framework!'); else $list.hide(); $message.text('No data received from your respose!'); Hoewel we de inhoud van onze modal hebben bijgewerkt, is dit nog steeds verborgen. Het wordt zichtbaar en de lader verdwijnt wanneer het verzoek is voltooid. Alleen dan, de alwaysFunction callback wordt uitgevoerd:
function alwaysFunction () $ loader.hide (); $ Modal.addClass ( 'actief');
De actief klasse ziet er als volgt uit:
.actief dekking: 1; z-index: 10; transformeren: schaal (1);
Hieronder ziet u de verwachte weergave van de modal als we op de klikken bootstrap tekstlink:
Het is belangrijk om de code te begrijpen die onder bepaalde omstandigheden wordt uitgevoerd. Laten we twee veelvoorkomende scenario's behandelen:
naam eigenschap komt niet overeen met de tekstkoppelingen van de hoofd element. Laten we bijvoorbeeld aannemen dat we een URL definiëren waar de waarde van de naam eigenschap van het object dat gerelateerd is aan het kader van de Foundation Foundation2 in plaats van fundament. In een dergelijk geval, als we op de klikken fundament tekstlink verschijnt het onderstaande modaal:
Dus we hebben de code behandeld die wordt afgevuurd wanneer het verzoek slaagt. Maar wat gebeurt er als het verzoek mislukt? In het geval van een niet succesvol verzoek verbergen we de lijst en tonen we een aangepast bericht.
Hier is de code van de failFunction () wat dat gedrag aantoont:
function failFunction (request, textStatus, errorThrown) $ list.hide (); $ message.text ('Er is een fout opgetreden tijdens uw aanvraag:' + request.status + "+ textStatus +" + errorThrown); Om ons vertrouwd te maken met deze code, specificeren we een URL die niet bestaat. Vandaar dat de mislukken methode zal worden geactiveerd en de modal hieronder zal worden getoond:
Notitie: Nogmaals, het foutbericht kan anders zijn als u dit voorbeeld lokaal uitvoert.
Hier is de ingebouwde Codepen-demo:
In deze zelfstudie hebben we ons onderzoek naar AJAX afgerond vanuit het perspectief van een webontwerper - goed gedaan om dit te doorlopen! Ik hoop dat je deze serie nuttig hebt gevonden en dat je een aantal nieuwe vaardigheden hebt geleerd.
Als volgende stap moedig ik je aan om de volgende dingen te onderzoeken:
$ .getJSON methode).