Как повторно использовать функцию с объектом xmlhttprequest?

Question

[Vladislav105]

Новичок, не кидайтесь тапками)
Написал вот такую функцию для получения новостей с сайта:

function getNews(fileName, className, key, limit, offset = 0) {
    xhr = new XMLHttpRequest();
    xhr.error = popup('Ошибка при запросе к серверу', 'error.svg');
    xhr.open('POST', 'server/' + fileName);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200)
            document.querySelector(className).insertAdjacentHTML("beforeend", xhr.responseText);
    }
    xhr.send("key=" + key + "&limit=" + limit + "&offset=" + offset + ";");
    console.log(xhr);
}

При втором вызове возникает ошибка, мол ответ содержит null.

Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

Что мне нужно сделать, чтобы при каждом вызове функция отрабатывала успешно?

Comments

[smigles]

Что вы передаёте параметром className?

[Vladislav105]

Класс списка, в который нужно вставить статьи(сервер даёт готовую разметку). При первом запуске функция отрабатывает, ошибка только на второй

[smigles]

Vladislav105, приведённая вами ошибка означает, что document.querySelector(className) равно null, то есть элемент, соответствующий селектору className, на странице не найден. Что конкретно вы передаёте параметром className в функцию во втором случае? Точка перед названием класса имеется (например: document.querySelector('.list'))?

[Vladislav105]

Проверил. Класс действительно написан с ошибкой. Исправил, но xmlhttprequest выводит попап с ошибкой) Ошибок в консоли нет. Ответ от сервера при втором вызове не приходит, параметры запроса верные, статус 200. Прямо загадка

[Vladislav105]

Появилась новая проблема. Ответ приходит в обоих запросах, но он вставляется в дом только во втором случае

getNews('get_article.php', '.news__articles_list-news', 1, 3);
getNews('get_project.php', '.news__articles_list-projects', 2, 3);

[Andrew]

Vladislav105, вот так запустите, будете знать че каво

if (xhr.readyState == 4 && xhr.status == 200) {
  let element = document.querySelector(className);
  if (element) {
    element.insertAdjacentHTML("beforeend", xhr.responseText);
  } else {
    console.warn("ALO GIDE ELEMENT", element);
  }
}

Это внутрь блока с onreadystatechange

Answer 1

[Надим]

Попробуйте так:

async function getNews(fileName, className, key, limit, offset) {
	
	var params = new URLSearchParams();
	
	params.append('key', key);
	params.append('limit', limit);
	params.append('offset', offset);
	
	var body = params.toString();
	
	var news = await (await fetch('server/' + fileName, {
		'method': 'POST',
		'headers': {
			'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
		},
		'body': body
	})).text();
	
	if (document.querySelector(className)) {
		document.querySelector(className).insertAdjacentHTML('beforeEnd', news);
	} else {
		console.log('Элемент соответствующий селектору '+className+' отсутствует на странице!');
	}
	
	console.log("Ответ сервера:\n" + news);
	
}

Comments

[Vladislav105]

Спасибо! Не знал, что существует такой полезный объект для работы с параметрами)