how to detect XMLHttpRequest and add function

Question

I'm working on php project,

I have 2 pages, data is synchronized between pages using XMLHttpRequest .

When i click button on the first page, the dom in the second page is updated .

I have this function :

function getAlertes(popup) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() { //Action en réponse de la requête
        if (this.readyState == 4 && this.status == 200) {
            if (popup) {
                document.getElementById("popup-container").innerHTML = this.responseText;
            } else {
                document.getElementById("listAlertes").innerHTML = this.responseText;
            }
            toggleListInvisible();
        }
    };
    // Préparation et envoi de la requête au serveur
    xmlhttp.open("GET", "../../private/controller/action_list_alertes.php?popup=" + popup, true);
    xmlhttp.send();
}

This js script allow to add a div eatch time a button is clicked :

How can i fetch the data eatch time an XMLHttpRequest is detected in the destination page ?

I tried this :

function getAlertes(popup) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() { //Action en réponse de la requête
        if (this.readyState == 4 && this.status == 200) {
            if (popup) {
                document.getElementById("popup-container").innerHTML = this.responseText;
                const audio = new Audio("../audio/BELLDoor_Doorbell.wav");
                audio.play();
            } else {
                document.getElementById("listAlertes").innerHTML = this.responseText;
            }
            toggleListInvisible();
        }
    };
    // Préparation et envoi de la requête au serveur
    xmlhttp.open("GET", "../../private/controller/action_list_alertes.php?popup=" + popup, true);
    xmlhttp.send();
}

i need to play sound when the dom is updated by in this cas the sound is played for every XMLHttpRequest.

First, XmlHttpRequest is not special in any way, it is just a wrapper for JS to use. There is a [common pattern](https://stackoverflow.com/a/2579271/231316) that you can look for a special header, but it is not secure and there's arguably better ways. So instead, you have a page where you click a button and an HTTP GET request is sent to the server. On your second page, you need a method for it to [listen or be told](https://stackoverflow.com/a/28197906/231316) when that happens, and there are many options. — Chris Haas, Jul 18 '22 at 14:49
If all you want to do is to play a sound, then you should do that using JS in your callback, not PHP (which is a _server side_ language and can't play sounds on the _client_). — M. Eriksson, Jul 18 '22 at 14:52
I updated my question, i play sound when this.readyState == 4 && this.status == 200, the problem that the sound is alaways played, i only need to play a soud when new div appear — Khaled Boussoffara, Jul 18 '22 at 15:00
Don't you know when you make the request if it's going to create a new div or not? In that case, just pass that as an argument to your funciton. — M. Eriksson, Jul 18 '22 at 15:03
It seems like this is better suited to inter-window communication ( ie: postMessage, BroadcastChannel etc ) rather than AJAX — Professor Abronsius, Jul 18 '22 at 15:09

how to detect XMLHttpRequest and add function

0 Answers0