Эквивалент $ .load без jQuery

Question

Я хочу загрузить некоторый контент Jade в определенный div при нажатии кнопки. Я нашел, как сделать это с помощью JQuery, есть несколько сообщений о нем, и, по сути, что я хочу сделать, это

$('#div').load('/somePage'); 

Однако, я не могу использовать JQuery в моем проекте. Есть ли эквивалентная функция в javascript ванили?

Answer 1

Я думаю, вы можете сделать это со следующим:

var request = new XMLHttpRequest(); 

request.open('GET', '/somepage', true); 

request.onload = function() { 
    if (request.status >= 200 && request.status < 400) { 
    var resp = request.responseText; 

    document.querySelector('#div').innerHTML = resp; 
    } 
}; 

request.send(); 

Кстати, вы можете сделать это и с помощью API-интерфейса.

fetch('/somepage') 
    .then(function(response) { 
    return response.text(); 
    }) 
    .then(function(body) { 
    document.querySelector('#div').innerHTML = body; 
    }); 

Кстати, вы можете прочитать this blog post для обучения кое-что о выборки API.