Comment utiliser AJAX en JavaScript et empêcher la page de s'actualiser

À mesure que les sites Web deviennent de plus en plus complexes et nécessitent une expérience utilisateur supérieure, la technologie AJAX (JavaScript et XML asynchrones) est devenue l'une des compétences essentielles pour le développement front-end de sites Web. Il permet d'envoyer des requêtes au serveur via JavaScript sans recharger la page entière. Cela rend le site Web plus rapide et plus fluide, et les utilisateurs ne ressentent aucune interruption. Cet article expliquera comment utiliser AJAX en JavaScript et empêcher l'actualisation de la page.

1. AJAX et XMLHttpRequest

L'utilisation d'AJAX en Javascript nécessite l'utilisation de l'objet XMLHttpRequest car il est au cœur de l'exécution de requêtes asynchrones. L'objet XMLHttpRequest est un objet JavaScript intégré, souvent appelé XHR en abrégé. Il fournit une API pour les requêtes asynchrones via le protocole HTTP, nous permettant d'obtenir des réponses du serveur, de traiter les requêtes et de mettre à jour les pages Web sans actualiser la page entière.

Voici un exemple simple de création d'une requête à l'aide de XHR :

let request = new XMLHttpRequest();
request.open('GET', '/api/data', true);
request.onreadystatechange = function() {
   if(request.readyState === 4 && request.status === 200) {
      let response = JSON.parse(request.responseText);
      // 处理响应并更新页面
   }
};
request.send();

Dans le code ci-dessus, nous créons une instance d'objet XMLHttpRequest et ouvrons une requête GET à l'aide de la méthode open(). Après avoir ouvert la requête GET, nous définissons une fonction de gestionnaire pour l'événement onreadystatechange, qui sera appelé lorsque l'attribut readyState de l'objet XHR change, et vérifions si le code d'état de la réponse du serveur est 200. Si tout se passe bien, nous analysons le texte de la réponse (généralement au format JSON) et mettons à jour les données pertinentes sur la page.

2. AJAX dans jQuery

Si vous utilisez jQuery, alors il résume une API plus simplifiée sous le capot pour utiliser AJAX. Voici un exemple complet de jQuery AJAX :

$.ajax({
   url: '/api/data',
   type: 'GET',
   dataType: 'json',
   success: function(data) {
      // 成功后更新页面
   }
});

Dans le code ci-dessus, nous envoyons une requête GET à l'aide de la méthode $.ajax() de jQuery et exécutons une fonction de gestionnaire en cas de succès. Semblable à l’utilisation de l’objet XMLHttpRequest, nous pouvons mettre à jour le contenu de la page dans la fonction success.

3. Utiliser AJAX pour mettre à jour le contenu de la page

Une fois que votre requête AJAX renvoie une réponse, vous souhaiterez peut-être utiliser JavaScript pour mettre à jour le contenu de la page afin de refléter les nouvelles données. Voici un exemple simple :

function updatePage(response) {
   let div = document.getElementById('data-display');
   let html = '';
   response.forEach(function(item) {
      html += '<div>' + item.name + '</div>';
   });
   div.innerHTML = html;
}

Dans le code ci-dessus, nous définissons une fonction updatePage() pour mettre à jour le contenu de la page. Il trouve d'abord l'élément div avec l'ID "data-display" et construit en interne une chaîne HTML, puis définit cette chaîne sur le innerHTML de cet élément.

4. Évitez les demandes en double

Étant donné qu'AJAX est exécuté de manière asynchrone, les utilisateurs peuvent continuellement lancer plusieurs requêtes identiques ou différentes, ce qui entraînera un entrelacement important de ces requêtes, provoquant des problèmes de concurrence et une charge excessive du serveur. Par conséquent, lors de l’envoi de requêtes AJAX, nous devons faire attention à éviter les requêtes en double.

Une façon d'éviter les demandes en double consiste à utiliser une variable tag (ou flag) pour vérifier si la demande précédente est terminée. Par exemple :

let requesting = false;
function makeRequest() {
   if(requesting) {
      return;
   }
   requesting = true;
   $.ajax({
      url: '/api/data',
      type: 'GET',
      dataType: 'json',
      success: function(data) {
         updatePage(data);
      },
      complete: function() {
         requesting = false;
      }
   });
}

Dans le code ci-dessus, nous utilisons la variable "requesting" pour identifier si une requête a été émise. Pour éviter plusieurs requêtes, nous vérifions d'abord l'état de cette variable avant de commencer à envoyer la requête. Si la variable est vraie, elle est renvoyée et aucune nouvelle requête n'est envoyée. Si la requête réussit ou échoue, nous réinitialisons la variable sur false dans la fonction de rappel complète pour autoriser de nouvelles requêtes.

5. Utilisation d'AJAX pour implémenter des formulaires dynamiques

L'un des scénarios les plus courants pour AJAX consiste à soumettre des données via des formulaires dynamiques et à obtenir la réponse du serveur sans actualiser la page entière. Voici un exemple d'utilisation de jQuery pour implémenter un formulaire dynamique :

<form id="my-form">
   <input type="text" id="name" name="name" placeholder="Your name">
   <button type="submit">Submit</button>
</form>
<div id="result"></div>

<script type="text/javascript">
   $("#my-form").submit(function(e) {
      e.preventDefault();
      let $form = $(this);
      let url = $form.attr('action');
      let formData = $form.serialize();
      $.ajax({
         type: "POST",
         url: url,
         data: formData,
         dataType: 'json',
         success: function(response) {
            $('#result').html("Thank you, " + response.name + "!");
         }
      });
   });
</script>

Dans le code ci-dessus, nous définissons un formulaire et y lions un événement de soumission. Lorsque l'utilisateur soumet le formulaire, nous utilisons la méthode serialize() pour collecter les données du formulaire et les envoyer au serveur en tant que données pour la requête AJAX. Si le serveur traite et renvoie avec succès la réponse JSON, nous mettons à jour un élément div avec l'ID « result » sur la page contenant les données dans la réponse.

Conclusion

Comme vous pouvez le constater, AJAX rend l'envoi et la réception de données vers le serveur plus faciles et plus confortables. Cet article explique comment utiliser AJAX en Javascript pour envoyer des requêtes asynchrones et mettre à jour le contenu sans actualiser la page entière. Enfin, nous avons discuté de la manière d'éviter les demandes en double et de mettre en œuvre la soumission dynamique de formulaires. AJAX est une technologie très utile qui peut rendre votre site Web plus rapide et plus fluide, et améliorera considérablement l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!