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

Эксклюзивный контент на моем 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
    @VladilenMinin4 жыл бұрын

    Результаты конкурса будут завтра :) Эксклюзивный контент на моем Boosty: boosty.to/vladilen

  • @nilsen1879

    @nilsen1879

    4 жыл бұрын

    Только сейчас дошло, как решить задачку.

  • @Selieznov
    @Selieznov4 жыл бұрын

    Вот это мужик, вот как надо рассказывать, я несколько часов слушал разных индусов, но ни один и в подметки не годится. Спасибо тебе, Бро!!!

  • @user-hz3zd3nz6h

    @user-hz3zd3nz6h

    3 жыл бұрын

    ну про индусов ты загнул

  • @yaroslavzef7267

    @yaroslavzef7267

    3 жыл бұрын

    МУЖЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫК!

  • @artemijeka

    @artemijeka

    2 жыл бұрын

    индус - это принадлежность к религии

  • @user-gy6wd8jj2j

    @user-gy6wd8jj2j

    2 жыл бұрын

    @@user-hz3zd3nz6h я тоже индусов смотрела😅 не поверите, но все получалось только по их урокам, не надо на них гнать

  • @user-uz4yu6qk1r

    @user-uz4yu6qk1r

    Жыл бұрын

    Так он нихрена нормально и не рассказал

  • @zmeygorynych5684
    @zmeygorynych56843 жыл бұрын

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

  • @Blue-oy7tz
    @Blue-oy7tz4 жыл бұрын

    Мужик, делай то что ты делаешь. Я чуть с ума не сошел пока искал эту инфу в понятном и доступном виде в сети. Пришлось самому всё понимать кое-как, и то не всё. И тут, хвала алгоритмам ютуба, появился ты. еще раз спасибо + лайк + подпискам (:

  • @ivankalashnikov7700
    @ivankalashnikov77002 жыл бұрын

    Смотрел кучу видео на эту тему, ваше - лучшее! Огромное спасибо за качественный контент и удачи вашему каналу!

  • @vladislavozinkovskyi8276
    @vladislavozinkovskyi82764 жыл бұрын

    очень толково. Разложил все по полочкам. Просто и лаконично. Для введения самое оно

  • @pavelalekseev5849
    @pavelalekseev58494 жыл бұрын

    Очень клевое расширение для Гитхаба, спасибо Владилен. Даже пассивно умеешь помогать :)

  • @evgeniiak7458
    @evgeniiak7458 Жыл бұрын

    Обожаю Ваши видео. Всегда всё четко и по делу. Спасибо большое за труд!

  • @evgeny9242
    @evgeny92424 жыл бұрын

    круто, действительно очень познавательно, как только появятся деньги отблагодарю, курс куплю или задоначу, очень понятно, а главное отвечает на все вопросы которые мучали раннеее

  • @vitalijslavrinovics8756
    @vitalijslavrinovics87563 жыл бұрын

    Благодарю за то что помогаешь обучаться разработке на javascript!

  • @SWIBORG-X
    @SWIBORG-X11 ай бұрын

    Это не единственный канал по программированию, но единственный с автором, который так хорошо объясняет. Спасибо за знания!

  • @vallery1395
    @vallery1395 Жыл бұрын

    Огромное спасибо! Я тоже пересмотрела на эту тему много видео. Это - лучшее из всех! Удачи!!!

  • @user-hd9oq3td7z
    @user-hd9oq3td7z3 ай бұрын

    Спасибо большое за этот видео урок, обыскал весь интернет, но некто так грамотно как вы не смог рассказать а тут всё ясно и понятно , 😎

  • @user-QesOrwuMqN
    @user-QesOrwuMqN3 жыл бұрын

    Хочу отметить разницу между Fetch и XHR: при отправке файлов/больших payload'ов на сервер XHR - позволяет получать прогресс загрузки файла на сервер, в то время как Fetch этой информации не предоставляет

  • @user-pg2tc5im5u
    @user-pg2tc5im5u4 жыл бұрын

    спасибо большое, раньше использовал только axios,ajax(jquery) теперь в курсе про нативные методы

  • @ups7write
    @ups7write4 жыл бұрын

    Отлично! Спасибо. Хорошие уроки. Пришлось про CORS погуглить :)

  • @smartbrain4623
    @smartbrain46234 жыл бұрын

    Спасибо! Отличные уроки по js. Все ясно понятно. Ну прям огонь🔥

  • @denzelwash33
    @denzelwash333 жыл бұрын

    Шикарное объяснение, ты прям прирожденная училка!)

  • @strikerorion5290
    @strikerorion52902 жыл бұрын

    Спасибо, классное и подробное объяснение, удивляюсь что подписчиков не раза в 2 - 3 минимум, больше.

  • @skrillex8334
    @skrillex83343 жыл бұрын

    Огромное спасибо! Продолжай в том же духе! Очень жду роликов по выполнению каких-то проектов на реакте.

  • @VladilenMinin

    @VladilenMinin

    3 жыл бұрын

    Их много на канале

  • @user-fx8rm4kw2y
    @user-fx8rm4kw2y4 жыл бұрын

    класс. как раз сейчас работаю с с запросами. прям вовремя

  • @Max-kr4ie
    @Max-kr4ie4 жыл бұрын

    Хорошо все разобрал, говорим тебе спасибо!

  • @irinabaranova9236
    @irinabaranova923611 ай бұрын

    Спасибо большое, Владилен! 😍😍😍

  • @alifox6056
    @alifox60564 жыл бұрын

    Досмотрел плейлист. Спасибо за уроки !

  • @uaplatformacomua
    @uaplatformacomua4 жыл бұрын

    Супер! Надеюсь, это мне поможет всё-таки сделать тестовое задание

  • @gevorgmartirosyan2142
    @gevorgmartirosyan21423 жыл бұрын

    спасибо агромное, вот я наконец понял что запросы и как они работают

  • @user-uo7iv6bw5l
    @user-uo7iv6bw5l4 жыл бұрын

    Спасибо огромное разобрали супер. поставил бы два лайка даже. подписался.

  • @AsVit
    @AsVit4 жыл бұрын

    Урок пройден) Спасибо!!! Очень круто все разобрано, все понятно! Супер!

  • @user-up1xl1ef5e
    @user-up1xl1ef5e2 жыл бұрын

    Это ШЕДЕВРАЛЬНО!

  • @name-yy9yu
    @name-yy9yu4 жыл бұрын

    лучший канал) спасибо

  • @cheesecheesson9842
    @cheesecheesson98423 жыл бұрын

    Смотрю с удовольствием. Спасибо, Владилен!

  • @weekendshow7567
    @weekendshow75672 ай бұрын

    Этот урок классно объяснил🎉

  • @user-vc5xs1no7m
    @user-vc5xs1no7m4 жыл бұрын

    Владилен, спасибо большое тебе за твой труд! Однозначно ЛАЙК!!! Просьба, сделай пожалуйста подробный гайд по axios!

  • @buksirchik1663
    @buksirchik16634 жыл бұрын

    Fetch как раз учу сейчас, спасибо за подгон)

  • @dmitryivanov3200
    @dmitryivanov32004 жыл бұрын

    Спасибо, Владилен!

  • @MrReflection540
    @MrReflection5404 жыл бұрын

    Реально, практически идеальный урок! Единственное из-за чего картина не совсем до конца складывается, так это из-за того, что были опущены async/await, а также очень хотелось бы увидеть наглядный пример serialize у ajax, но используя fetch

  • @user-no6il5pi8n

    @user-no6il5pi8n

    3 ай бұрын

    есть отдельное видео по async await и промисы

  • @user-ie2gm8bp5v
    @user-ie2gm8bp5v4 жыл бұрын

    Владилен, запиши видос про графику на canvas, никогда этим не пользовался и не сталкивался, но очень было бы увидеть и послушать профессионала на эту тему. Ты же вроде разбирался с этим как раз, когда в конкурсе Telegram участвовал, вот было бы очень интересно послушать как ты все писал и как работать с графикой

  • @alex_k21
    @alex_k214 жыл бұрын

    уроки ТОП! всё чётко и по полочкам. спасибо!

  • @user-qc2uk8iy6d
    @user-qc2uk8iy6d4 жыл бұрын

    Спасибо огромное за ваши уроки! Хоть по темам уже ушли далеко вперед, но было бы неплохо услышать про DOM/BOM с вашими пояснениями. Заранее спасибо

  • @user-nz5ln7bj5c
    @user-nz5ln7bj5c4 жыл бұрын

    Спасибо за урок!

  • @sevenpages7068
    @sevenpages70684 жыл бұрын

    Владилен, спасибо тебе за твои видео. Очень помогают! Нет ли у тебя в планах записать мастер класс по DevTools бразуера? У тебя очень много уроков в которых ты объясняешь, как что-то сделать с нуля, с этим все более-менее понятно. Мог бы ты записать какой-нибудь курс, в котором ты бы взял какой-нибудь open-source проект, и показал от и до, как разобраться в новом проекте, с чего начать, как правильно читать код, как структурировать полученную информацию и приступить к допиливанию своего функционала. (Лично меня интересуют проекты на Angular и чистом JS).

  • @unknown.6914
    @unknown.69146 ай бұрын

    урок правда полезный, спасибо

  • @user-cy2td3lg8t
    @user-cy2td3lg8t Жыл бұрын

    Большое спасибо за видео!

  • @user-nb1is5wc4k
    @user-nb1is5wc4k Жыл бұрын

    Спасибо, очень полезное видео.

  • @kotovadana
    @kotovadana4 жыл бұрын

    По-моему еще ЛУЧШЕ все это рассказать просто не возможно. Большое спасибо за видео! Мне кажется, если вы сейчас начнете выкладывать обучающие видео о том, как правильно строить дома - я подамся в строители, потому что ваши видео смотреть - одно удовольствие ! :D :)))

  • @kvaqich
    @kvaqich3 жыл бұрын

    Супер. Полдня убил на понимание запросов. С jQuery ajax всё получалось, а native js не поддавался.

  • @de17eon50
    @de17eon504 жыл бұрын

    Огонь, теперь хватает знаний чтобы полчить данные со своего REST api

  • @EvgenichTalagaev
    @EvgenichTalagaev2 жыл бұрын

    Спасибо за видео!

  • @yatut4467
    @yatut44672 жыл бұрын

    Спасибо, очень и очень полезно и понятно. Только в названии еще Ajax упоминается, но что-то вроде бы в ролике ни слова не было.

  • @user-vx6mp6di4o
    @user-vx6mp6di4o4 жыл бұрын

    Очень крутой канал! предлагаю рассказать про Регулярные выражения мне кажется интересная тема.

  • @horizon3208
    @horizon320810 ай бұрын

    спасибо огромное! очень помог!

  • @bolatzhanulys
    @bolatzhanulys4 жыл бұрын

    ТОП урок!!!

  • @Peter-vz4tb
    @Peter-vz4tb4 жыл бұрын

    Теперь хоть разобрался зачем был нужен XMLHttpRequest. Спасибо. Хотелось бы разобрать как правильно проектировать бекенд + фронт. А то столько мнений не знаешь кто прав.

  • @NeedForHeavyMetal
    @NeedForHeavyMetal2 жыл бұрын

    всё круто, лайк подписка! Было бы ещё круче если б делал пометки // хотя б простенькие) спасибо)

  • @user-gu5ir3zs4v
    @user-gu5ir3zs4v4 жыл бұрын

    Юзал свой 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

  • @kirillbaryba746
    @kirillbaryba7464 жыл бұрын

    Спасибо, здорово

  • @user-ql4xu5qu2u
    @user-ql4xu5qu2u4 жыл бұрын

    Поддерживаю, что нужен видеоурок про rest & spread.

  • @VladilenMinin

    @VladilenMinin

    4 жыл бұрын

    Как раз завтра будет)

  • @ilnurryazhapov9377
    @ilnurryazhapov93774 жыл бұрын

    Лайк не глядя!

  • @mihaylov13

    @mihaylov13

    4 жыл бұрын

    Согласен, лайк

  • @leokorsunsky2395
    @leokorsunsky23953 жыл бұрын

    Лайк однозначно)

  • @user-gs7hj1om5r
    @user-gs7hj1om5r4 жыл бұрын

    на самом деле ты читаешь мои мысли.. хотел попросить урок по fetch и вот спс тебе

  • @andriyvorona7687
    @andriyvorona76874 жыл бұрын

    Давайте больше таких видео

  • @MikeMentzer09

    @MikeMentzer09

    9 ай бұрын

    Дарова

  • @artemzhuravlenko9955
    @artemzhuravlenko99554 жыл бұрын

    Очень круто

  • @bloodraven9622
    @bloodraven96224 жыл бұрын

    спасибо, помог

  • @const1525
    @const15254 жыл бұрын

    Отличный урок, проходит со свистом ))

  • @HovoK
    @HovoK4 жыл бұрын

    Владилен вы растете на наших глазах))))) в предыдущих уроках у объекта Владилен поле age был ровен 25))))

  • @HovoK

    @HovoK

    4 жыл бұрын

    кстати, привет из 2020

  • @user-qs8vf5dm3c

    @user-qs8vf5dm3c

    4 жыл бұрын

    стареет потихоньку

  • @user-nk6qo9in4l
    @user-nk6qo9in4l Жыл бұрын

    Большое спасибо

  • @user-gu2lf6tr8m
    @user-gu2lf6tr8m2 жыл бұрын

    крутая подача! все четко, без H2O

  • @oz9608

    @oz9608

    2 жыл бұрын

    Согласен)

  • @oz9608

    @oz9608

    2 жыл бұрын

    Даже под C2H5OH хорошо заходит)

  • @svetlana9436
    @svetlana94364 жыл бұрын

    Спасибо ♥

  • @returnobject
    @returnobject3 жыл бұрын

    зачетный ролик! работать с XHR классом как по мне проще для понимания чем с fetch(). классе все явно указывается а в fetch неявные промисы и прочие методы, мне нубу без доков не разобраться.

  • @todrgor
    @todrgor2 жыл бұрын

    Блин спасибо большущее)))))

  • @olenahrishyna3212
    @olenahrishyna32124 жыл бұрын

    Спасибо!

  • @MrGerka0291
    @MrGerka02917 ай бұрын

    Да!! просто нечеловеческое спасибо!!! а скажешь что за шаблон подсветки кода у тебя установлен?

  • @user-pe8el6tb7n
    @user-pe8el6tb7n3 жыл бұрын

    СПАСИБО!!!

  • @nikolai4100
    @nikolai41003 жыл бұрын

    СПАСИБО!

  • @brawlstarsgamer5496
    @brawlstarsgamer5496 Жыл бұрын

    Благодарю!!

  • @GGSoft2009
    @GGSoft20094 жыл бұрын

    Спасибо!!!

  • @vyacheslav7838
    @vyacheslav78383 жыл бұрын

    Я реально испугался, когда ты не поставил точку с запятой, а потом вспомнил - это же js......)

  • @seriousman109
    @seriousman1093 жыл бұрын

    Видео помогло, спасибо, + к карме.

  • @sergeyorlov6190
    @sergeyorlov61904 жыл бұрын

    Владилен, хотелось бы узнать полное взаимодействие базы, сервера, и приложения. Давай разберём остальные методы зачем они нужны и когда используются

  • @astrotrain

    @astrotrain

    4 жыл бұрын

    Присоединяюсь, на практике только гет и пост юзал.

  • @tatianaleonova335
    @tatianaleonova3354 жыл бұрын

    видео огонь!

  • @maksymvintskovskyi6475
    @maksymvintskovskyi64754 жыл бұрын

    Очень доступно. Но подскажите как использовать полученные данные, где они хранятся и т.п.

  • @IhorVyshniakov
    @IhorVyshniakov3 жыл бұрын

    Спасибо за полезный урок! Подскажите, пожалуйста, почему после команд до .onload не ставятся в конце ";"? Нужно ли ставить точку с запятой(если да, то всегда ли) или нет и почему?

  • @IhorVyshniakov

    @IhorVyshniakov

    2 жыл бұрын

    @@user-lm8py5rb4m тоже вижу, но мне интересно почему

  • @QmanKUCHER
    @QmanKUCHER3 жыл бұрын

    Владилен, спасибо за видео!! Но как всегда есть вопрос ведь странные ситуацию случаются, а ты немного говоришь о том как обрабатывать ошибки. Например, когда сервис упал он вместо ошибки начинает отдавать свою странницу 404, вместо json, но по каким-то истерическим причинам ее статус 200. Что делать в таких случаях?

  • @user-ri7zc8zs2b
    @user-ri7zc8zs2b Жыл бұрын

    Владилен, спасибо за урок! Не могли бы подсказать, где проблема в следующей ситуации: POST запрос при загрузке файлов отрабатывается правильно, но если в названии файла есть кириллица, то вместо нее приходит абракадабра. Попробовал и fetch, и XMLHttpRequest. FormData формируется правильно. С postman тестирование проходит без ошибок. с уважением, Юрий

  • @FilmsMediaTV
    @FilmsMediaTV Жыл бұрын

    Подскажи, пожалуйста, как так сделать, в названия методов внутри () скобок писались, как у тебя допустим sendRequest ( method: "POST") - как сделать так чтоб "method" показывался? это расширение какое-то ??

  • @umpair
    @umpair4 жыл бұрын

    Привет. А будет материал про ООП?

  • @-wildberries9607
    @-wildberries96074 жыл бұрын

    лучший

  • @mk3mk3mk
    @mk3mk3mk3 жыл бұрын

    С этим сайтом json placeholder понятно, а как быть с локальным своим сайтом? Там что должно быть, в самом простом варианте, файл index.php и в нем что должно быть? Чтобы мы могли получить данные. И еще, т. к. тут упоминается ajax, то что тут рассматривается, мы получаем данные с сервера, я например хочу сделать, чтобы эти полученные данные отображались на странице сайта, то они будут добавляться Без перезагрузки страницы?

  • @yerorey1771
    @yerorey17714 жыл бұрын

    Thank you! Cnocnbo!

  • @smolindesign

    @smolindesign

    4 жыл бұрын

    Сnacubo! or Spasibo! or Спасибо! or Cnacu6(six)o!

  • @user-ef2pn4zc8f
    @user-ef2pn4zc8f2 жыл бұрын

    спасибо

  • @AntonioBenderas
    @AntonioBenderas Жыл бұрын

    Fetch уже был в Уроке8. Вообще плейлист как-то не структурирован, всё намешано в куче, вроде смотришь с 1 урока, а потом все темы в разнобой

  • @sabrinashamsiddinova7691
    @sabrinashamsiddinova7691 Жыл бұрын

    Thank u very much, really understandable. U just explained things in so clear way

  • @nosooqua
    @nosooqua3 жыл бұрын

    А можно спросить? 😅 А если в джаваскрипте "из коробки" есть XHR и Fetch, зачем нужны либы типа axios?

  • @bag8208
    @bag82082 жыл бұрын

    Подскажите плиз, а че в js, уже не нужны точка с запятой в конце команд?? спасибо!

  • @ArtemKolinko
    @ArtemKolinko4 жыл бұрын

    11:23 ошибка сработала в 10-й строке при событии onload, а не при событии onerror (строка 14). Почему так?

  • @GeorgeKolesnikov

    @GeorgeKolesnikov

    3 жыл бұрын

    Когда приходит ответ, не важно с кодом ошибки или нет, это считается нормальным ответом http и срабатывает событие onload. Чтобы получить событие onerror можете попробовать отключить интернет и запустить скрипт, получите ошибку типа "net::ERR_INTERNET_DISCONNECTED" как раз из события onerror.

  • @datasource171
    @datasource1714 жыл бұрын

    А как можно получить body из Network -> XHR -> Response на коком-нибудь сайте, чтобы использовать эти данные, например в расширении Chrome? Это вообще возможно сделать через JS? Странно, но в Google и KZread ответа на этот вопрос так и не нашлось...

  • @sekirogenshiro2210
    @sekirogenshiro22104 жыл бұрын

    Влад,не отображаются данные data в новой вкладке response payload.вообще этой вкладки нету .не видно данных,которые я скинул

  • @user-mp2js7gy1e
    @user-mp2js7gy1e4 жыл бұрын

    Это странно, но я пытался отправить по методу POST данные на сервер в формате json (с нужными заголовками... в общем как в видео) и данные на сервер не передавались. Я так и не понял почему. Но стоило мне изменить формат передачи данных (на param1=value1¶m2=value2) и естественно поменять заголовок на application/x-www-form-urlencoded и данные передались на сервер. Вопрос: почему не получилось передать параметры в JSON-формате?

  • @user-ce9mh7ij6o
    @user-ce9mh7ij6o3 жыл бұрын

    super

  • @technoboxIT
    @technoboxIT3 жыл бұрын

    Спасибооооооо...

Келесі