Question

Let’s say I have a web page (/index.html) that contains the following

<li>
    <div>item1</div>
    <a href="/details/item1.html">details</a>
</li>

and I would like to have some javascript on /index.html to load that
/details/item1.html page and extract some information from that page.
The page /details/item1.html might contain things like

<div id="some_id">
    <a href="/images/item1_picture.png">picture</a>
    <a href="/images/item1_map.png">map</a>
</div>

My task is to write a greasemonkey script, so changing anything serverside is not an option.

To summarize, javascript is running on /index.html and I would
like to have the javascript code to add some information on /index.html
extracted from both /index.html and /details/item1.html.
My question is how to fetch information from /details/item1.html.

I currently have written code to extract the link (e.g. /details/item1.html)
and pass this on to a method that should extract the wanted information (at first
just .innerHTML from the some_id div is ok, I can process futher later).

The following is my current attempt, but it does not work. Any suggestions?

function get_information(link)
{
    var obj = document.createElement('object');
    obj.data = link;
    document.getElementsByTagName('body')[0].appendChild(obj)
    var some_id = document.getElementById('some_id');
    if (! some_id) {
        alert("some_id == NULL");
        return "";
    }
    return some_id.innerHTML;
}

Answer 1

First:

function get_information(link, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", link, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            callback(xhr.responseText);
        }
    };
    xhr.send(null);
}

then

get_information("/details/item1.html", function(text) {
    var div = document.createElement("div");
    div.innerHTML = text;
    // Do something with the div here, like inserting it into the page
});

I have not tested any of this – off the top of my head. YMMV