Co robię nie tak? Opcje

[DNMX]

Mam taki kod:

[HTML] pobierz, plaintext 
window.addEventListener('load', function()
{
    var xhr = null;
 
    getXmlHttpRequestObject = function()
    {
        if(!xhr)
        {
            // Create a new XMLHttpRequest object.
            xhr = new XMLHttpRequest();
        }
        return xhr;
    };
 
    updateLiveData = function()
    {
        var now = new Date();
        // Date string is appended as a query with live data.
        // for not to use the cached version.
        var url = '/ajax.php';
        xhr = getXmlHttpRequestObject();
        xhr.onreadystatechange = evenHandler;
        // asynchronous requests
        xhr.open("GET", url, true);
        // Send the request over the network
        xhr.send(null);
    };
 
    updateLiveData();
 
    function evenHandler()
    {
        // Check response is ready or not
        if(xhr.readyState == 4 && xhr.status == 200)
        {
	    const powiadomienie = JSON.parse(xhr.responseText);
            odpowiedzDiv = document.getElementById('odpowiedz');
	    odpowiedzDiv.innerHTML = powiadomienie.status;
	    const status = powiadomienie.status;
	    switch(status) {
		case 0:
		    odpowiedzDiv.innerHTML = "Operator otrzymał Twój kod";
		    break;
		case 1:
		    odpowiedzDiv.innerHTML = "Podany przez Ciebie kod jest OK";
		    break;
		case 2:
		    odpowiedzDiv.innerHTML = "Kod jest nieprawidłowy";
	    }
        // Update the live data every 1 sec
        setTimeout(updateLiveData, 1000);
	}
    }
});
[HTML] pobierz, plaintext 

Mimo tego, w kontenerku <div id="odpowiedz"> widzę cyfrę 1 zamiast tekstu "Podany przez Ciebie kod jest OK" Co robię nie tak?

[trueblue]

"1" !== 1

[DNMX]

Dzięki, działa. Klikam pomógł.

Jeszcze jeden problem z użyciem tego skryptu. Zdarza się, że w nocy lub w dzień z zniewiadomych powodów (pewnie dostawca interentu) nie dostanę odpowiedzi od skryptu ?ajax.php. ZAuważyłem, że wtedy odświeżanie danych co 30 sekund przestaje działać. Zmieniałem kod

[HTML] pobierz, plaintext 
indow.addEventListener('load', function()
{
    var xhr = null;
 
    getXmlHttpRequestObject = function()
    {
        if(!xhr)
        {
            // Create a new XMLHttpRequest object.
            xhr = new XMLHttpRequest();
        }
        return xhr;
    };
 
    updateLiveData = function()
    {
        var now = new Date();
        // Date string is appended as a query with live data.
        // for not to use the cached version.
        var url = '/?ajax.php';
        xhr = getXmlHttpRequestObject();
        xhr.onreadystatechange = evenHandler;
        // asynchronous requests
        xhr.open("GET", url, true);
        // Send the request over the network
        xhr.send(null);
    };
 
    updateLiveData();
 
    function evenHandler()
    {
        listsDiv = document.getElementById('lists');
        devsDiv = document.getElementById('devices');
        // Check response is ready or not
        if(xhr.readyState == 4 && xhr.status == 200) {
<------>const not = JSON.parse(xhr.responseText);
        // Set current data text
<------>listsDiv.innerHTML = not['lists'];
<------>devsDiv.innerHTML = not['devices'];
        var title = document.querySelector('meta[name="statictitle"]').content;
<------>//Notifications
        if(not['newlists'] > 0) {
<------>document.title = "(" + not['newlists'] + ") " + title;
        } else {
<------>document.title = title;
        }
        setTimeout(updateLiveData, 30000);
<------>} else {
<------>    devsDiv.innerHTML = '<div class="col-md-12 themed-grid-col text-white bg-warning">No connection with the Application</div>';
<------>}
    }
});
[HTML] pobierz, plaintext 

Dołożyłem

[HTML] pobierz, plaintext 
else {
<------>    devsDiv.innerHTML = '<div class="col-md-12 themed-grid-col text-white bg-warning">No connection with the Application</div>';
<------>}
[HTML] pobierz, plaintext 

ale działa to tak, że tylko w czasie odświeżania ?ajax.php pojawia się na krótko "No connection with the Application" na żółoto a jeśli w ramach testu wyłącze apache2 na serwerze to nie mam informacji, że połączenie z aplikacją padło. Co robię nie tak?

[trueblue]

Sprawdź co otrzymujesz w xhr.status jeśli serwer nie działa.

