Actualiser une réquete

Bonsoir je ne savais pas trop ou metre sa! Mais bon je suppose que mon problème viens plus de la partie ajax de mon script.
En fait j'ai crée un petit système de like et dislike qui fonctione normalement mais à chaque fois sa doit réchargé la page. Je suis donc mis à l'ajax et jusqu'a présent la réquetes est bien  envoyer à la base de données mais le nombre de like sur la ne change qu'apres la rechage.

Voici me mon code
La session du code qui affiche le nombre de like et dislike

 <div id="like-and-dislike">
   <?php
      /*Nombre de like et dislikes */
      $likes = $pdoforum->query('SELECT id FROM likes WHERE id_article ='.$id);
      $likes = $likes->rowCount();

      $dislikes = $pdoforum->query('SELECT id FROM dislikes WHERE id_article ='.$id);
      $dislikes = $dislikes->rowCount();
   ?>
   <a class="action_blog_like" href="blog/actions_blog.php?t=1&id=<?= $article['id']; ?>"><i class="fa fa-heart"> <?= $likes ?></i></a>
   <a class="action_blog_like" href="blog/actions_blog.php?t=2&id=<?= $article['id']; ?>"><i class="fa fa-thumbs-down"> <?= $dislikes ?> </i></a>
</div>

La partie qui s'occupe de l'asynchrone

 <script>
   $(".action_blog_like").click(function(e){
      e.preventDefault();

      var xhr = new XMLHttpRequest();
      var $a = $(this);
      var url = $a.attr('href');
                
      xhr.onreadystatechange = function(){
         if(this.readyState == 4 && this.status == 200) {
            var res = this.response;
            if (res.success) {
               alert(res.msg);
            } else {
               alert(res.msg);
            }
         }else if(this.readyState == 4){
            alert("Une erreur est survenue..."); }
         };
      xhr.open("POST", url, true);
      xhr.responseType = "json";
      xhr.send();
   });
</script>

Ce que je veux
Tous se passe bien en arrière mais le nombre de like sur la page active ne change que si on actualise la page, chose qui n'est pas vrai idéal! Comment faire pour que le nombre de like change aussi.

Merci d'avance.

Salut. Il te suffirait, sur le php qui est utilisé par l’asynchrone, de rajouter deux conditions du genre: si il a cliqué sur LIKE, alors: et la tu remet le script pour récupérer le nombre de LIKES, puis tu fais echo $nombrelikes;
ainsi que
si il a cliqué sur DISLIKES, alors: et la tu remet le script pour récupérer le nombre de DISLIKES, puis tu fais echo $nombredislikes;
Ensuite dans ton js, par exemple après xhr.send(); tu met
$a.find('i').html(xhr.responseText); 

La je t’avoue que je t’ai donné la démarche a l’arrache car je suis sur téléphone (je suis même pas sur que find() c’est la bonne fonction que je veux te montrer mdr je suis rouillé) donc si tu comprend pas j’irais sur mon pc pour te donner une démarche plus détaillée.
:)

Bonsoir et merci déjà pour ta réponse.
Vrai que j'ai rien compris.

J'ai un peu  avancer!! J'ai crée un fonction qui réactualiser le contenu de la div au clique sur l'un des bouton

function like_dislike(){
   $('#like-and-dislike').load("like.php?id=<?= $art['id']; ?>");
}
var res = this.response;
if (res.success) {
   alert(res.msg);
   like_dislike();
} else {
   ...
}

Contenu de like.php

$id = $_GET['id'];
require ("bdb.php");
   $v1 = $pdo->query('SELECT * FROM article WHERE id ='.$id);
   $article = $v1->fetch();
   $likes = $pdo->query('SELECT id FROM likes WHERE article ='.$id);   
   $likes = $likes->rowCount();         
   $dislikes = $pdo->query('SELECT id FROM dislikes WHERE article ='.$id);      
   $dislikes = $dislikes->rowCount();
   echo  '<a id="action_blog_like" href="/blog/actions_blog.php?t=1&id='.$id.'"><i class="fa fa-heart like"> <span>'.$likes.'</s

pan></i></a><a id="action_blog_like" href="/blog/actions_blog.php?t=2&id='.$id.'"><i class="fa fa-thumbs-down dislike"> <span>'.$dislikes.'</span></i></a>';

Tous fonctionne bien au premier clique!! Mais au second le script se comporte comme s'il étais synchrone (On dirai que je Js était dessiccative)!