Comment implémenter l'actualisation asynchrone et l'actualisation partielle en AJAX

Cette fois, je vais vous montrer comment AJAX implémente le rafraîchissement asynchrone et le rafraîchissement partiel. Quelles sont les précautions pour qu'AJAX implémente le rafraîchissement asynchrone et le rafraîchissement partiel. Voici des cas pratiques, jetons un coup d'œil.

Présentation : onReadyStateChange est attribué par la fonction de rappel , et des appels asynchrones peuvent être réalisés. La fonction de rappel exploite directement le DOM, et un rafraîchissement partiel peut être réalisé. Alors, comment onReadyStateChange de XMLHttpRequest sait-il que le service est prêt ? Comment le statut a-t-il changé (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 la fonction de la fonction de rappel de Javascript

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

. 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 la 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é 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);
  }
 }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Comment créer une pagination asynchrone avec le plug-in de pagination laypage + ajax

Implémentations JS+ajax Formulaire de soumission asynchrone php

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!