Урок 14. JavaScript. Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax

  Переглядів 316,944

Владилен Минин

Владилен Минин

4 роки тому

Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Telegram: t.me/js_by_vladilen
Instagram: / vladilen.minin
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
Исходный код:
gist.github.com/vladilenm/557...
Урок 14. JavaScript. Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...
#ajax #javascript #fetch

КОМЕНТАРІ: 291
@VladilenMinin
@VladilenMinin 4 роки тому
Результаты конкурса будут завтра :) Эксклюзивный контент на моем Boosty: boosty.to/vladilen
@nilsen1879
@nilsen1879 4 роки тому
Только сейчас дошло, как решить задачку.
@Selieznov
@Selieznov 3 роки тому
Вот это мужик, вот как надо рассказывать, я несколько часов слушал разных индусов, но ни один и в подметки не годится. Спасибо тебе, Бро!!!
@user-hz3zd3nz6h
@user-hz3zd3nz6h 3 роки тому
ну про индусов ты загнул
@yaroslavzef7267
@yaroslavzef7267 3 роки тому
МУЖЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫК!
@artemijeka
@artemijeka 2 роки тому
индус - это принадлежность к религии
@user-gy6wd8jj2j
@user-gy6wd8jj2j 2 роки тому
@@user-hz3zd3nz6h я тоже индусов смотрела😅 не поверите, но все получалось только по их урокам, не надо на них гнать
@user-uz4yu6qk1r
@user-uz4yu6qk1r 11 місяців тому
Так он нихрена нормально и не рассказал
@Blue-oy7tz
@Blue-oy7tz 4 роки тому
Мужик, делай то что ты делаешь. Я чуть с ума не сошел пока искал эту инфу в понятном и доступном виде в сети. Пришлось самому всё понимать кое-как, и то не всё. И тут, хвала алгоритмам ютуба, появился ты. еще раз спасибо + лайк + подпискам (:
@zmeygorynych5684
@zmeygorynych5684 3 роки тому
Вот это я понимаю качественный контент, разложил по полочкам. Владилен, спасибо)
@ivankalashnikov7700
@ivankalashnikov7700 2 роки тому
Смотрел кучу видео на эту тему, ваше - лучшее! Огромное спасибо за качественный контент и удачи вашему каналу!
@vladislavozinkovskyi8276
@vladislavozinkovskyi8276 3 роки тому
очень толково. Разложил все по полочкам. Просто и лаконично. Для введения самое оно
@SWIBORG-X
@SWIBORG-X 10 місяців тому
Это не единственный канал по программированию, но единственный с автором, который так хорошо объясняет. Спасибо за знания!
@evgeniiak7458
@evgeniiak7458 Рік тому
Обожаю Ваши видео. Всегда всё четко и по делу. Спасибо большое за труд!
@pavelalekseev5849
@pavelalekseev5849 4 роки тому
Очень клевое расширение для Гитхаба, спасибо Владилен. Даже пассивно умеешь помогать :)
@user-QesOrwuMqN
@user-QesOrwuMqN 3 роки тому
Хочу отметить разницу между Fetch и XHR: при отправке файлов/больших payload'ов на сервер XHR - позволяет получать прогресс загрузки файла на сервер, в то время как Fetch этой информации не предоставляет
@vallery1395
@vallery1395 Рік тому
Огромное спасибо! Я тоже пересмотрела на эту тему много видео. Это - лучшее из всех! Удачи!!!
@evgeny9242
@evgeny9242 4 роки тому
круто, действительно очень познавательно, как только появятся деньги отблагодарю, курс куплю или задоначу, очень понятно, а главное отвечает на все вопросы которые мучали раннеее
@vitalijslavrinovics8756
@vitalijslavrinovics8756 3 роки тому
Благодарю за то что помогаешь обучаться разработке на javascript!
@user-hd9oq3td7z
@user-hd9oq3td7z 2 місяці тому
Спасибо большое за этот видео урок, обыскал весь интернет, но некто так грамотно как вы не смог рассказать а тут всё ясно и понятно , 😎
@skrillex8334
@skrillex8334 3 роки тому
Огромное спасибо! Продолжай в том же духе! Очень жду роликов по выполнению каких-то проектов на реакте.
@VladilenMinin
@VladilenMinin 3 роки тому
Их много на канале
@ups7write
@ups7write 4 роки тому
Отлично! Спасибо. Хорошие уроки. Пришлось про CORS погуглить :)
@user-fx8rm4kw2y
@user-fx8rm4kw2y 4 роки тому
класс. как раз сейчас работаю с с запросами. прям вовремя
@strikerorion5290
@strikerorion5290 2 роки тому
Спасибо, классное и подробное объяснение, удивляюсь что подписчиков не раза в 2 - 3 минимум, больше.
@user-pg2tc5im5u
@user-pg2tc5im5u 4 роки тому
спасибо большое, раньше использовал только axios,ajax(jquery) теперь в курсе про нативные методы
@denzelwash33
@denzelwash33 3 роки тому
Шикарное объяснение, ты прям прирожденная училка!)
@irinabaranova9236
@irinabaranova9236 10 місяців тому
Спасибо большое, Владилен! 😍😍😍
@gevorgmartirosyan2142
@gevorgmartirosyan2142 3 роки тому
спасибо агромное, вот я наконец понял что запросы и как они работают
@user-up1xl1ef5e
@user-up1xl1ef5e 2 роки тому
Это ШЕДЕВРАЛЬНО!
@smartbrain4623
@smartbrain4623 4 роки тому
Спасибо! Отличные уроки по js. Все ясно понятно. Ну прям огонь🔥
@dmitryivanov3200
@dmitryivanov3200 4 роки тому
Спасибо, Владилен!
@Max-kr4ie
@Max-kr4ie 4 роки тому
Хорошо все разобрал, говорим тебе спасибо!
@uaplatformacomua
@uaplatformacomua 3 роки тому
Супер! Надеюсь, это мне поможет всё-таки сделать тестовое задание
@name-yy9yu
@name-yy9yu 4 роки тому
лучший канал) спасибо
@user-uo7iv6bw5l
@user-uo7iv6bw5l 4 роки тому
Спасибо огромное разобрали супер. поставил бы два лайка даже. подписался.
@weekendshow7567
@weekendshow7567 Місяць тому
Этот урок классно объяснил🎉
@user-ie2gm8bp5v
@user-ie2gm8bp5v 4 роки тому
Владилен, запиши видос про графику на canvas, никогда этим не пользовался и не сталкивался, но очень было бы увидеть и послушать профессионала на эту тему. Ты же вроде разбирался с этим как раз, когда в конкурсе Telegram участвовал, вот было бы очень интересно послушать как ты все писал и как работать с графикой
@alifox6056
@alifox6056 4 роки тому
Досмотрел плейлист. Спасибо за уроки !
@MrReflection540
@MrReflection540 4 роки тому
Реально, практически идеальный урок! Единственное из-за чего картина не совсем до конца складывается, так это из-за того, что были опущены async/await, а также очень хотелось бы увидеть наглядный пример serialize у ajax, но используя fetch
@user-no6il5pi8n
@user-no6il5pi8n 2 місяці тому
есть отдельное видео по async await и промисы
@sevenpages7068
@sevenpages7068 4 роки тому
Владилен, спасибо тебе за твои видео. Очень помогают! Нет ли у тебя в планах записать мастер класс по DevTools бразуера? У тебя очень много уроков в которых ты объясняешь, как что-то сделать с нуля, с этим все более-менее понятно. Мог бы ты записать какой-нибудь курс, в котором ты бы взял какой-нибудь open-source проект, и показал от и до, как разобраться в новом проекте, с чего начать, как правильно читать код, как структурировать полученную информацию и приступить к допиливанию своего функционала. (Лично меня интересуют проекты на Angular и чистом JS).
@user-nz5ln7bj5c
@user-nz5ln7bj5c 4 роки тому
Спасибо за урок!
@user-cy2td3lg8t
@user-cy2td3lg8t Рік тому
Большое спасибо за видео!
@user-vc5xs1no7m
@user-vc5xs1no7m 4 роки тому
Владилен, спасибо большое тебе за твой труд! Однозначно ЛАЙК!!! Просьба, сделай пожалуйста подробный гайд по axios!
@EvgenichTalagaev
@EvgenichTalagaev 2 роки тому
Спасибо за видео!
@user-nb1is5wc4k
@user-nb1is5wc4k Рік тому
Спасибо, очень полезное видео.
@alex_k21
@alex_k21 4 роки тому
уроки ТОП! всё чётко и по полочкам. спасибо!
@user-gu5ir3zs4v
@user-gu5ir3zs4v 4 роки тому
Юзал свой jQuery, до фетча все никак не добирался, и наконец у тебя вышел такой видосик, хоть уже что-то и есть про фетч, но тут более понятней и подробней. Пасеба , сэр!
@astrotrain
@astrotrain 4 роки тому
Я бы всё же советовал пользовать axios, если хоть какая-то совместимость в проекте нужна, он такой же удобный, но использует xhr.
@user-gu5ir3zs4v
@user-gu5ir3zs4v 4 роки тому
@@astrotrain как axios использовать на фронте?
@astrotrain
@astrotrain 4 роки тому
@@user-gu5ir3zs4v в смысле как? axios({ url, method, data }).then(({data}) => { console.log(data); })
@user-gu5ir3zs4v
@user-gu5ir3zs4v 4 роки тому
@@astrotrain так а как его подключить это же npm модуль
@astrotrain
@astrotrain 4 роки тому
@@user-gu5ir3zs4v если есть вебпак просто импортом, если нет - то как жуквери github.com/axios/axios#installing
@unknown.6914
@unknown.6914 5 місяців тому
урок правда полезный, спасибо
@user-qc2uk8iy6d
@user-qc2uk8iy6d 4 роки тому
Спасибо огромное за ваши уроки! Хоть по темам уже ушли далеко вперед, но было бы неплохо услышать про DOM/BOM с вашими пояснениями. Заранее спасибо
@horizon3208
@horizon3208 9 місяців тому
спасибо огромное! очень помог!
@AsVit
@AsVit 4 роки тому
Урок пройден) Спасибо!!! Очень круто все разобрано, все понятно! Супер!
@buksirchik1663
@buksirchik1663 4 роки тому
Fetch как раз учу сейчас, спасибо за подгон)
@cheesecheesson9842
@cheesecheesson9842 3 роки тому
Смотрю с удовольствием. Спасибо, Владилен!
@bolatzhanulys
@bolatzhanulys 4 роки тому
ТОП урок!!!
@yatut4467
@yatut4467 2 роки тому
Спасибо, очень и очень полезно и понятно. Только в названии еще Ajax упоминается, но что-то вроде бы в ролике ни слова не было.
@Peter-vz4tb
@Peter-vz4tb 4 роки тому
Теперь хоть разобрался зачем был нужен XMLHttpRequest. Спасибо. Хотелось бы разобрать как правильно проектировать бекенд + фронт. А то столько мнений не знаешь кто прав.
@kotovadana
@kotovadana 4 роки тому
По-моему еще ЛУЧШЕ все это рассказать просто не возможно. Большое спасибо за видео! Мне кажется, если вы сейчас начнете выкладывать обучающие видео о том, как правильно строить дома - я подамся в строители, потому что ваши видео смотреть - одно удовольствие ! :D :)))
@user-gu2lf6tr8m
@user-gu2lf6tr8m 2 роки тому
крутая подача! все четко, без H2O
@oz9608
@oz9608 2 роки тому
Согласен)
@oz9608
@oz9608 2 роки тому
Даже под C2H5OH хорошо заходит)
@kirillbaryba746
@kirillbaryba746 4 роки тому
Спасибо, здорово
@NeedForHeavyMetal
@NeedForHeavyMetal 2 роки тому
всё круто, лайк подписка! Было бы ещё круче если б делал пометки // хотя б простенькие) спасибо)
@leokorsunsky2395
@leokorsunsky2395 3 роки тому
Лайк однозначно)
@user-nk6qo9in4l
@user-nk6qo9in4l Рік тому
Большое спасибо
@kvaqich
@kvaqich 3 роки тому
Супер. Полдня убил на понимание запросов. С jQuery ajax всё получалось, а native js не поддавался.
@svetlana9436
@svetlana9436 4 роки тому
Спасибо ♥
@andriyvorona7687
@andriyvorona7687 4 роки тому
Давайте больше таких видео
@MikeMentzer09
@MikeMentzer09 8 місяців тому
Дарова
@bloodraven9622
@bloodraven9622 4 роки тому
спасибо, помог
@brawlstarsgamer5496
@brawlstarsgamer5496 Рік тому
Благодарю!!
@olenahrishyna3212
@olenahrishyna3212 4 роки тому
Спасибо!
@ilnurryazhapov9377
@ilnurryazhapov9377 4 роки тому
Лайк не глядя!
@mihaylov13
@mihaylov13 4 роки тому
Согласен, лайк
@artemzhuravlenko9955
@artemzhuravlenko9955 4 роки тому
Очень круто
@de17eon50
@de17eon50 4 роки тому
Огонь, теперь хватает знаний чтобы полчить данные со своего REST api
@user-vx6mp6di4o
@user-vx6mp6di4o 4 роки тому
Очень крутой канал! предлагаю рассказать про Регулярные выражения мне кажется интересная тема.
@user-ql4xu5qu2u
@user-ql4xu5qu2u 4 роки тому
Поддерживаю, что нужен видеоурок про rest & spread.
@VladilenMinin
@VladilenMinin 4 роки тому
Как раз завтра будет)
@HovoK
@HovoK 4 роки тому
Владилен вы растете на наших глазах))))) в предыдущих уроках у объекта Владилен поле age был ровен 25))))
@HovoK
@HovoK 4 роки тому
кстати, привет из 2020
@user-qs8vf5dm3c
@user-qs8vf5dm3c 3 роки тому
стареет потихоньку
@todrgor
@todrgor 2 роки тому
Блин спасибо большущее)))))
@GGSoft2009
@GGSoft2009 4 роки тому
Спасибо!!!
@nikolai4100
@nikolai4100 3 роки тому
СПАСИБО!
@MrGerka0291
@MrGerka0291 7 місяців тому
Да!! просто нечеловеческое спасибо!!! а скажешь что за шаблон подсветки кода у тебя установлен?
@user-gs7hj1om5r
@user-gs7hj1om5r 4 роки тому
на самом деле ты читаешь мои мысли.. хотел попросить урок по fetch и вот спс тебе
@QmanKUCHER
@QmanKUCHER 3 роки тому
Владилен, спасибо за видео!! Но как всегда есть вопрос ведь странные ситуацию случаются, а ты немного говоришь о том как обрабатывать ошибки. Например, когда сервис упал он вместо ошибки начинает отдавать свою странницу 404, вместо json, но по каким-то истерическим причинам ее статус 200. Что делать в таких случаях?
@user-pe8el6tb7n
@user-pe8el6tb7n 3 роки тому
СПАСИБО!!!
@AntonioBenderas
@AntonioBenderas Рік тому
Fetch уже был в Уроке8. Вообще плейлист как-то не структурирован, всё намешано в куче, вроде смотришь с 1 урока, а потом все темы в разнобой
@maksymvintskovskyi6475
@maksymvintskovskyi6475 4 роки тому
Очень доступно. Но подскажите как использовать полученные данные, где они хранятся и т.п.
@returnobject
@returnobject 3 роки тому
зачетный ролик! работать с XHR классом как по мне проще для понимания чем с fetch(). классе все явно указывается а в fetch неявные промисы и прочие методы, мне нубу без доков не разобраться.
@user-ef2pn4zc8f
@user-ef2pn4zc8f 2 роки тому
спасибо
@user-bx7ly2th3b
@user-bx7ly2th3b 4 роки тому
пару заметок, если кто-то захочет постестироват запросы через свой 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);
@const1525
@const1525 4 роки тому
Отличный урок, проходит со свистом ))
@IhorVyshniakov
@IhorVyshniakov 3 роки тому
Спасибо за полезный урок! Подскажите, пожалуйста, почему после команд до .onload не ставятся в конце ";"? Нужно ли ставить точку с запятой(если да, то всегда ли) или нет и почему?
@IhorVyshniakov
@IhorVyshniakov 2 роки тому
@@user-lm8py5rb4m тоже вижу, но мне интересно почему
@mk3mk3mk
@mk3mk3mk 3 роки тому
С этим сайтом json placeholder понятно, а как быть с локальным своим сайтом? Там что должно быть, в самом простом варианте, файл index.php и в нем что должно быть? Чтобы мы могли получить данные. И еще, т. к. тут упоминается ajax, то что тут рассматривается, мы получаем данные с сервера, я например хочу сделать, чтобы эти полученные данные отображались на странице сайта, то они будут добавляться Без перезагрузки страницы?
@tinaanit2965
@tinaanit2965 3 роки тому
21:00 Fetch(Get) 25:00 Fetch (POST)
@user-ck9ru7oc1h
@user-ck9ru7oc1h 2 роки тому
Ты хороший человек. Спасибо.
@yerorey1771
@yerorey1771 4 роки тому
Thank you! Cnocnbo!
@smolindesign
@smolindesign 4 роки тому
Сnacubo! or Spasibo! or Спасибо! or Cnacu6(six)o!
@vyacheslav7838
@vyacheslav7838 3 роки тому
Я реально испугался, когда ты не поставил точку с запятой, а потом вспомнил - это же js......)
@user-ri7zc8zs2b
@user-ri7zc8zs2b Рік тому
Владилен, спасибо за урок! Не могли бы подсказать, где проблема в следующей ситуации: POST запрос при загрузке файлов отрабатывается правильно, но если в названии файла есть кириллица, то вместо нее приходит абракадабра. Попробовал и fetch, и XMLHttpRequest. FormData формируется правильно. С postman тестирование проходит без ошибок. с уважением, Юрий
@-wildberries9607
@-wildberries9607 3 роки тому
лучший
@sergeyorlov6190
@sergeyorlov6190 4 роки тому
Владилен, хотелось бы узнать полное взаимодействие базы, сервера, и приложения. Давай разберём остальные методы зачем они нужны и когда используются
@astrotrain
@astrotrain 4 роки тому
Присоединяюсь, на практике только гет и пост юзал.
@umpair
@umpair 4 роки тому
Привет. А будет материал про ООП?
@seriousman109
@seriousman109 3 роки тому
Видео помогло, спасибо, + к карме.
@astrotrain
@astrotrain 4 роки тому
Спасибо, чистым xhr сам никогда не пользовался, но всё же было интересно как можно было бы воспользоваться, брался изучать, а там понапишут кучу строк, ничего не понятно что для чего, хоть в 2019 прояснилось. ((: Присоединяюсь к просьбе рассказать про axios, но желательно что-нибудь посложнее, чтобы урок не дублировал этот. Например то, что параметры для гет и пост там отправляются в разных объектах, get в params, а post в data, как можно сделать универсальный обработчик типа жукверевского $.ajax, чтобы можно было не заморачиваться этим а просто указывать данные и метод, а он сам разбирался что с этим делать. Ещё некоторые сервера не принимают данные пост в виде json, поэтому его нужно прогонять через new FormData(), но этого мало, нужно менять ещё и Content-Type. Ну и то что у axios есть axios.all для нескольких запросов за раз... ((:
@user-ll8zx2je6i
@user-ll8zx2je6i 4 роки тому
Спасибо за видео. Можешь сказать, есть ли случаи, когда fetch нежелательно использовать, а лучше придерживаться отправки/получения данных с помощью чистого (либо с исп-м Промисов) XMLHttpRequest (XHR) + Ajax?
@user-oy7rm2kz4z
@user-oy7rm2kz4z 4 роки тому
Не то чтобы нежелательно, а не получится применить fetch в том случае, когда нужно отследить "процент" загрузки файла
@vitaliy794
@vitaliy794 3 роки тому
@@user-oy7rm2kz4z то есть с помощью fetch не получится например делать полоски прогресса загрузки и тд?
@user-oy7rm2kz4z
@user-oy7rm2kz4z 3 роки тому
@@vitaliy794 да. Для таких случаев используют api xmlhttprequest
@vitaliy794
@vitaliy794 3 роки тому
@@user-oy7rm2kz4z А можете пожалуйста подсказать еще. Вот когда получил данные и что бы пройтись по массиву например map это делается внутри then типо такого sendRequest('GET', url) .then(data => {return data.map(item => { arrMass.innerHTML += ` ${item.title} ` })}) или как то по другому можно данные выводить?
@tatianaleonova335
@tatianaleonova335 3 роки тому
видео огонь!
@edfiw89
@edfiw89 8 місяців тому
очень доступно, но не понялa, почему response.json возвращает промис
@slavam13
@slavam13 9 місяців тому
Возможно задам глупый вопрос, но можно получать данные в виде XML?
@nosooqua
@nosooqua 3 роки тому
А можно спросить? 😅 А если в джаваскрипте "из коробки" есть XHR и Fetch, зачем нужны либы типа axios?
@FilmsMediaTV
@FilmsMediaTV Рік тому
Подскажи, пожалуйста, как так сделать, в названия методов внутри () скобок писались, как у тебя допустим sendRequest ( method: "POST") - как сделать так чтоб "method" показывался? это расширение какое-то ??
@TheRealWorldArmenia
@TheRealWorldArmenia Рік тому
Наш инстинкт . Когда хотим создавать объект, моментально в голову приходит "key" name и age .
@ArtemKolinko
@ArtemKolinko 4 роки тому
11:23 ошибка сработала в 10-й строке при событии onload, а не при событии onerror (строка 14). Почему так?
@GeorgeKolesnikov
@GeorgeKolesnikov 3 роки тому
Когда приходит ответ, не важно с кодом ошибки или нет, это считается нормальным ответом http и срабатывает событие onload. Чтобы получить событие onerror можете попробовать отключить интернет и запустить скрипт, получите ошибку типа "net::ERR_INTERNET_DISCONNECTED" как раз из события onerror.
Урок 15. JavaScript. Все о Spread и Rest
24:08
Владилен Минин
Переглядів 109 тис.
Не пей газировку у мамы в машине
00:28
Даша Боровик
Переглядів 2,1 млн
XSS to SQL Injection | Bug Bounty POC 2024
7:17
Arfi Tutorials
Переглядів 16
Как работать с сервером в JavaScript ч.1 | AJAX
31:45
Campfire School | Ivan Petrychenko
Переглядів 33 тис.
GET и POST на JavaScript. Делаем AJAX запросы с помощью XMLHttpRequest | JavaScript 2.0
37:58
WebDev с нуля. Канал Алекса Лущенко
Переглядів 15 тис.
AJAX - учимся посылать GET, POST запросы
24:23
WebDev с нуля. Канал Алекса Лущенко
Переглядів 85 тис.
Урок 4. JavaScript. Асинхронность.Что такое Event Loop. JS SetTimeout 0
17:58
Fetch запрос. Async функции, await. AJAX | JavaScript 2.0
30:50
WebDev с нуля. Канал Алекса Лущенко
Переглядів 19 тис.
Урок 17. JavaScript. Все о LocalStorage
16:39
Владилен Минин
Переглядів 147 тис.
12 техник, которые ускорят твое обучение
33:55
Владилен Минин
Переглядів 11 тис.