Comprendre AJAX avec jQuery

AJAX Il comprend un ensemble de techniques et de technologies qui nous permettent d'établir des communications asynchrones entre ce que le client voit sur le Web et les informations qui existent du côté serveur d'une page Web.
L'une des principales caractéristiques que l'on peut souligner est qu'elle repose sur les différentes méthodes HTTP Quoi POST, GET, PUT ou DELETE pour pouvoir envoyer les données nécessaires aux applications sur le serveur.
Au début du développement avec AJAX les appels devaient être construits en utilisant Javascript plat, ce qui a généré beaucoup de code pour nous, cependant jQuery nous aide à simplifier les choses en amenant l'adoption de cette technique et de ces technologies au plus grand nombre, le tout au profit du développeur et de l'utilisateur.
Qu'est-ce qu'AJAX ?AJAX correspond à Javascript et XML asynchrones c'est-à-dire Javascript Oui XML asynchrone, ce qui signifie également que c'est quelque chose qui ne dépend pas d'une structure fixe telle qu'un script PHP où les instructions sont exécutées séquentiellement, en sauvegardant bien sûr les appels aux méthodes et fonctions des classes et des objets.
Ce qui précède nous donne la possibilité de charger des informations ou de les envoyer sans avoir à recharger ou faire une requête "complète" au serveur, nous les mettons entre guillemets car les appels AJAX Ce sont des requêtes normales, il n'est tout simplement pas nécessaire de rafraîchir la page dans son intégralité si ce n'est pas le comportement souhaité.
L'utilisation de ces techniques et technologies représente des avantages dont peu sont conscients de leur existence, nous ne l'utilisons souvent que pour une question de tendance, mais si nous comprenons ses avantages, nous pourrons savoir à quels projets nous pouvons l'appliquer pour obtenir en tirer le meilleur parti. Voyons ci-dessous certains des avantages les plus importants de l'utilisation AJAX:
Réduction de l'utilisation de la bande passanteNous y parvenons grâce aux demandes de sections en particulier, avec cela nous pouvons réaliser, par exemple, ne pas avoir à recharger les styles généraux ou les images si ce que nous voulons est de rafraîchir le texte.
Meilleure expérience utilisateurEn augmentant la vitesse de l'application Web, l'utilisateur bénéficie d'une amélioration notable dans l'utilisation, en plus de nous donner la possibilité en tant que développeurs d'augmenter le degré d'interaction avec les éléments que nous avons arrangés.
Supprimer la dépendance du navigateurLors de l'utilisation jQuery le besoin d'écrire du code dépendant du navigateur est éliminé, cela nous aide à améliorer la vitesse de développement et la productivité de notre temps.
Puisque rien n'est parfait, lors de l'utilisation AJAX Nous devons également comprendre qu'il existe certains inconvénients qui peuvent nous faire réfléchir et nous demander si c'est la meilleure option pour notre projet. Ensuite, nous verrons certains de ces points afin d'avoir une image plus complète avant de commencer la partie technique du tutoriel.
DépendanceSi un client ou un utilisateur utilise un très ancien navigateur ou utilise le Javascript désactivé, notre application peut souffrir ou ne pas fonctionner, ce qui nous donne l'obligation de faire des cas particuliers lorsque nous ne pouvons pas utiliser AJAX.
Écrire un code supplémentaireSelon notre application, nous devons écrire du code supplémentaire pour pouvoir intégrer les réponses que nous obtenons des requêtes AJAX, telles que les réponses qui accompagnent HTML Oui CSS.
Bien sûr, à l'heure actuelle, il est très difficile de trouver un navigateur qui ne soit pas compatible avec Javascript Oui jQueryCependant, selon notre région, nous pouvons trouver certains cas qui peuvent rendre la vie très difficile.
Une requête AJAX depuis jQuery doit avoir une structure de base, où nous devons établir certains paramètres nécessaires pour le cadre, nous devons établir la méthode HTTP de la demande, l'itinéraire vers lequel la demande sera effectuée, le format de la réponse et enfin, ce qu'il faut faire en cas de succès de la demande ou en cas d'erreur. Voyons dans le code non fonctionnel suivant comment nous pouvons voir cela :

 $ .ajax ({type : "méthode HTTP", // POST, GET, PUT, DELETE url : "Request path", // http: // www.example.com/request dataType : " Type of data ", / / html, xml, json succès : fonction en cas de succès, erreur : fonction en cas d'erreur}); 

Nous voyons que chacune des sections que nous avons décrites sont des paramètres que notre requête reçoit et qu'elle se fait via la méthode $ .ajax () qui est fourni par jQuery directement, et c'est un masque pour le code Javascript avion qui correspond à chaque moteur de chaque navigateur pris en charge, qui à l'heure actuelle sont presque toutes les publicités les plus récentes telles que Chrome, Firefox, Opéra, Safari Internet Explorer, et ceux dérivés des moteurs de ceux que nous avons mentionnés.
Nous allons maintenant mettre en pratique ce que nous avons vu dans la section précédente lors d'une demande AJAX d'une page HTML que nous allons construire dans l'exemple suivant. Nous devons savoir que nous allons exiger la version la plus récente de jQuery nous pouvons obtenir, mais nous pouvons utiliser celui qu'ils stockent dans leur CDN, nous aurons également besoin d'un petit serveur web pour pouvoir router les fichiers que nous allons obtenir de manière asynchrone, pour cela nous pouvons utiliser WAMP dans les fenêtres, ou une installation LAMPE dans les systèmes Linux, en ce qui concerne les plates-formes MAC, nous pouvons utiliser XAMP ou similaire.
Dans le code suivant, nous allons d'abord inclure jQuery, puis nous créerons une étiquette dans le corps avec un identifiant unique où nous placerons le contenu de la réponse de notre demande, et vers la fin du document, nous créerons une étiquette scénario où nous allons générer le code pour faire la demande, dans l'attribut du URL nous allons faire la demande à l'index du dossier où se trouvent nos fichiers, nous le faisons pour montrer le fonctionnement de notre code, cependant la façon de le faire est de demander un autre fichier qui servira la réponse dont nous avons besoin, allons voir le code :

 Exemple de demande AJAXTraiter AJAX 

Dans l'image suivante, nous voyons comment tout a fonctionné, où nous pouvons voir une réponse réussie de notre code.

Voyons ce qui se passe lorsque nous modifions le chemin de la demande pour un chemin inexistant pour forcer une erreur, rafraîchir et appuyer sur le bouton Traiter AJAX:

Nous pouvons voir que ce que nous avons placé dans le code d'erreur est déclenché. Mais le plus intéressant est que le type d'erreur de HTTP, dans ce cas, il s'agissait d'une ressource introuvable ou 404, avec un peu d'habileté peut-être pouvons-nous le capturer et améliorer la gestion des erreurs, cela reste un sujet de recherche pour ceux qui sont intéressés.
L'une des choses qui jQuery veut, c'est que nous ne perdions pas de temps et de code à faire les choses à long terme, c'est pourquoi il nous propose des raccourcis pour les appels AJAX méthodes les plus courantes telles que AVOIR Oui PUBLIER, donc en utilisant le raccourci, nous économisons quelques lignes de code et nous pouvons ainsi réduire le poids de notre application.
Pour cela dans la documentation officielle de jQuery Nous avons tous les cas existants, cependant nous allons refaire l'exemple précédent en utilisant dans ce cas le raccourci, mais avant de voir le code fonctionnel, voyons l'exemple non fonctionnel :

$ .get (chemin, données, SuccessFunction, ResponseType);

Comme nous l'avons remarqué, cet appel est beaucoup plus petit, ce qui nous aide à avoir un code plus propre et plus léger, en l'appliquant maintenant à notre exemple précédent, ce serait le suivant :

 Exemple de demande AJAXTraiter AJAX 

Nous voyons que le nombre de lignes et de caractères a été considérablement réduit, ce qui améliorerait notre transmission de données en utilisant une bande passante plus faible. Si nous exécutons tout dans le navigateur, cela nous donnerait la réponse suivante :

Avec cela, nous avons terminé ce tutoriel, nous avons ensuite vu comment de manière simple nous avons expliqué ce que cela représente AJAX et ses applications les plus basiques avec jQueryDésormais, il ne reste plus qu'à poursuivre les recherches et essayer d'intégrer cette technique de développement chaque fois que ses avantages sont appropriés pour nos applications.