Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Help with HTTP request 'Get'

Posted by: xtech007 Oct 23 2020, 10:59 PM

Hi All!
Thank you in advance for your valuable time.
This is my first Post but I have been reading lots for a while here.
I'm self taught, and thanks to forums and folks like you guys I have reached this far!

So, here is my issue:
I have a webpage with 2 html files. Page 1 and Page 2. Both request specific data from a device (Nodemcu) via serial.
When load page 1 will request data from a device and when received it will display it.
expected data is : 7d 03 18 07 05 00 00 00 00 00 00 96 00 00 00 39 00 00 00 8a 00 00 00 64 00 00 56 07.
and it works fine!
when I click on Page 2 it does the same and display its data as well correctly.
but when I click on page 1 again it will display the data Correctly once and then after its position changes to something like:
56 07 7d 03 18 07 05 00 00 00 00 00 00 96 00 00 00 39 00 00 00 8a 00 00 00 64 00 00.

This Only happens to page 1. I have tried to see if this happens to page 2 by doing the reverse but No, data always lines up.

I have attached html files & css files for review.
This is what I used on the request part:

CODE

setInterval(function() {
    Getstring();
  }, 3000);

  function Getstring(){
    var xhttp = new XMLHttpRequest();
    var page1;
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        page1 = String(this.responseText);
        document.getElementById("SENSORValue").innerHTML = page1;
      }
    };
    xhttp.open("GET", "/getDATA1", true);
    xhttp.send();
  }

when the device gets the getData1 it sends the requested Data.
Same with page 2:

CODE

setInterval(function() {
    Getstring();
  }, 3000);

function Getstring(){
  var xhttp = new XMLHttpRequest();
  var page2;
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      page2 = String(this.responseText);
      document.getElementById("SENSORValue").innerHTML = page2;
    }
  };
  xhttp.open("GET", "/getDATA2", true);
  xhttp.send();

Hope to hear your opinion!

Attached File(s)

data.zip ( 2.38k ) Number of downloads: 114

Posted by: xtech007 Oct 23 2020, 11:11 PM

And here is the Video!
https://youtu.be/16lJtpXxmeQ

Posted by: Christian J Oct 25 2020, 03:40 PM

Hi!

QUOTE(xtech007 @ Oct 24 2020, 04:59 AM)

I have a webpage with 2 html files. Page 1 and Page 2. Both request specific data from a device (Nodemcu) via serial.

What is the Nodemcu device doing with the GET request? I suppose it runs some kind of script to differentiate between "/getDATA1" and "/getDATA2"?

QUOTE

This Only happens to page 1. I have tried to see if this happens to page 2 by doing the reverse but No, data always lines up.

I don't know Ajax that well, but I see nothing different between the two scripts that could explain this. So my guess is it has something to do with the Nodemcu device.

What about page3.html? It appears to send a "/getADC" request. BTW, on page3.html the "disabled" CLASS seems to be in the wrong link:

CODE

also there's no CSS rule using that CLASS name (in any case, if you want to disable a link you should remove its HREF attribute).

Posted by: xtech007 Oct 25 2020, 10:54 PM

Thank you for your interest!
The GETdata1 &2 actually activates a Functions that it request data from a sensor via serial , waits for response, gets the response converts it to a string and sends it to the server as page1 & page2.

After few test, it seems that the size difference of the string from page1 to page2 is the issue.
Browser is not adjusting and chopping the data it receives.
Exp: let’s say page1 at load receive a string with 80 index.
As long as we don’t go to any other page is fine.
But if we go to page2 onload it receives 120 index.
When we click on page1 again it loads the first 80 from the120, second read it add the last 40 and so forth till data miss align completely.

Posted by: Christian J Oct 26 2020, 09:14 AM

QUOTE(xtech007 @ Oct 26 2020, 04:54 AM)

After few test, it seems that the size difference of the string from page1 to page2 is the issue.
Browser is not adjusting and chopping the data it receives.
Exp: let’s say page1 at load receive a string with 80 index.
As long as we don’t go to any other page is fine.
But if we go to page2 onload it receives 120 index.
When we click on page1 again it loads the first 80 from the120, second read it add the last 40 and so forth till data miss align completely.

In my feeble understanding that shouldn't be possible (even if page1 was cached), after all it's two different HTML documents. Have you tested with different browsers? You could also try making the setInterval reload the GET request as the SRC of an IFRAME, instead of using Ajax.

Another potential problem is the 3 second delay in setInterval, maybe that causes conflicts if there's a delay somewhere else (on the the Nodemcu device, the Internet or even the browser). Perhaps https://en.wikipedia.org/wiki/Push_technology is more reliable, but I haven't tried.

Posted by: xtech007 Oct 26 2020, 12:02 PM

Well, I have tested different Browser and same results!
But, I re-tested with same amount of data string (120 index) on both page1 & 2 it works !!!!

It does add unnecessary data to the original 80.
But it keeps the data aligned.