Révéler la puissance de l'Ajax-js tutoriel-php.cn

Révéler la puissance de l'Ajax

王林

Libérer： 2024-01-30 10:02:17

original

1165 Les gens l'ont consulté

Révéler la puissance de lAjax

La fonction d'Ajax est révélée, des exemples de code spécifiques sont nécessaires

Ajax (JavaScript asynchrone et XML) est une technologie utilisée pour l'interaction de données asynchrones sur les pages Web. Il vous permet d'interagir avec le serveur, d'obtenir des données et de mettre à jour certaines parties de la page Web sans actualiser la page entière. L'émergence d'Ajax joue un rôle crucial dans l'amélioration de l'expérience utilisateur, en augmentant la dynamique et la vitesse de réponse des pages Web. Cet article révélera les fonctions d'Ajax et fournira des exemples de code spécifiques pour aider les lecteurs à mieux le comprendre et l'utiliser.

Tout d’abord, examinons l’utilisation de base d’Ajax. Dans les pages HTML, les requêtes asynchrones peuvent être envoyées via l'objet XMLHttpRequest de JavaScript. Voici un exemple de code simple :

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

Copier après la connexion

Le code ci-dessus crée d'abord un objet XMLHttpRequest, puis définit une fonction de rappel onreadystatechange, qui sera appelée lorsque le serveur renvoie une réponse. Lorsque readyState vaut 4 (indiquant que la réponse du serveur a été terminée) et status vaut 200 (indiquant le succès), le code affichera les données renvoyées par le serveur dans l'identifiant. de l'élément demo . onreadystatechange，该函数会在服务器返回响应时被调用。当readyState为4（表示服务器响应已完成）且status为200（表示成功）时，代码会将服务器返回的数据展示在id为demo的元素内。

接下来，我们将看到Ajax的一个重要特性——实现动态加载内容。通过Ajax，我们可以在不刷新整个页面的情况下，从服务器加载其他页面的内容。下面是一个利用Ajax实现动态加载内容的示例：

function loadContent() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("content").innerHTML = this.responseText;
    }
  };
  var pageUrl = "news.html";
  xhttp.open("GET", pageUrl, true);
  xhttp.send();
}

Copier après la connexion

上述代码中，通过XMLHttpRequest对象发送了一个GET请求，其中pageUrl变量为将要加载的页面的URL。服务器返回的页面内容将被显示在id为content的元素内。

另外，Ajax还可以与服务器进行数据交互，使得网页能够在不刷新的情况下实时更新数据。下面是一个通过Ajax实现实时获取服务器数据的示例：

function updateData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = JSON.parse(this.responseText);
      document.getElementById("data").innerHTML = data.value;
    }
  };
  var url = "data.json";
  xhttp.open("GET", url, true);
  xhttp.send();
}

// 每隔一段时间调用updateData函数
setInterval(updateData, 5000); // 每5秒更新一次

Copier après la connexion

通过上述代码，页面会每隔5秒从服务器上获取一次数据，然后将数据展示在id为data的元素内。这样就实现了实时更新数据的效果。

除了GET请求外，Ajax也支持POST请求。POST请求常用于提交表单数据到服务器。下面是一个使用Ajax发送POST请求的示例：

function postData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = this.responseText;
      document.getElementById("result").innerHTML = response;
    }
  };
  var data = new FormData();
  data.append('username', 'john');
  data.append('password', '123456');
  xhttp.open("POST", "login.php", true);
  xhttp.send(data);
}

Copier après la connexion

上述代码中，FormData

Ensuite, nous verrons une fonctionnalité importante d'Ajax : le chargement dynamique du contenu. Grâce à Ajax, nous pouvons charger le contenu d'autres pages depuis le serveur sans actualiser la page entière. Voici un exemple d'utilisation d'Ajax pour charger dynamiquement du contenu :

rrreee

Dans le code ci-dessus, une requête GET est envoyée via l'objet XMLHttpRequest, où la variable pageUrl est l'URL de la page à charger. Le contenu de la page renvoyé par le serveur sera affiché dans l'élément avec l'identifiant content.

De plus, Ajax peut également interagir avec le serveur pour les données, permettant à la page Web de mettre à jour les données en temps réel sans les actualiser. Voici un exemple d'obtention de données du serveur en temps réel via Ajax : 🎜rrreee🎜Avec le code ci-dessus, la page obtiendra les données du serveur toutes les 5 secondes, puis affichera les données dans l'élément avec l'identifiant de données À l'intérieur. Cela permet d'obtenir l'effet de mettre à jour les données en temps réel. 🎜🎜En plus des requêtes GET, Ajax prend également en charge les requêtes POST. Les requêtes POST sont souvent utilisées pour soumettre des données de formulaire au serveur. Voici un exemple d'utilisation d'Ajax pour envoyer une requête POST : 🎜rrreee🎜Dans le code ci-dessus, l'objet FormData est utilisé pour stocker les données qui doivent être envoyées. Lorsque le troisième paramètre de la fonction open est défini sur true, la requête deviendra asynchrone, c'est-à-dire une requête Ajax. 🎜🎜Grâce aux exemples de code ci-dessus, je pense que les lecteurs auront une compréhension plus approfondie des fonctions d'Ajax. Il convient de mentionner que afin de garantir la compatibilité des navigateurs, des bibliothèques JavaScript telles que jQuery peuvent être utilisées pour simplifier les opérations Ajax. 🎜🎜Pour résumer, Ajax est puissant et peut nous aider à charger dynamiquement du contenu, à obtenir des données du serveur en temps réel et à soumettre des formulaires. En utilisant Ajax, nous pouvons améliorer l'interactivité et la vitesse de réponse des pages Web et offrir aux utilisateurs une meilleure expérience. J'espère que les exemples de code spécifiques contenus dans cet article pourront aider les lecteurs à mieux comprendre et utiliser la technologie Ajax. 🎜

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!