Explorer le potentiel des propriétés AJAX : les secrets d'une puissance incroyable révélés

Analyse des attributs AJAX : des fonctions merveilleuses que vous ne connaissez pas

Introduction :
Dans le développement Web moderne, AJAX (JavaScript asynchrone et XML) est un concept très important. Il nous permet de communiquer de manière asynchrone avec le serveur Web et de mettre à jour le contenu de la page via JavaScript sans recharger la page entière. En plus de l'utilisation de base courante, AJAX possède également des fonctions puissantes et magiques. Cet article explorera ces fonctions en profondeur et fournira des exemples de code spécifiques.

I. Chargement dynamique des feuilles de style CSS
AJAX peut être utilisé non seulement pour charger des données XML, JSON ou HTML, mais également des feuilles de style CSS. En utilisant AJAX pour charger une feuille de style de manière asynchrone, nous pouvons appliquer des styles étape par étape au fur et à mesure du chargement de la page, plutôt que d'attendre que la feuille de style entière soit chargée avant de l'appliquer. Ceci est très utile pour améliorer les performances de la page et l’expérience utilisateur.
Exemple de code :

var xhr = new XMLHttpRequest();
xhr.open("GET", "styles.css", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var style = document.createElement("style");
    style.innerHTML = xhr.responseText;
    document.head.appendChild(style);
  }
};
xhr.send();

II. Invite de progression du téléchargement de fichiers
Dans le processus de téléchargement de fichiers traditionnel, la progression du téléchargement ne peut pas être affichée et le résultat ne peut être connu qu'une fois le téléchargement terminé. Cependant, en utilisant AJAX, nous pouvons obtenir des informations sur la progression du téléchargement du fichier et les afficher à l'utilisateur en temps réel pour offrir de meilleurs commentaires et une meilleure expérience utilisateur.
Exemple de code :

var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    var percent = (e.loaded / e.total) * 100;
    console.log("上传进度：" + percent + "%");
  }
};
xhr.send(formData);

Dans cet exemple, nous pouvons obtenir les informations de progression du téléchargement en écoutant l'événement xhr.upload.onprogress, puis les traiter si nécessaire. xhr.upload.onprogress事件，可以获取到上传进度信息，然后根据需要进行处理。

III. 跨域请求
AJAX最初设计用于同域请求，即只能请求同一域名下的资源。但是，通过一些特殊的技术手段，我们可以使用AJAX进行跨域请求，即从一个域名的页面向其他域名的页面发送AJAX请求。
代码示例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/data", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

在这个示例中，我们通过AJAX向http://example.com/data

III. Requêtes inter-domaines

AJAX a été conçu à l'origine pour les requêtes du même domaine, c'est-à-dire qu'il ne peut demander que des ressources sous le même nom de domaine. Cependant, grâce à certains moyens techniques spéciaux, nous pouvons utiliser AJAX pour effectuer des requêtes inter-domaines, c'est-à-dire envoyer des requêtes AJAX depuis des pages d'un nom de domaine vers des pages d'autres noms de domaine.
Exemple de code :

rrreee

Dans cet exemple, nous avons envoyé une requête GET à http://example.com/data via AJAX, si le serveur autorise les requêtes inter-domaines, et avons renvoyé une requête qui répond aux exigences Avec les données de réponse, nous pouvons traiter la réponse dans le code front-end.

🎜Conclusion : 🎜AJAX est une technologie puissante qui possède de nombreuses fonctionnalités fantastiques en plus du chargement asynchrone courant des données. En chargeant dynamiquement les feuilles de style CSS, les invites de progression du téléchargement de fichiers et les requêtes inter-domaines, nous pouvons encore améliorer les performances et l'expérience utilisateur des applications Web. En utilisant AJAX, nous pouvons établir une communication asynchrone avec le serveur et mettre à jour dynamiquement le contenu de la page sans recharger la page entière via JavaScript. 🎜🎜Veuillez noter : les exemples de code contenus dans cet article sont uniquement à titre de référence. Veuillez apporter les modifications et ajustements appropriés en fonction des besoins spécifiques de l'utilisation réelle. 🎜

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!