@SergeiB

Javascript-эквивалент JQuery-метода .load()?

У JQuery есть замечательный метод load:
$("#container").load("test.svg");

Эквивалент на js:
function loadFile(url, id) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.send();

  request.onreadystatechange = function() {
    if (this.readyState != 4) return;
  
    if (this.status != 200) {
      console.log('Ошибка: ' + (this.status ? this.statusText : 'запрос не удался'));
      return;
    }

    document.getElementById(id).innerHTML = this.responseXML;
  }
}

loadFile("test.svg", "container");


Но как на js будет выглядеть метод load, у которого есть callback?
$("#container").load( "test.svg", function() {
  console.log( "This is callback function" );
});
  • Вопрос задан
  • 169 просмотров
Решения вопроса 2
kn1ght_t
@kn1ght_t
function loadFile(url, id, callback) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.send();

  request.onreadystatechange = function() {
    if (this.readyState != 4) return;
  
    if (this.status != 200) {
      console.log('Ошибка: ' + (this.status ? this.statusText : 'запрос не удался'));
      return;
    }

    document.getElementById(id).innerHTML = this.responseXML;

    callback();
  }
}

?
Ответ написан
Комментировать
function loadFile(url, id, callback) {
    // Код запроса

    request.onload = (event) => {
        callback()
    }
}


Вообще, то что вы написали можно сделать короче, например так (но смотрите сюда)

Jsfiddle
function load(src, selector, callback) {
    fetch(src)
        .then(response => response.text())
        .then(svg => {
            let elements = Array.from(document.querySelectorAll(selector))
            elements.map(n => n.innerHTML = svg)
      
            callback()
        });
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега JavaScript
loadFile(url, id, callback)
...
document.getElementById(id).innerHTML = this.responseXML;
callback("parampam");
...

loadFile(url, id, function(param) {
  alert(param);
})
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы