Méthodes jQuery AJAX : fonctionnement du transfert asynchrone de données

Si vous utilisez les méthodes jQuery AJAX, votre site Web peut réagir de façon dynamique en cas d’interaction des utilisateurs et vous pouvez récupérer des données à partir du serveur ou les y envoyer, mettre à jour son contenu, et bien plus encore, mais sans jamais avoir à recharger complètement le site. Le transfert asynchrone de données avec les méthodes AJAX permet donc de profiter d’applications Web réactives.

Méthodes jQuery.ajax() : de quoi s’agit-il ?

Le terme « AJAX » correspond à l’abréviation de l’expression anglaise Asynchronous JavaScript and XML. Le langage de script JavaScript et la bibliothèque jQuery comportent donc des méthodes AJAX, qui permettent l’échange asynchrone de données en un client et un serveur. Les requêtes AJAX de jQuery utilisent l’objet XMLHttpRequest de JavaScript. Les requêtes HTTP asynchrones sont envoyées au serveur Web par les méthodes AJAX, la réponse étant renvoyée dans un format spécifique, par exemple XML ou JSON. Vous pouvez ainsi actualiser certains éléments de votre site Web, sans pour autant avoir à le recharger entièrement. Les méthodes AJAX ont pour avantage d’être très flexibles. Il est donc également possible de les utiliser, par exemple, avec jQuery pour WordPress.

Conseil

Avec l’hébergement Web proposé par IONOS, vous pouvez mettre en ligne votre propre projet Web, qu’il s’agisse de votre première application jQuery, d’un blog ou de votre propre forum. Grâce à IONOS, profitez d’un espace de stockage, ainsi que d’un nom de domaine et de votre propre adresse email professionnelle.

Quelles sont les différentes méthodes jQuery.ajax() qui existent ?

Vous devez avoir des connaissances de base concernant jQuery pour bien comprendre le fonctionnement des méthodes .ajax(). Nous vous conseillons donc de vous référer à notre tutoriel jQuery avant de vous intéresser aux méthodes AJAX.

  • ajax() : permet d’envoyer des requêtes HTTP asynchrones au serveur ;
  • get() : permet d’envoyer une requête HTTP GET pour charger les données du serveur ;
  • post() : permet d’envoyer une requête AJAX Post de jQuery pour transmettre au serveur certaines données spécifiques ;
  • getJSON() : permet d’envoyer une requête AJAX GET de jQuery au serveur, pour une réponse renvoyée au format JSON ;
  • getScript() : permet d’envoyer une requête HTTP GET pour récupérer un fichier JavaScript sur un serveur et exécuter celui-ci ;
  • load() : permet d’envoyer une requête HTTP pour charger du contenu HTML ou du contenu texte depuis le serveur et associer ce dernier à des éléments DOM.
Conseil

Avec l’API IONOS, gérez vos produits hébergés par IONOS de façon à la fois pratique et sécurisée. Vous pouvez utiliser les API IONOS à l’aide d’une clé d’accès. Vous pouvez également retrouver notre documentation détaillée à ce sujet sur la page d’information de l’API IONOS.

Exemple d’application pour les méthodes jQuery.ajax()

Les méthodes jQuery.ajax() peuvent aussi être associées à des fonctions jQuery plus classiques, comme jQuery.click(), jQuery.append() et jQuery.each().

Dans l’exemple suivant, pour obtenir le texte « Ceci est un exemple AJAX pour jQuery », nous passons par l’URL /jquery/getdata, transmise en tant que premier argument à la méthode jQuery.ajax() en question. Pour ce qui est du deuxième paramètre, nous avons choisi la fonction de rappel ; celle-ci s’occupe de traiter la réponse du serveur et d’intégrer les données à la balise p au sein du DOM. Par défaut, la méthode .ajax() envoie une requête GET au serveur correspondant. Chaque évènement de clic sur le bouton « btn » déclenche l’envoi de la requête AJAX de jQuery. Le texte s’affiche alors dans le navigateur.

<!DOCTYPE html>
                
<html>
<head>
     <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
     </script>
     <script type="text/javascript">
      $(document).ready(function () {
     $('#btn').click(function(){
          $.ajax('/jquery/getdata',    // request url
                {
                success: function (data, status, xhr) {     // success callback function
                                     $('p').append(data);
                }
          });
          });
      });
     </script>
</head>
<body>
     <input type="button" id="btn" value="Envoyer une requête jQuery AJAX" />
     <p></p>
</body>
</html>
html

Vous trouverez ci-dessous le résultat obtenu :

Ceci est un exemple AJAX pour jQuery
text
Conseil

Avec la solution Deploy Now proposée par IONOS, déployez vos sites Web statiques et vos applications à page unique en passant directement par GitHub. Pour ce faire, connectez-vous simplement à votre référentiel Deploy Now, et utilisez la commande push pour communiquer vos modifications. Deploy Now est capable de reconnaître automatiquement un grand nombre de frameworks et vous permet de configurer correctement toutes vos créations. Optez pour l’adhésion (Deploy Now Membership) et optimisez votre flux de travail.

Cet article vous a-t-il été utile ?