XMLHttpRequest doesn´t work as wished

i have a sensor on raspberry. it read data and save it on a file on our xampp server (should stay xampp, cause we just use it in office). Now i wanna read the data from the file and get it into my app. For first test i just saved a file "hallo.txt in the same directory. I tried on that way:

data.ts:

loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("xPos").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "hallo.txt", true);
    xhttp.send();
  }

and data.html:

<!--Position X now-->
        <div id="xPos" class="lrDataBox lrDataBox-1" style="text-align: right">{{ global.xPos }} m</div>


        <button ion-button (click)="loadDoc()">click</button>

when i click the Button, the {{ global.xPos }} get away and the area is just blank. The same happened, when i deleted the “hallo.txt”. So I think it just don´t read from the file. When i change the “hallo.txt” to the url on my xampp server (“http://190.168.xxx.xxx/test/myfile.txt”) nothing works anymore. Just the global.xPos stays into the area.

How can I make it work?

Why aren’t you just using Angular’s HttpClient here?

1 Like

would be a good idea in javascript, but don´t know how to include it in typescript.The documentation from angular i also don´t really understand.