• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Odczyt stanu przekaźnika - XML (readyState = 4 status = 0)

+1 głos
103 wizyt
pytanie zadane 21 września 2020 w JavaScript przez komar54 Użytkownik (730 p.)

Mam problem z działaniem AJAXA (chociaż nie, raczej jest to brak wiedzy, bo to pierwsze zetknięcie z tym czymś :) ).

Chcę odświeżać stan przekaźnika, który zwraca dane w formacie XML. Jak wpiszę w przeglądarce "http://IP_MODUŁU/status.xml" to dostaję odpowiedź:

strona_XML

źródło_strony_XML

Na tę chwilę chciałem przetestować uaktualnianie stanu przekaźnika więc strona wygląda tak:

<!DOCTYPE html>
<html>
	<head>
		<script> 
			function loadXMLDoc() 
			{
				var xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange = function() 
				{	
					document.getElementById("div2").innerHTML = this.readyState;
					document.getElementById("div3").innerHTML = this.status;
					if (this.readyState == 4 && this.status == 200) 
					{
						document.getElementById("div1").innerHTML = xhttp.responseText;
					}
				}
				xhttp.open("GET", "http://192.168.0.181/status.xml", true);
				//xhttp.open("GET", "status.xml", true);
				 
				xhttp.send(); 
				alert("dziala");
			}
		</script>
	</head>
	<body>

		<div id="div1"><h2>TEST</h2></div>
		<div id="div2">readyState</div>
		<div id="div3">status</div>

		<button type="button" onclick="loadXMLDoc()">TEST</button>

	</body>
</html>

Niestety nie mogę odebrać "stanu przekaźnika" bo po naciśnięciu przycisku "TEST" readyState zmienia się 4 a status na 0.

Do testów skopiowałem źródło strony odpowiedzi przekaźnika i zapisałem w tym samym folderze co plik strony (nazwałem go status.xml). Zakomentowałem linijkę 17 i oddkomentowałem linijkę 18 z powyższego kodu i w takiej wersji działa - wyświetla na stronie zawartość pliku status XML:

Screen - wcztanie z pliku status.xml

Gdzie może być problem, że status = 0 i nie mogę odczytać danych bezpośrednio z przekaźnika?

Za pomoc i wskazówki w czym może być problem z góry dziękuję :)

komentarz 21 września 2020 przez VBService Mędrzec (172,150 p.)
edycja 21 września 2020 przez VBService

Dobrą alternatywą dla XMLHttpRequest i jQuery.ajax():

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

komentarz 21 września 2020 przez Comandeer Guru (569,400 p.)
Ale fetch to też Ajax.
komentarz 21 września 2020 przez VBService Mędrzec (172,150 p.)
W sumie racja. Poprawione.

2 odpowiedzi

+1 głos
odpowiedź 21 września 2020 przez Comandeer Guru (569,400 p.)
wybrane 22 września 2020 przez komar54
 
Najlepsza

Czy w konsoli przeglądarki są jakieś błędy?

Strzelam, że przekaźnik ma inne IP niż komp, z którego odpalasz ten kod. Więc zapewne natykasz się na CORS.

Dodatkowo pytanie, czy odpalasz ten skrypt z poziomu serwera (np. XAMPP-a) czy z dysku (czyli dwuklik na pliku HTML)? Jeśli to drugie, to to również nie zadziała, bo Ajax dla plików z dysku jest blokowany.

komentarz 21 września 2020 przez komar54 Użytkownik (730 p.)

Błędów w konsoli nie sprawdzałem :/ Będę mógł sprawdzić to jutro, bo w tej chwili nie mam dostępu do przekaźnika.

Strzelam, że przekaźnik ma inne IP niż komp...

Komputer ma IP 192.168.0.180 a przekaźnik 192.168.0.181. O te adresy chodziło? Komputer z przekaźnikiem podłączony jest przez switch.

Odpalam z poziomu serwera XAMPP.

Nie wiem czy ta informacja coś wniesie ale napisałem też skrypt w Pythonie i bez problemu odbieram dane (XML) z przekaźnika (na tym samym komputerze w tym samym układzie podłączenia komputer-switch-przekaźnik)

komentarz 21 września 2020 przez Comandeer Guru (569,400 p.)
Python bez problemu odbierze, bo nie ma ograniczeń przeglądarki. W niej z kolei jest wspomniany już CORS, który nie pozwala pobrać danych z innego adresu.

Jeśli się nie da skonfigurować przekaźnika, żeby serwował dane z odpowiednimi nagłówkami HTTP, to raczej jedynie ten skrypt w Pythonie będzie działał.
komentarz 22 września 2020 przez komar54 Użytkownik (730 p.)

Zrobiłem screen z konsoli – nie jest dobrze :) :

konsola

Przetestowałem jeszcze jedną rzecz. Na komputerze (IP 192.168.0.12), na którym jest XAMPP umieściłem kod strony (nazwa_strony.html) i plik XML (status.xml) z zapisaną odpowiedzią z przekaźnika.

W kodzie strony jest linijka:

xhttp.open("GET", "http://192.168.0.12/status.xml", true);

