Le principe d'AJAX : comment réaliser un rafraîchissement asynchrone et partiel

Comment réaliser un rafraîchissement asynchrone et partiel ? L'éditeur ci-dessous vous proposera un article sur les principes d'AJAX : comment réaliser une actualisation asynchrone et partielle. Maintenant, je le partage avec vous et le donne comme référence.

Présentation : si onReadyStateChange se voit attribuer une valeur par la fonction de rappel, elle peut être appelée de manière asynchrone et la fonction de rappel exploite directement le DOM, afin qu'elle puisse obtenir un rafraîchissement partiel. Alors, comment onReadyStateChange de XMLHttpRequest sait-il que le service est prêt ? Comment l’état change-t-il (mode observateur) ? Ceci est réalisé grâce à la demande de statut du client (interrogation régulière) du service.

Explication détaillée :

1 XMLHttpRequest est responsable de la communication avec le serveur, et il existe de nombreux attributs importants : readyStatus=4, status=200, etc. Lorsque l'état global de XMLHttpRequest est garanti terminé (readyStatus=4), les données ont été envoyées. Ensuite, interrogez l'état de la demande en fonction des paramètres du serveur (de la même manière que le client interroge l'état de retour du serveur, toujours une connexion http courte, pas une longue connexion côté serveur. Si tout est prêt (statut = 200), alors exécutez requis). opération.

L'opération consiste généralement à faire fonctionner directement le DOM, afin qu'AJAX puisse obtenir l'expérience utilisateur dite « sans rafraîchissement ».

document.getElementById("user1").innerHTML = "数据正在加载...";
      if (xmlhttp.status == 200) {
        document.write(xmlhttp.responseText);
      }

2. Alors comment le faire de manière asynchrone sur le client AJAX ? En fait, c'est le rôle de la fonction de rappel Javascript

Fournit une fonction de rappel JavaScript, qui est exécutée une fois la réponse du serveur disponible

Fonction métier :

function castVote(rank) {
 var url = "/ajax-demo/static-article-ranking.html";
 var callback = processAjaxResponse;
 executeXhr(callback, url);
}
需要异步通讯的函数： 


function executeXhr(callback, url) {
 // branch for native XMLHttpRequest object
 if (window.XMLHttpRequest) {
  req = new XMLHttpRequest();
  req.onreadystatechange = callback;
  req.open("GET", url, true);
  req.send()(null);
 } // branch for IE/Windows ActiveX version
 else if (window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if (req) {
   req.onreadystatechange = callback;
   req.open("GET", url, true);
   req.send()();
  }
 }
}
req.onreadystatechange = callback
req.open("GET", url, true)

La première ligne définit une fonction de rappel JavaScript qui est automatiquement exécutée une fois la réponse prête, et l'indicateur "true" spécifié dans la méthode req.open() indique que la requête doit être exécutée de manière asynchrone.

Une fois que le serveur a traité le XmlHttpRequest et l'a renvoyé au navigateur, la méthode de rappel définie à l'aide de l'affectation req.onreadystatechange sera automatiquement appelée.

Fonction de rappel :

function processAjaxResponse() {
 if (req.readyState == 4) {
  // only if "OK"
  if (req.status == 200) {
   document.getElementById("user1").innerHTML = req.responseText;
  } else {
   alert("There was a problem retrieving the XML data:
" + req.statusText);
  }
 }
}

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

Articles connexes :

Analyse approfondie de la mise en œuvre par Nginx des problèmes de requêtes inter-domaines AJAX

Comment utiliser le contrôle Rating d'AjaxToolKit

Téléchargement de fichiers avec barre de progression basée sur 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!