具有更好的可重用性的AJAX？

Question

I have my AJAX split in two parts. The "AJHAX" function which has two values, the url of the file to load and then the function where I can specify where I want it to end up ("cFuntion" uses the function "loadToContent"):

First part:

function AJHAX(url, cFunction) {
    var xhttp;
    // compatible with IE7+, Firefox, Chrome, Opera, Safari
    xhttp=new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            cFunction(this);
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

Second part:

function loadToContent(xhttp) {
        document.getElementById('content').innerHTML =
            xhttp.responseText;
}

So from the first part, I can call the functionality in my menu by adding the following to a link / an element:

onclick="AJHAX('page.php', loadToContent)"

However, with this I can only specify which page to load, not which element I want it loaded to. I tried to add it as a criteria for the second part of my code, like this. But to no avail:

function loadToContent(xhttp, targetElement) {
        document.getElementById(targetElement).innerHTML =
            xhttp.responseText;
}

Onclick:

onclick="AJHAX('menu.php', loadToContent(sidebar))"

Any suggestions?

Solution has been found (thanks to @schogges, please upvote!). Complete working example:

JS:

function AJHAX(url, targetElement, cFunction) {
    var xhttp;
    // compatible with IE7+, Firefox, Chrome, Opera, Safari
    xhttp=new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            cFunction(this, targetElement);
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

function loadToContent(xhttp, targetElement) {
        document.getElementById(targetElement).innerHTML =
            xhttp.responseText;
}

HTML:

<div onclick="AJHAX('home.php', 'content', loadToContent);closeSidebar()">
Home</div>

So in the HTML, you just specify the page to load, the ID of the element to load the page into and then the "loadToContent" function that actually loads it into to element. As you can see, also have ";closeSidebar()" in there, and even if it does nothing for this example, I'll just leave it here to show anyone new that you can do it this way to add more than one function to an onclick-event. Mine simply just edits some CSS to hide the sidebar.

Answer 1

What about using a third parameter at AJHAX()?

Try this:

function AJHAX(url, target, cFunction) {
  var xhttp;
  // compatible with IE7+, Firefox, Chrome, Opera, Safari
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          cFunction(this, target);
      }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function loadToContent(xhttp, targetElement) {
    document.getElementById(targetElement).innerHTML =
        xhttp.responseText;
}

and Onclick:

onclick="AJHAX('menu.php', 'sidebar', loadToContent)"