Урок 14. JavaScript. Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax
ฝัง
- เผยแพร่เมื่อ 8 ก.พ. 2025
- Эксклюзивный контент на моем Boosty: boosty.to/vlad...
Telegram: t.me/js_by_vla...
Instagram: / vladilen.minin
Roadmap по каналу:
vladilen.notio...
Исходный код:
gist.github.co...
Урок 14. JavaScript. Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...
#ajax #javascript #fetch
Результаты конкурса будут завтра :)
Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Только сейчас дошло, как решить задачку.
Вот это мужик, вот как надо рассказывать, я несколько часов слушал разных индусов, но ни один и в подметки не годится. Спасибо тебе, Бро!!!
ну про индусов ты загнул
МУЖЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫК!
индус - это принадлежность к религии
@@user-hz3zd3nz6h я тоже индусов смотрела😅 не поверите, но все получалось только по их урокам, не надо на них гнать
Так он нихрена нормально и не рассказал
Мужик, делай то что ты делаешь. Я чуть с ума не сошел пока искал эту инфу в понятном и доступном виде в сети. Пришлось самому всё понимать кое-как, и то не всё. И тут, хвала алгоритмам ютуба, появился ты.
еще раз спасибо + лайк + подпискам (:
Лучший туториал по этой теме даже спустя 5 лет. Снимаю шляпу!
Хочу отметить разницу между Fetch и XHR: при отправке файлов/больших payload'ов на сервер XHR - позволяет получать прогресс загрузки файла на сервер, в то время как Fetch этой информации не предоставляет
Юзал свой jQuery, до фетча все никак не добирался, и наконец у тебя вышел такой видосик, хоть уже что-то и есть про фетч, но тут более понятней и подробней. Пасеба , сэр!
@Валентин Инкогнито как axios использовать на фронте?
@Валентин Инкогнито так а как его подключить это же npm модуль
@Валентин Инкогнито , стоит отметить, что даты нет у гета) если попробуешь отправить, то ошибку получишь)
Вот это я понимаю качественный контент, разложил по полочкам. Владилен, спасибо)
Реально, практически идеальный урок!
Единственное из-за чего картина не совсем до конца складывается, так это из-за того, что были опущены async/await, а также очень хотелось бы увидеть наглядный пример serialize у ajax, но используя fetch
есть отдельное видео по async await и промисы
По-моему еще ЛУЧШЕ все это рассказать просто не возможно. Большое спасибо за видео! Мне кажется, если вы сейчас начнете выкладывать обучающие видео о том, как правильно строить дома - я подамся в строители, потому что ваши видео смотреть - одно удовольствие ! :D :)))
Хорошо все разобрал, говорим тебе спасибо!
Владилен вы растете на наших глазах))))) в предыдущих уроках у объекта Владилен поле age был ровен 25))))
кстати, привет из 2020
стареет потихоньку
очень толково.
Разложил все по полочкам.
Просто и лаконично.
Для введения самое оно
Владилен, запиши видос про графику на canvas, никогда этим не пользовался и не сталкивался, но очень было бы увидеть и послушать профессионала на эту тему. Ты же вроде разбирался с этим как раз, когда в конкурсе Telegram участвовал, вот было бы очень интересно послушать как ты все писал и как работать с графикой
Спасибо, очень и очень полезно и понятно. Только в названии еще Ajax упоминается, но что-то вроде бы в ролике ни слова не было.
Это ШЕДЕВРАЛЬНО!
спасибо агромное, вот я наконец понял что запросы и как они работают
Владилен, спасибо большое тебе за твой труд! Однозначно ЛАЙК!!!
Просьба, сделай пожалуйста подробный гайд по axios!
Это не единственный канал по программированию, но единственный с автором, который так хорошо объясняет. Спасибо за знания!
Спасибо! Отличные уроки по js. Все ясно понятно. Ну прям огонь🔥
Очень клевое расширение для Гитхаба, спасибо Владилен. Даже пассивно умеешь помогать :)
Спасибо большое за этот видео урок, обыскал весь интернет, но некто так грамотно как вы не смог рассказать а тут всё ясно и понятно , 😎
Супер. Полдня убил на понимание запросов. С jQuery ajax всё получалось, а native js не поддавался.
21:00 Fetch(Get)
25:00 Fetch (POST)
Ты хороший человек. Спасибо.
Огромное спасибо! Продолжай в том же духе! Очень жду роликов по выполнению каких-то проектов на реакте.
Их много на канале
Владилен, спасибо тебе за твои видео. Очень помогают!
Нет ли у тебя в планах записать мастер класс по DevTools бразуера?
У тебя очень много уроков в которых ты объясняешь, как что-то сделать с нуля, с этим все более-менее понятно. Мог бы ты записать какой-нибудь курс, в котором ты бы взял какой-нибудь open-source проект, и показал от и до, как разобраться в новом проекте, с чего начать, как правильно читать код, как структурировать полученную информацию и приступить к допиливанию своего функционала. (Лично меня интересуют проекты на Angular и чистом JS).
Спасибо огромное за ваши уроки! Хоть по темам уже ушли далеко вперед, но было бы неплохо услышать про DOM/BOM с вашими пояснениями. Заранее спасибо
Смотрел кучу видео на эту тему, ваше - лучшее! Огромное спасибо за качественный контент и удачи вашему каналу!
крутая подача! все четко, без H2O
Согласен)
Даже под C2H5OH хорошо заходит)
Поддерживаю, что нужен видеоурок про rest & spread.
Как раз завтра будет)
класс. как раз сейчас работаю с с запросами. прям вовремя
Супер! Надеюсь, это мне поможет всё-таки сделать тестовое задание
Досмотрел плейлист. Спасибо за уроки !
Этот урок классно объяснил🎉
Теперь хоть разобрался зачем был нужен XMLHttpRequest. Спасибо.
Хотелось бы разобрать как правильно проектировать бекенд + фронт. А то столько мнений не знаешь кто прав.
спасибо большое, раньше использовал только axios,ajax(jquery) теперь в курсе про нативные методы
Владилен, хотелось бы узнать полное взаимодействие базы, сервера, и приложения. Давай разберём остальные методы зачем они нужны и когда используются
Урок пройден) Спасибо!!! Очень круто все разобрано, все понятно! Супер!
урок правда полезный, спасибо
Обожаю Ваши видео. Всегда всё четко и по делу. Спасибо большое за труд!
Огромное спасибо! Я тоже пересмотрела на эту тему много видео. Это - лучшее из всех! Удачи!!!
круто, действительно очень познавательно, как только появятся деньги отблагодарю, курс куплю или задоначу, очень понятно, а главное отвечает на все вопросы которые мучали раннеее
Спасибо, классное и подробное объяснение, удивляюсь что подписчиков не раза в 2 - 3 минимум, больше.
Огонь, теперь хватает знаний чтобы полчить данные со своего REST api
Fetch как раз учу сейчас, спасибо за подгон)
лучший канал) спасибо
Отлично! Спасибо. Хорошие уроки. Пришлось про CORS погуглить :)
Я реально испугался, когда ты не поставил точку с запятой, а потом вспомнил - это же js......)
Спасибо огромное разобрали супер. поставил бы два лайка даже. подписался.
на самом деле ты читаешь мои мысли.. хотел попросить урок по fetch и вот спс тебе
Наш инстинкт . Когда хотим создавать объект, моментально в голову приходит "key" name и age .
Смотрю с удовольствием. Спасибо, Владилен!
зачетный ролик! работать с XHR классом как по мне проще для понимания чем с fetch(). классе все явно указывается а в fetch неявные промисы и прочие методы, мне нубу без доков не разобраться.
Благодарю за то что помогаешь обучаться разработке на javascript!
Спасибо, очень полезное видео.
Спасибо, Владилен!
Шикарное объяснение, ты прям прирожденная училка!)
Fetch уже был в Уроке8. Вообще плейлист как-то не структурирован, всё намешано в куче, вроде смотришь с 1 урока, а потом все темы в разнобой
всё круто, лайк подписка! Было бы ещё круче если б делал пометки // хотя б простенькие) спасибо)
Отличный урок, проходит со свистом ))
пару заметок, если кто-то захочет постестироват запросы через свой PHP-сервер (маловероянтно, конечно, что найдутся такие же недалекие люди, как я, но все же ...):
я кучу времени потратил, чтобы угадать, как там должно быть сделано, чтобы все работало ....
итак, в вашем PHP файле:
# заголовки, чтобы сервер вообще смог хоть что-то ответить на запрос
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept"); # чтобы все работало после указания xhr.setRequestHeader('Content-Type', 'application/json');
# распарсивалка данных, передаваемых не строкой, а в виде JSON.stringify({...object...})
$postData = file_get_contents('php://input');
$data = json_decode($postData, true);
# ответ сервера
$users = array(
0 => array(
"id" => 0,
"name" => "Leanne Graham",
"username" => "Bret",
"email" => "Sincere@april.biz",
"phone" => "1-770-736-8031",
"website" => "hildegard.org",
)
);
echo json_encode($users);
Правильное решение это нужно создавать асинхронную функцию и ждать ответа до полного выполнения await и потом уже обрабатывать данные и тогда вам не нужно будет работать с проммисами.
Давайте больше таких видео
Дарова
уроки ТОП! всё чётко и по полочкам.
спасибо!
Очень крутой канал! предлагаю рассказать про Регулярные выражения мне кажется интересная тема.
Спасибо за урок!
спасибо огромное! очень помог!
Спасибо за видео!
Согласен со многими! Владлен давай!
А, если по простому --- Спасибо! Вас, Владлен, мне рекомендовал Димыч). Спасибо обоим!!
Хороший урок. Не хватает только упоминания об async/await и наглядного использования полученной информации из сервера
Про них отдельное видео в плейлисте
С этим сайтом json placeholder понятно, а как быть с локальным своим сайтом? Там что должно быть, в самом простом варианте, файл index.php и в нем что должно быть? Чтобы мы могли получить данные.
И еще, т. к. тут упоминается ajax, то что тут рассматривается, мы получаем данные с сервера, я например хочу сделать, чтобы эти полученные данные отображались на странице сайта, то они будут добавляться Без перезагрузки страницы?
Спасибо большое, Владилен! 😍😍😍
Спасибо, отличный видео-урок, но после того как ты дорабатываешь функцию sendRequest с использованием fetch, для того чтобы она могла принимать метод POST, после данных модификаций, метод GET с этой функцией перестаёт работать и выкидывает ошибку TypeError говорящая о том что у методов GET/HEAD не должно быть параметра body. А в целом сам урок свою цель выполняет, просто функция вроде как делалась для того чтобы работать как с методом GET, так и с методом POST.
Согласен, тоже это заметил
Лайк не глядя!
Согласен, лайк
Можно сделать это всё в пару строк кода. Используя Async, await. Как раз вы уже снимали видео про них.
Есть сссылка ?
Да!! просто нечеловеческое спасибо!!! а скажешь что за шаблон подсветки кода у тебя установлен?
Очень доступно. Но подскажите как использовать полученные данные, где они хранятся и т.п.
Thank u very much, really understandable. U just explained things in so clear way
Лайк однозначно)
в уроке, видимо, ошибка. Если в готовом коде закомментить метод POST и раскомментить GET, то -- Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body . Получается, что в функции sendRequets для GET не может быть body в качестве аргумента, и в промисе тоже. Даже если если он равен нуллу
не-не.... если боди равен нуллу - всё норм, а так - да, ошибочка в коде есть... Просто body надо стрингифаить отдельно и ставить проверку на метод... типа if(method==='POST'){body=JSON.stringify(body)}, а в инициализации вместо body : JSON.stringify(body) поставить body : body, так как по умолчанию body = null , то и всё норм работает
Блин спасибо большущее)))))
Очень круто
Было бы неплохо увидеть курс по axios от тебя, Владилен :)
ТОП урок!!!
нормальным браузером надо пользоваться а не стоковым огрызочным. В мозиле JSON открылся встроенным вьювером (можно даже соврачивать-разворачивать)
Спасибо, здорово
Отличная работа, спасибо за информацию. Но когда я подключил файл JSON с репозитория GITHUB, у меня доступ был заблокирован политикой CORS, сейчас интересуюсь как решить эту задачу.
как успехи?)
Видео помогло, спасибо, + к карме.
11:23 ошибка сработала в 10-й строке при событии onload, а не при событии onerror (строка 14). Почему так?
Когда приходит ответ, не важно с кодом ошибки или нет, это считается нормальным ответом http и срабатывает событие onload. Чтобы получить событие onerror можете попробовать отключить интернет и запустить скрипт, получите ошибку типа "net::ERR_INTERNET_DISCONNECTED" как раз из события onerror.
Спасибо ♥
спасибо
Не совсем понятно, делается функция sendRequest которая, по идее, должна быть универсальной как для POST так и для GET но по факту, в конечном ее варианте она работать для GET не будет, так как для GET нет body. Если это частный случай, тогда не понимаю зачем фунция, все можно сделать просто через fetch
Владилен, спасибо за урок!
Не могли бы подсказать, где проблема в следующей ситуации: POST запрос при загрузке файлов отрабатывается правильно, но если в названии файла есть кириллица, то вместо нее приходит абракадабра. Попробовал и fetch, и XMLHttpRequest. FormData формируется правильно. С postman тестирование проходит без ошибок.
с уважением,
Юрий
спасибо, помог
Спасибо за видео.
Можешь сказать, есть ли случаи, когда fetch нежелательно использовать, а лучше придерживаться отправки/получения данных с помощью чистого (либо с исп-м Промисов) XMLHttpRequest (XHR) + Ajax?
Не то чтобы нежелательно, а не получится применить fetch в том случае, когда нужно отследить "процент" загрузки файла
@@АлексейСедов-й5м то есть с помощью fetch не получится например делать полоски прогресса загрузки и тд?
@@vitaliy794 да. Для таких случаев используют api xmlhttprequest
@@АлексейСедов-й5м А можете пожалуйста подсказать еще. Вот когда получил данные и что бы пройтись по массиву например map это делается внутри then типо такого
sendRequest('GET', url)
.then(data => {return data.map(item => {
arrMass.innerHTML += `
${item.title}
`
})})
или как то по другому можно данные выводить?
видео огонь!
XHR не поддерживает запросы через прокси? Погуглил, вроде нет. Хотя странно, в питоне request session get/post без проблем это делает.
Thank you! Cnocnbo!
Сnacubo! or Spasibo! or Спасибо! or Cnacu6(six)o!
привет, спасибо за урок, лайк автоматом, подписка уже пару месяцев. Но не совсем понял следующее: на 21:44 ты удаляешь код внутри функции sendRequest , конкретно говорю про return new Promise(...) и потом на 22:11 говоришь, что sendRequest возвращает промис, тут я немного запутался. Ты же удалил "return new Promise(...) ", почему он все еще возвращает промис? Прошу простить, если вопрос глупый, только начал изучать JavaScript.
fetch возвращает промис
Владилен, спасибо за видео!!
Но как всегда есть вопрос ведь странные ситуацию случаются, а ты немного говоришь о том как обрабатывать ошибки.
Например, когда сервис упал он вместо ошибки начинает отдавать свою странницу 404, вместо json, но по каким-то истерическим причинам ее статус 200.
Что делать в таких случаях?
Странно, почему-то я всеравно получаю promis вместо json по этому коду
let response = fetch(url)
.then((response) => {
return response.json();
}).catch((e) => console.log(e.message));