Si vous utilisez les méthodes jQuery AJAX, votre site Web peut réagir de façon dynamique en cas d’in­te­rac­tion des uti­li­sa­teurs 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 com­plè­te­ment le site. Le transfert asyn­chrone de données avec les méthodes AJAX permet donc de profiter d’ap­pli­ca­tions Web réactives.

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

Le terme « AJAX » cor­res­pond à l’abré­via­tion de l’ex­pres­sion anglaise Asyn­chro­nous Ja­vaS­cript and XML. Le langage de script Ja­vaS­cript et la bi­blio­thèque jQuery com­por­tent donc des méthodes AJAX, qui per­met­tent l’échange asyn­chrone de données en un client et un serveur. Les requêtes AJAX de jQuery utilisent l’objet XMLHtt­pRe­quest de Ja­vaS­cript. Les requêtes HTTP asyn­chrones sont envoyées au serveur Web par les méthodes AJAX, la réponse étant renvoyée dans un format spé­ci­fique, par exemple XML ou JSON. Vous pouvez ainsi ac­tua­li­ser certains éléments de votre site Web, sans pour autant avoir à le recharger en­tiè­re­ment. 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é­ber­ge­ment Web proposé par IONOS, vous pouvez mettre en ligne votre propre projet Web, qu’il s’agisse de votre première ap­pli­ca­tion 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 pro­fes­sion­nelle.

Quelles sont les dif­fé­rentes méthodes jQuery.ajax() qui existent ?

Vous devez avoir des con­nais­sances de base con­cer­nant jQuery pour bien com­prendre le fonc­tion­ne­ment des méthodes .ajax(). Nous vous con­seil­lons donc de vous référer à notre tutoriel jQuery avant de vous in­té­res­ser aux méthodes AJAX.

  • ajax() : permet d’envoyer des requêtes HTTP asyn­chrones 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 trans­mettre au serveur certaines données spé­ci­fiques ;
  • 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 Ja­vaS­cript 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 do­cu­men­ta­tion détaillée à ce sujet sur la page d’in­for­ma­tion de l’API IONOS.

Exemple d’ap­pli­ca­tion pour les méthodes jQuery.ajax()

Les méthodes jQuery.ajax() peuvent aussi être associées à des fonctions jQuery plus clas­siques, 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 cor­res­pon­dant. 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 na­vi­ga­teur.

<!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 ap­pli­ca­tions à page unique en passant di­rec­te­ment par GitHub. Pour ce faire, connectez-vous sim­ple­ment à votre ré­fé­ren­tiel Deploy Now, et utilisez la commande push pour com­mu­ni­quer vos mo­di­fi­ca­tions. Deploy Now est capable de re­con­naître au­to­ma­ti­que­ment un grand nombre de fra­me­works et vous permet de con­fi­gu­rer cor­rec­te­ment toutes vos créations. Optez pour l’adhésion (Deploy Now Mem­ber­ship) et optimisez votre flux de travail.

Aller au menu principal