AJAX с лучшим повторным использованием?

Question

У меня AJAX разделен на две части. Функция «AJHAX», которая имеет два значения: URL-адрес файла для загрузки и затем функцию, в которой я могу указать, где я хочу, чтобы она заканчивалась («cFuntion» использует функцию «loadToContent»):

Первая часть:

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();
}

Вторая часть:

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

Итак, из первой части я могу вызвать функциональность в моем меню, добавив следующее к ссылке / элементу:

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

Однако при этом я могу только указать, какую страницу загружать, а не какой элемент я хочу загрузить. Я попытался добавить его в качестве критерия для второй части моего кода, как это. Но безрезультатно:

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

OnClick:

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

Есть предложения?

Решение найдено (спасибо @schogges, пожалуйста, проголосуйте!). Полный рабочий пример:

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>

Итак, в HTML вы просто указываете страницу для загрузки, идентификатор элемента для загрузки страницы и затем функцию «loadToContent», которая фактически загружает ее в элемент. Как вы можете видеть, здесь также есть "; closeSidebar ()" , и даже если в этом примере это ничего не даст, я просто оставлю это здесь, чтобы показать кому-то новому, что вы можете сделать это таким образом добавить более одной функции к событию onclick. Моя просто редактирует CSS, чтобы скрыть боковую панель.

Answer 1

Строка onclick="AJHAX('menu.php', loadToContent(sidebar))" не работает, потому что она ссылается на инертную строку.

Вместо этого вам нужно сослаться на функцию, чтобы она фактически выполняла намеченную задачу: onclick = function () { AJHAX('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', 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) {
    console.log(xhttp.responseText);
    alert(xhttp.responseText);
}
//TEST
var button = document.body.appendChild(document.createElement("h1"));
button.textContent = "Click me!";
button.onclick = function () {
    AJHAX('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', loadToContent);
};

Answer 2

Как насчет использования третьего параметра в AJHAX()?

Попробуйте это:

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;
}

и Onclick:

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