Getting text with AJAX

[bit-n...@hotmail.com]

...OK, so assume there's some text on the screen, like a headline, or topic, say. When it's clicked, the actual text has to be got (from the server), and shown.
What would the coding look like?
(assume the text itself is on a MySQL db on the server, with some kind of "id" to it, which will be fetched by a PHP script - ie. www.site.com/gettext.php?articleid=210).

[Luuk]

this seems to be a PHP question, so it would be better to ask in a
newsgroup about PHP

[Ben Bacarisse]

One possible outline:

1. The document could associate the ID with the headline using a data-*
attribute:

<h1 data-article-id=210>Usenet not dead despite rumours</h1>

2. An click event handler is then associated with every headline. I
usually do this on load:

window.addEventListener('load', function () {
var headlines = document.querySelectorAll('h1[data-article-id]');
for (var i = 0; i < headlines.length; i++)
headlines[i].addEventListener('click', ...);
}, false);

3. That event handler constructs the required URL either by extracting
the ID from the event object (say via the target attribute).

4. It then creates an XMLHTTPRequest for that resource whose 'load'
handler will do whatever you want with the result.

It's all a bit vague because there are so many ways to handle the
details and very little in your question to guide an answer.

--
Ben.

[JJ]

On Sat, 1 Jul 2017 02:49:24 -0700 (PDT), bit-n...@hotmail.com wrote:
> ....OK, so assume there's some text on the screen, like a headline, or topic, say. When it's clicked, the actual text has to be got (from the server), and shown.

> What would the coding look like?
> (assume the text itself is on a MySQL db on the server, with some kind of "id" to it, which will be fetched by a PHP script - ie. www.site.com/gettext.php?articleid=210).

Use XMLHttpRequest. e.g. for that example URL...

function fetchArticle(articleID) {
var xhr = new XMLHttpRequest();
xhr.addEventListener("error", function() {
console.log("fetchArticle() failed with HTTP code " + xhr.status + ". " + xhr.statusText);
});
xhr.addEventListener("load", function() {
var eleArticleContainer = document.getElementById("articleContainer");
eleArticleContainer.textContent = xhr.responseText;
/*
Use below code if the article text is HTML formatted.
eleArticleContainer.innerHTML = xhr.responseText;
*/
});
xhr.open("GET", "https://www.site.com/gettext.php?articleid=" + articleID);
xhr.send();
}
//usage e.g.
fetchArticle(250);

[JR]

The client side code for the click event handler might be something like
this:

var div = document.getElementById('div_id');

var xhr = new XMLHttpRequest();

xhr.open('GET', 'gettext.php?articleid=210');
xhr.onload = function () { // Request has successfully completed.
if (xhr.status === 200) {
div.innerHTML = xhr.responseText;
}
};
xhr.send();

--
Joao Rodrigues