Fill the Popup with content from xhttp request (Ajax)?

[makrolika]

I search for a solution to fill the Popup with content from a ajax request, without JQuery. The problem is, in this moment i must send all the content for all the popups by the first call of the website. That is too much data. I will fill the Popup on the click event with data from the server. The content for the Popup come from a xhttp request. Thats not so easy, because a xhttp request don't return a value.

A little bit of my code:
myscript.js

var feature = new ol.Feature({
    type: 'click',
    desc: descriptionstring,
    geometry: new ol.geom.Point(ol.proj.fromLonLat(coordarray_coordinate))
});
feature.setStyle(stylecircle);
sourceVector.addFeature(feature);
}

ol-popup.js (old)

ol.Overlay.Popup.prototype.show = function(coord, html) {
    this.setPosition(coord);
// is here the right place for a xhttp request?
// var xmlhttp = new XMLHttpRequest();
// xmlhttp.onreadystatechange = function() {
// if (this.readyState == 4 && this.status == 200) {
// html = this.responseText;
    this.content.innerHTML = html;
//  }
//  };
// xmlhttp.open("GET", "gethint.php?q=" + str, true);
// xmlhttp.send();
// ------------------------------------------
    this.container.style.display = 'block';

    var content = this.content;
    window.setTimeout(function(){
        content.scrollTop = 0;
    }, 100);
    
    if (this.panMapIfOutOfView) {
        this.panIntoView_(coord);
    }
    return this;
};

Or why in the new ol-popup.js code?

[makrolika]

Aaaahhh, thats the trick: not in ol-popup.js, but in myscript.js:

...
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
	if (xhttp.readyState == 4 && xhttp.status == 200) {
		
		var content = xhttp.responseText;
		
		popup.show(coord, content);
	}
};
xhttp.open("POST", "popupcontent.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("query=" + f.get('desc'));
...

And before i fill the 'desc' object key with the query-value here:

var descriptionstring = "queryvalue";

var feature = new ol.Feature({
    type: 'click',
    desc: descriptionstring,
    geometry: new ol.geom.Point(ol.proj.fromLonLat(coordarray_coordinate))
});

It is correct or can it make better?

[Matt Walker]

Looks pretty good to me, I wonder if it's worth adding an example of using xhr or fetch.