AJAX как с сервера вернуть на запрос HTML-код без JQuery?

Question

[Дмитрий Носиков]

Доброго утра, коллеги! Возник, вроде-бы, простой вопроc, но он поставил меня в ступор. Как правильно на запрос из JS кода сформировать на серверной стороне html и вернуть его обратно в js? Только без JQuery, как это сделать там, я знаю. Хотелось бы понять, как это делается нативно правильно.

Answer 1

[Nik Gubin]

Эту ссылку тут ещё не публиковали: https://blog.garstasio.com/you-dont-need-jquery/ajax/
Что касается html, то его вы формируете на стороне сервера, и к Ajax это никак не относится. Вы что угодно можете сформировать на сервере и отдать в ответ Ajax'у. А уж способов формирования html масса. От сбора тегов в строчку до использования шаблонизаторов, которому вы скормите переменные, а он в свою очередь подставит их в готовый (написанный вами) шаблон.

Comments

[Дмитрий Носиков]

В том то и вопрос))) Я не знаю, может я не правильно его задал. Вопрос в том, как все это дело сформировать ГРАМОТНО на стороне сервера, вернуть в JS и в JS распарсить. Допустим, на стороне сервера вернуть все это через echo? Или нужно заворачивать в JSON и потом парсить на клиенте.

[Nik Gubin]

Дмитрий Носиков: это уже как вам нужно. Если нужно просто html-кусок вставить в определённое место в документе, то можно просто echo вернуть и в JS взять этот кусок кода и вставить через .innerHTML, а если нужно получить два куска html-кода, то уже нужно продумать структуру ответа.

Что лично я думаю. Не стоит таскать туда-сюда html. Лучше вернуть в json коллекцию переменных, а на фронтенде через JS вывести нужный html в нужных местах с подставленными переменными. Если принципиально таскать html, то пробуйте!) Так же посмотрите на frontend шаблонизаторы, типа React.js, может заинтересует вас на перспективу.

[Дмитрий Носиков]

Спасибо большое за ответ))) Все понятно и доступно)

[Nik Gubin]

Дмитрий Носиков: да не за что! Удачи с продвижением в этом вопросе ;-)

[Дмитрий Носиков]

gubin_niko: Спасибо) Вам тоже удачи в профессиональной сфере)

Answer 2

[mletov]

https://www.w3schools.com/xml/ajax_intro.asp

Comments

[Дмитрий Носиков]

Спасибо большое за ответ. Пролистал руководство, но так и не увидел где там есть примеры с формированием html и возвратом его клиенту.

[mletov]

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

Создаете на клиенте div c id="demo"
Вместо ajax_info.txt создаете какой-нибудь ajax_info.php и в нем формируете произвольный html.
Хотя сейчас уже так не принято, обычно гоняют сырые данные в json, а html формируют на клиенте, а не на сервере

Answer 3

[Дима Паутов]

youmightnotneedjquery.com/#request

Comments

[Дмитрий Носиков]

Спасибо за комментарий. Если честно, не вижу, где там конкретно показано, как сформировать HTML код и отправить его обратно JS. Вижу только код клиентской части.