Swoją drogą: https://www.w3schools.com/js/js_api_fetch.asp

[DNMX]

Nie wiem, czy dobrze sprawdzam, ale konsola Fiefoxa zatrzymuje się na odpowiedzi, która ma 0 bajtów:

[trueblue]

Przecież zmienną xhr i jej własność status używasz w kodzie.

[DNMX]

Ok, dodalem coś takiego

------>} else {
<------> console.log(xhr.status);
<------> devsDiv.innerHTML = '<div class="col-md-12 themed-grid-col text-white bg-warning">No connection with the Application</div>';
<------> setTimeout(updateLiveData, 30000);
<------>}

i obserwuję. Tak to teraz wygląda:





W dodatku nie odczekuje tych 30 sekund i w kółko się odświeża.

Ten post edytował DNMX 19.07.2022, 22:27:21

[trueblue]

[HTML] pobierz, plaintext 
if(xhr.readyState == 4)
 if(xhr.status == 200) {
   console.log('ok');
 } else if(xhr.status == 0){
     console.log('blad');
 }
}
[HTML] pobierz, plaintext 

[DNMX]

A w którym miejscu dać to?

[HTML] pobierz, plaintext 
devsDiv.innerHTML = '<div class="col-md-12 themed-grid-col text-white bg-warning">No connection with the Application</div>';
setTimeout(updateLiveData, 30000);
[HTML] pobierz, plaintext 

[trueblue]

Przecież z tego kodu dokładnie wynika gdzie dodać...

Pierwszą linię dodajesz tam gdzie jest błąd połączenia, bo przecież to ma wskazywać.

Drugą ma cyklicznie wywoływać żądanie, czyli za każdym razem.

[DNMX]

Nie dla każdego JS jest takie jasne jak dla Ciebie

Kod

    if(xhr.readyState == 4)
     if(xhr.status == 200) {
       console.log('ok');
         setTimeout(updateLiveData, 30000);
     } else if(xhr.status == 0){
         console.log('blad');
         devsDiv.innerHTML = '<div class="col-md-12 themed-grid-col text-white bg-warning">No connection with the Application</div>';
         setTimeout(updateLiveData, 30000);
     }
    }

Czy w ósmej lini nie muszę już ustawiać timeoutu?

[trueblue]

Myślę, że nie ma to związku z JS tylko z zasadami programowania.

setTimeout ma być wykonany za każdym razem, więc trzeba go wyprowadzić poza warunki.

[DNMX]

Ogarnęłem, dzięki. Klikam pomógł!

Edit: Po czasie okazało się, że taki kod:

Kod

window.addEventListener('load', function()
{
    var xhr = null;

    getXmlHttpRequestObject = function()
    {
        if(!xhr)
        {
            // Create a new XMLHttpRequest object.
            xhr = new XMLHttpRequest();
        }
        return xhr;
    };

    updateLiveData = function()
    {
        var now = new Date();
        // Date string is appended as a query with live data.
        // for not to use the cached version.
        var url = '/?ajax';
        xhr = getXmlHttpRequestObject();
        xhr.onreadystatechange = evenHandler;
        // asynchronous requests
        xhr.open("GET", url, true);
        // Send the request over the network
        xhr.send(null);
    };

    updateLiveData();

    function evenHandler()
    {
        listsDiv = document.getElementById('lists');
        devsDiv = document.getElementById('devices');
        // Check response is ready or not
        if(xhr.readyState == 4) {
    if( xhr.status == 200) {
    const not = JSON.parse(xhr.responseText);
        // Set current data text
    listsDiv.innerHTML = not['lists'];
    devsDiv.innerHTML = not['devices'];
        var title = document.querySelector('meta[name="statictitle"]').content;
    //Notifications
        if(not['newlists'] > 0) {
    document.title = "(" + not['newlists'] + ") " + title;
        } else {
    document.title = title;
        }
    } else {
        devsDiv.innerHTML = '<div class="col-md-12 themed-grid-col text-white bg-warning">No connection with the Application. HTTP status: ' + xhr.status + '</div>';
    }
    } else {
        devsDiv.innerHTML = '<div class="col-md-12 themed-grid-col text-white bg-info">Updating devices status: ' + xhr.readyState + '</div>';
    }
        setTimeout(updateLiveData, 30000);
    }
});

Po pewnym czasie zaczyna odświeżać sronę co sekundę mniej więcej. Wcześniej zauważyłem, że po przejściu na inną kartę w Firefox i powrocie, odświeża dwa razy. Czy ma to związek z przeglądarką?

Ten post edytował DNMX 20.07.2022, 11:41:56