Résumé en 3 points des principes techniques d'Ajax_liés à AJAX

Cet article présente principalement un résumé en 3 points des principes techniques d'Ajax. Les amis dans le besoin peuvent se référer à

ajax : Javascript asynchrone et XML Javascript et XML asynchrones.

est une technologie de développement Web permettant de créer des applications Web interactives.

1.0 Avantages :
1.1 Améliore l'expérience utilisateur grâce au mode asynchrone.
1.2 Optimise la transmission entre le navigateur et le serveur, réduisant ainsi les allers-retours de données inutiles et l'utilisation de la bande passante.
1.3 Le moteur Ajax fonctionne sur le client et prend en charge une partie du partage qui était initialement supporté par le serveur, réduisant ainsi la charge du serveur sous un grand nombre d'utilisateurs.

Principe de fonctionnement 2.0

Le cœur d'Ajax est l'objet Javascript XmlHttpRequest. Cet objet a été référencé pour la première fois dans IE5 et constitue une technologie qui prend en charge les requêtes asynchrones. XmlHttpRequest vous permet d'utiliser Javascript pour envoyer des requêtes au serveur et traiter la réponse, plutôt que de bloquer l'utilisateur, obtenant ainsi un effet sans actualisation.
En raison des différences entre les navigateurs, il existe également des différences dans la manière de créer des objets XmlHttpRequest (principalement des différences entre IE et les autres navigateurs).
2.1 Une méthode plus générale de création de requêtes asynchrones :

function CreateXmlHttp() {
//非IE浏览器创建XmlHttpRequest对象的方法
if (window.XmlHttpRequest) {
        xmlhttp = new XmlHttpRequest();
    }
//IE浏览器创建XmlHttpRequest对象的方法
if (window.ActiveXObject) {
try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
catch (e) {
    try {
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
             }
    catch (ex) 
            { }
        }
    }
}

2.2 Attributs liés à XmlHttpRequest :

onreadystatechange Le gestionnaire d'événement pour l'événement déclenché à chaque fois que l'état change.

ResponseText La forme de chaîne des données renvoyées par le processus serveur.

responseXML L'objet de données de document compatible DOM renvoyé par le processus serveur.

Status Text Les informations de chaîne accompagnant le code d'état

readyState Valeur d'état de l'objet

0 (non initialisé) L'objet a été créé, mais il n'a pas été initialisé (le fichier ouvert la méthode d'envoi n'a pas encore été appelée)

1 (Initialisé) L'objet a été créé, mais la méthode d'envoi n'a pas encore été appelée

　　2 (Envoyer des données) La méthode d'envoi a été appelée, mais l'état actuel et l'en-tête http sont inconnus

　 　　3 (Les données sont en cours de transfert) Une partie des données a été reçue car la réponse et l'en-tête http sont incomplets. À l'heure actuelle, elles sont obtenues via ResponseBody et ResponseText. il y aura des erreurs dans certaines données,

　4 (Complet) Les données sont reçues à ce moment, les données de réponse complètes peuvent être obtenues via ResponseXml et ResponseText

　2.3 Exemple de démonstration simple :

3.0 Inconvénients :

function SendAsyncRequest() {
var data = document.getElementById("XXId").value;
    CreateXmlHttp();  //创建XmlHttpRequest对象
if (!xmlhttp) {         //判断对象是否创建成功
       alert("创建xmlhttp对象异常！");
    return false;
    }
    xmlhttp.open("POST", url, false);   //开始发送异步请求
    xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
            document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText;   //数据接收完毕
        }
    }
    xmlhttp.send();   
}

1. Cela détruit le comportement normal du bouton de retour du navigateur. Après la mise à jour dynamique de la page, il est impossible de revenir à l'état de la page précédente.

2. En utilisant Javascript comme moteur de base d'Ajax, la compatibilité de Javascript n'est pas très bonne. (Bien sûr, les bibliothèques JavaScript populaires telles que Jquery ont considérablement amélioré ces problèmes, et l'appel à Ajax est également beaucoup plus pratique. Cet article ne décrit que brièvement les principes de base d'implémentation d'Ajax).

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Guide d'utilisation de la classe d'encapsulation AJAX

Tutoriel débutant AJAX : Apprendre à connaître AJAX pour la première fois

Explication détaillée de l'interaction du navigateur et du serveur en 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!