Share
Après avoir suivi les trois tutoriels précédents, vous devriez avoir acquis une bonne compréhension d’AJAX. Dans ce dernier tutoriel, nous terminerons en travaillant avec un exemple plus complexe.
Pour avoir une idée de la structure de cet exemple, considérons le balisage suivant:
Le balisage pour le principale L'élément est présenté ci-dessous:
Frameworks front-end populaires
Cliquez sur chacun pour charger les détails via AJAX.
Bootstrap Foundation UIkit Interface utilisateur sémantique Skeleton Material Design Lite
Notez les liens de texte. Ceux-ci correspondent à différents frameworks front-end. Comme nous le verrons dans la section suivante, chaque fois que nous cliquons sur les liens, une demande AJAX sera exécutée. Ensuite, l'élément avec la classe de modal apparaîtra et son contenu sera mis à jour avec les données extraites de la réponse.
Voici comment principale l'élément ressemble à:
La prochaine étape consiste à examiner la structure de notre modal. Voici le code HTML:
- Cadre
- Version actuelle
- Nombre d'étoiles Github
- Page Officielle
Comme vous pouvez le constater, le modal contient quelques éléments vides. Nous les plaçons dans le HTML car leur texte changera en fonction du lien sur lequel nous cliquons et de la réponse que nous récupérons..
L'image ci-dessous montre comment le modal apparaît initialement:
Par défaut, le modal est masqué. De plus, nous allons également cacher le chargeur. Cela n'apparaîtra que lorsque la demande AJAX sera déclenchée.
Regardez les règles CSS correspondantes:
.modal opacité: 0; .loader display: none;
Notez que nous utilisons le opacité propriété (et non la afficher property) pour masquer le modal car cette propriété appartient aux propriétés CSS animables. De cette façon, nous pourrons faire la transition entre les états du modal (c'est-à-dire les états ouvert et fermé).
Pour les besoins de cet exemple, nous choisirons de construire nous-mêmes la réponse JSON. Plus précisément, la réponse attendue (c’est-à-dire le Demo.json fichier) sera un tableau d'objets. Chaque objet contiendra des détails concernant les frameworks front-end associés.
De plus, la valeur de la prénom propriété correspondra aux liens de texte de la principale élément (voir section précédente). Dans cet esprit, la structure de la réponse ressemble à ceci:
["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 autres objets ici]
Remarque: les valeurs que nous avons utilisées pour la numberOfStars et version actuelle les propriétés sont fausses et uniquement à des fins de démonstration.
Semblable aux exemples précédents de cette série, nous utiliserons AJAX pour demander un fichier statique. Cependant, si nous souhaitons intégrer du contenu provenant d'autres sites (Google Maps, Flickr, par exemple), nous devons lire la documentation de leur API et, si nécessaire, demander une clé API..
De plus, nos données cibles résident sur le même serveur que la page de démonstration. Par conséquent, nous éviterons les limitations pouvant survenir lors de l'interaction avec des services tiers (voir la section «Limitations des demandes AJAX» du premier tutoriel)..
Dans cette section, nous utiliserons jQuery ajax fonction pour initialiser une requête AJAX. Avant de le faire, définissons d’abord nos variables en mettant en cache les sélecteurs jQuery les plus couramment utilisés:
Accentsconagua
var $ list = $ ('. m-info'), var $ message = $ ('. m-message'); var $ modal = $ ('. modal'); var $ loader = $ ('. loader'); var $ framework; Maintenant, il est temps d'examiner le code responsable de l'exécution de la requête:
$ ('. box a'). on ('click', fonction (e) e.preventDefault (); $ framework = $ (this) .text (); $ .ajax (url: 'Demo.json' , dataType: 'json', beforeSend: function () $ loader.show ();). done (successFunction) .fail (errorFunction) .always (alwaysFunction);); Vous remarquerez la syntaxe de la ajax fonction ressemble à ce qui suit:
$ .ajax ([paramètres])
le réglages paramètre est un objet de configuration qui contient des informations sur notre requête. Le nombre de propriétés que cet objet peut avoir est très long (environ 34 propriétés). Par souci de simplicité, nous ne parlerons que de ceux utilisés dans cette démo. Plus précisement:
| Propriété | La description |
|---|---|
| url | Une chaîne contenant l'URL à laquelle la demande est envoyée. |
| Type de données | Le format des données de réponse (par exemple. JSON, xml, html). |
| avantEnvoyer | Une fonction de rappel qui est exécutée avant l'envoi de la demande. Ici, cette fonction déclenche le code qui montre le chargeur. |
Avant de poursuivre, il convient de mentionner trois choses:
ajax une fonction: $ .ajax (url [, settings]) réglages paramètre sont facultatifs.OBTENIR.le ajax La fonction retourne l'objet jQuery XMLHttpRequest ou jqXHR. Cet objet implémente l'interface Promise et contient donc toutes les propriétés, méthodes et comportements d'une promesse..
Dans cet exemple, nous utilisons les méthodes Promise suivantes:
terminééchouertoujoursle terminé La méthode est déclenchée si la requête aboutit. Il reçoit un ou plusieurs arguments, qui peuvent tous être une seule fonction ou un tableau de fonctions. Par exemple, dans notre démo, le successFunction () est passé comme argument.
La fonction de rappel (par exemple. successFunction ()) accepte trois arguments. Tout d'abord, les données retournées. Deuxièmement, une chaîne catégorisant le statut de la demande (voir l’article précédent pour connaître ses valeurs possibles). Enfin, l'objet jqXHR.
le échouer La méthode est appelée si la requête échoue. Il reçoit un ou plusieurs arguments, qui peuvent tous être une seule fonction ou un tableau de fonctions. Par exemple, dans notre démo, le errorFunction () est passé comme argument.
La fonction de rappel (par exemple. errorFunction ()) accepte trois arguments: l'objet jqXHR, une chaîne catégorisant le statut de la demande et une autre chaîne spécifiant l'erreur résultante. Cette erreur reçoit la partie textuelle de l'état HTTP, telle que Pas trouvé ou Interdit.
le toujours La méthode est exécutée à la fin de la demande, quelle que soit la réussite (c'est-à-dire la terminé la méthode est exécutée) ou échec (c'est-à-dire le échouer la méthode est exécutée). De nouveau, il reçoit en argument une fonction unique ou un tableau de fonctions. Par exemple, dans notre démo, le alwaysFunction () est passé comme argument.
L'état de la demande spécifie les arguments de la fonction. En cas de demande réussie, le rappel (par exemple. alwaysFunction ()) reçoit les mêmes arguments que le rappel du terminé méthode. Au contraire, si la demande échoue, elle accepte les mêmes arguments que le rappel du échouer méthode.
Remarque: À la place du terminé, échouer, et toujours Méthodes de promesse utilisées dans cet exemple, nous aurions également pu utiliser le Succès, Erreur, et Achevée fonctions de rappel. Ces fonctions sont définies dans le réglages paramètre.
Si la demande aboutit, nous sommes en mesure de récupérer les données de réponse. Ensuite, on le manipule pour peupler les éléments vides du modal.
Considérez le code pour le successFunction rappeler:
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!'); Bien que nous ayons mis à jour le contenu de notre modal, celui-ci est toujours masqué. Il devient visible et le chargeur disparaît à la fin de la demande. Alors seulement, le toujoursfonction Le rappel est exécuté:
function alwaysFunction () $ loader.hide (); $ modal.addClass ('active'); le actif la classe ressemble à ceci:
.actif opacité: 1; z-index: 10; transformer: échelle (1);
Ci-dessous, vous pouvez voir l’aspect attendu du modal si vous cliquez sur le bouton Bootstrap lien texte:
Il est important de comprendre le code exécuté dans certaines circonstances. Couvrons deux scénarios courants:
prénom propriété ne correspond pas aux liens de texte du principale élément. Par exemple, supposons que nous définissions une URL où la valeur du prénom la propriété de l'objet lié au framework Foundation est Fondation2 au lieu de Fondation. Dans un tel cas, si on clique sur le bouton Fondation lien de texte, le modal ci-dessous apparaîtra:
Nous avons donc couvert le code qui est déclenché lorsque la demande aboutit. Mais qu'advient-il si la demande échoue? En cas d’échec de la demande, nous masquons la liste et affichons un message personnalisé..
Voici le code de la failFunction () qui démontre ce comportement:
fonction failFunction (request, textStatus, errorThrown) $ list.hide (); $ message.text ('Une erreur s'est produite lors de votre requête:' + request.status + "+ textStatus +" + errorThrown); Pour nous familiariser avec ce code, nous spécifions une URL qui n'existe pas. D'où le échouer La méthode sera déclenchée et le modal ci-dessous sera affiché:
Remarque: De nouveau, le message d'erreur peut être différent si vous exécutez cet exemple localement.
Voici la démo intégrée de Codepen:
Dans ce didacticiel, nous avons terminé notre examen d’AJAX du point de vue d’un concepteur de sites Web. Nous le félicitons de le suivre! J'espère que cette série vous a été utile et que vous avez acquis de nouvelles compétences..
Dans une prochaine étape, je vous encourage à examiner les points suivants:
$ .getJSON méthode).