Как обновить блок с помощью ajax?

Question

[omerkhan]

Здравствуйте. Как обновить один блок без перезагрузки всей страницы? Знаю, таких вопросов в интернете много, но у меня не работал код, который я скопировал в интернете. Допустим, у меня есть:

<div id = "block">
...
</div>

Как мне обновлять этот блок, скажем, каждую секунду?

Answer 1

[zkrvndm]

Пример функции для выборочного обновления контента:

async function elementUpdate(selector) {
	try {
		var html = await (await fetch(location.href)).text();
		var newdoc = new DOMParser().parseFromString(html, 'text/html');
		document.querySelector(selector).outerHTML = newdoc.querySelector(selector).outerHTML;
		console.log('Элемент '+selector+' был успешно обновлен');
		return true;
	} catch(err) {
		console.log('При обновлении элемента '+selector+' произошла ошибка:');
		console.dir(err);
		return false;
	}
}

Вызывайте функцию elementUpdate() передав внутрь него CSS-селектор того элемента, который вы хотите обновить. Например, если взять блок, который имеет id равный block, то достаточно выполнить:
elementUpdate('div#block');

Если хотите делать это циклически, каждую секунду, то можно использовать while:

// Запуск асинхронного кода:

(async function() {
	
	// Бесконечный цикл:
	
	while (true) {
		
		await elementUpdate('div#block'); // Обновляем блок
		
		// Выжидаем 1000 миллисекунд, а потом код внутри while выполняется вновь:
		await new Promise(function(success) { setTimeout(success, 1000); });
		
	}

})();

P. S. Но так обычно не делают, но если вам прям сильно надо, можно использовать этот лобовой метод.