Z drugiego komputera (IP 192.168.0.16) przez przeglądarkę wchodzę na 192.168.0.12/nazwa_strony.html i wszystko się odświeża prawidłowo. Czemu w takiej konfiguracji to działa? Czy jak idzie to z serwera XAMPP to on dołącza wspomniane nagłówki i dlatego wszystko działa?

 

Czy nie ma jakieś możliwości żeby to ominąć?

Tak na szybko wpadł mi pomysł, żeby innym skryptem pobierać dane z przekaźnika na dany komputer i dopiero te dane, które są „lokalne” wyświetlać w przeglądarce.

Wykorzystanie samej przeglądarki ma taki plus, że ma ją każdy. A w takim rozwiązaniu trzeba by jeszcze udostępniać inny program. Chyba, że zmienić przekaźnik, który będzie chętniej współpracował :)

 

 

komentarz 22 września 2020 przez Comandeer Guru (569,400 p.)
W przykładzie, o którym mówisz, to działa, bo dane mają to samo IP, co strona (serwer), który je serwuje.

Skoro masz XAMPP-a, to możesz napisać skrypt w PHP, który będzie pobierał te dane i tym samym problem zniknie, bo będą dostępne z tego samego IP.
komentarz 22 września 2020 przez komar54 Użytkownik (730 p.)
Dobra, chyba dotarło do mnie o co chodzi :). Dzięki za wskazówki i pomoc!
0 głosów
odpowiedź 21 września 2020 przez VBService Mędrzec (172,150 p.)
edycja 21 września 2020 przez VBService

Może te odpowiedzi z innych wpisów na tym forum, będą pomocna dla Ciebie. wink

1. XMLHttpRequest() (link pełny opis)

        function showInPanel(str) {
            const panel = document.getElementById("panel_lewy");
            panel.innerHTML = str;
        }
        function onProgress(e) {
            let percent = (e.position / e.totalSize) * 100;
            const status = "Pobieram dokument ... " + percent + "%";
            showInPanel(status);
        }
        function onError(e) {
            const status = "Błąd podczas pobierania dokumentu\n" + e.target.status;
            showInPanel(status);
        }
        function onLoad(e) {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                const xmlDoc = xmlHttp.responseXML;
                const data = xmlDoc.getElementsByTagName("department");
                let html = "<table>";
                html += "<tr><th>id</th><th>code</th><th>capital</th><th>region</th><th>name</th></tr>";
                for (i=0; i<data.length; ++i) {
                    html += "<tr><td>";
                    html += data[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
                    html += "</td><td>";
                    html += data[i].getElementsByTagName("code")[0].childNodes[0].nodeValue;
                    html += "</td><td>";
                    html += data[i].getElementsByTagName("capital")[0].childNodes[0].nodeValue;
                    html += "</td><td>";
                    html += data[i].getElementsByTagName("region")[0].childNodes[0].nodeValue;
                    html += "</td><td>";
                    html += data[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
                    html += "</td></tr>";
                }
                html += "</table>"
                showInPanel(html);
            } else if (xmlHttp.readyState == 4 && xmlHttp.status == 404) {
                const status = "404 - Podany plik <b>xml</b> nie został odnaleźiony w podanej lokalizacji";
                showInPanel(status);
            }
        }
 
        const xmlHttp = new XMLHttpRequest();
        xmlHttp.onprogress = onProgress;
        xmlHttp.onerror = onError;
        xmlHttp.onload = onLoad;
        xmlHttp.open("GET", "departments.xml", true);
        xmlHttp.overrideMimeType('text/xml');
        xmlHttp.send(null);

2. Fetch (link pełny opis) - CodePen


...

const id_comment_encode = encodeURIComponent(id_comment);
const comment_encode = encodeURIComponent(comment_html);      
const body = `id_comment=${id_comment_encode}&comment=${comment_encode}`;

fetch("update_user_comment.php", {
    method: "post",
    body: body,
    headers: { 'Content-type': 'application/x-www-form-urlencoded' }
  })
    .then(res => {
    if (res.ok) {
      return res.text();
    } else {
      throw new Error(`${res.status} ${res.statusText}`);
    }
  })
    .then(res => {
    //showMessage(id_comment, MESSAGE.SUCCESS, res);
    showMessage(id_comment, MESSAGE.SUCCESS);
  })
    .catch(error => {
    showMessage(id_comment, MESSAGE.ERROR, error);
  });

...

 

1
komentarz 21 września 2020 przez komar54 Użytkownik (730 p.)
Dzięki za linki, zabieram się za przeglądanie.

Podobne pytania

0 głosów
1 odpowiedź 833 wizyt
pytanie zadane 8 sierpnia 2018 w JavaScript przez Jumpeq Początkujący (270 p.)
0 głosów
1 odpowiedź 88 wizyt
pytanie zadane 1 stycznia 2020 w Inne języki przez Lajoner Początkujący (270 p.)
0 głosów
1 odpowiedź 276 wizyt
pytanie zadane 20 czerwca 2019 w C# przez DobryKurczak Bywalec (2,360 p.)

88,355 zapytań

136,952 odpowiedzi

305,666 komentarzy

58,618 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...