Comprendre les versions Ajax : évolution des premiers jours aux temps modernes

Ajax est une technologie importante pour créer des applications Web dynamiques. À mesure que les applications Web continuent d'évoluer, Ajax continue d'évoluer et de s'améliorer. Cet article expliquera en détail l'historique du développement d'Ajax depuis ses débuts jusqu'à nos jours et donnera des exemples de code spécifiques.

1. Early Ajax

Les premiers Ajax sont apparus vers 2005, ce qui permet aux pages Web d'interagir avec le serveur sans actualisation. A ce stade, les technologies impliquées dans l'utilisation d'Ajax sont encore relativement basiques. Les technologies les plus basiques incluent les objets JavaScript, XML et XMLHttpRequest. La combinaison de ces technologies permet aux applications Web de communiquer de manière transparente entre les utilisateurs et les serveurs.

Ce qui suit est un exemple simple d'utilisation d'Ajax pour effectuer une recherche sans actualiser la page :

function search() {
  var searchValue = document.getElementById("searchInput").value;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.getElementById("searchResult").innerHTML = xhr.responseText;
    }
  };
  xhr.open("GET", "/search?q=" + searchValue, true);
  xhr.send();
}

Dans cet exemple, lorsque l'utilisateur saisit un mot-clé dans la zone de recherche et appuie sur le bouton de recherche, JavaScript utilisera l'objet XMLHttpRequest pour l'envoyer. à la requête GET du serveur. Lorsque le serveur renvoie les résultats de la recherche, JavaScript affiche les résultats sur la page sans actualiser la page entière.

2. L'ère de jQuery

Avec le développement continu d'Ajax, jQuery est devenu le principal choix pour utiliser Ajax. jQuery fournit une API simple et facile à utiliser, facilitant l'utilisation d'Ajax. En utilisant jQuery, vous pouvez facilement envoyer différents types de requêtes telles que GET, POST, PUT, DELETE, etc.

Voici un exemple d'utilisation de jQuery pour effectuer une recherche sans actualiser la page :

function search() {
  var searchValue = $("#searchInput").val();
  $.get("/search?q=" + searchValue, function(data) {
    $("#searchResult").html(data);
  });
}

Dans cet exemple, lorsque l'utilisateur entre un mot-clé dans la zone de recherche et appuie sur le bouton de recherche, JavaScript utilisera la méthode $.get() de jQuery pour envoyer une requête GET au serveur. Lorsque le serveur renvoie les résultats de la recherche, jQuery affiche les résultats sur la page sans actualiser la page entière.

3. Modern Ajax

Modern Ajax n'est plus une simple combinaison d'objets JavaScript, XML et XMLHttpRequest. Désormais, les développeurs front-end disposent de nombreux frameworks et bibliothèques parmi lesquels choisir, tels que React, Vue.js, Angular, etc. Ces frameworks et bibliothèques permettent non seulement aux développeurs d'utiliser Ajax plus efficacement, mais permettent également aux applications Web de mieux fonctionner en termes de fonctionnalités et de performances.

Ce qui suit est un exemple d'utilisation de Vue.js pour implémenter la recherche sans actualiser la page :

<div id="app">
  <input type="text" v-model="searchValue">
  <button @click="search">Search</button>
  <div v-html="searchResult"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
  el: "#app",
  data: {
    searchValue: "",
    searchResult: ""
  },
  methods: {
    search() {
      var self = this;
      fetch("/search?q=" + this.searchValue)
      .then(response => response.text())
      .then(data => {
        self.searchResult = data;
      });
    }
  }
});
</script>

Dans cet exemple, lorsque l'utilisateur entre un mot-clé dans la zone de recherche et appuie sur le bouton de recherche, Vue.js exécutera la recherche ( ) méthode. La fonction fetch() est utilisée dans la méthode pour envoyer une requête GET au serveur. Lorsque le serveur renvoie les résultats de la recherche, Vue.js affiche les résultats sur la page sans actualiser la page entière.

Conclusion

L'histoire du développement d'Ajax est très longue, depuis les premières combinaisons technologiques simples jusqu'aux frameworks et bibliothèques modernes, sa signification et sa valeur sont constamment élargies et approfondies tout au long du processus. Bien que la technologie Ajax soit déjà un choix très courant dans le développement Web front-end, les développeurs doivent encore choisir la solution technique la plus adaptée en fonction des scénarios d'application spécifiques et des besoins lors de l'utilisation.

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!