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

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

[@VladilenMinin]

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

[@nilsen1879]

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

[@Selieznov]

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

[@user-hz3zd3nz6h]

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

[@yaroslavzef7267]

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

[@artemijeka]

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

[@ЕкатеринаМашнина-ж2р]

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

[@cao_dzecbi]

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

[@Blue-oy7tz]

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

[@user-QesOrwuMqN]

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

[@zmeygorynych5684]

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

[@MrReflection540]

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

[@ett4t4]

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

[@Скыбыдыщь]

Юзал свой jQuery, до фетча все никак не добирался, и наконец у тебя вышел такой видосик, хоть уже что-то и есть про фетч, но тут более понятней и подробней. Пасеба , сэр!

[@astrotrain]

Я бы всё же советовал пользовать axios, если хоть какая-то совместимость в проекте нужна, он такой же удобный, но использует xhr.

[@Скыбыдыщь]

@@astrotrain как axios использовать на фронте?

[@astrotrain]

@@Скыбыдыщь в смысле как? axios({ url, method, data }).then(({data}) => { console.log(data); })

[@Скыбыдыщь]

@@astrotrain так а как его подключить это же npm модуль

[@astrotrain]

@@Скыбыдыщь если есть вебпак просто импортом, если нет - то как жуквери github.com/axios/axios#installing

[@Max-kr4ie]

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

[@vladislavozinkovskyi8276]

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

[@yatut4467]

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

[@kotovadana]

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

[@SWIBORG-X]

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

[@HovoK]

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

[@HovoK]

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

[@АлександрШейка-ц5ь]

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

[@ИловМакс]

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

[@VladilenMinin]

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

[@Kas-j2u]

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

[@СергейКарпук-ю9ы]

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

[@kvaqich]

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

[@РусланГусейнов-п1ж]

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

[@gevorgmartirosyan2142]

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

[@smartbrain4623]

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

[@pavelalekseev5849]

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

[@КартавыйДжоний]

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

[@skrillex8334]

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

[@VladilenMinin]

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

[@ivankalashnikov7700]

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

[@ИльяИваник-ф8ф]

пару заметок, если кто-то захочет постестироват запросы через свой 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" => "[e-mail]", "phone" => "1-770-736-8031", "website" => "hildegard.org", ) ); echo json_encode($users);

[@uaplatformacomua]

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

[@sevenpages7068]

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

[@weekendshow7567]

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

[@user-qc2uk8iy6d]

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

[@Peter-vz4tb]

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

[@strikerorion5290]

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

[@Trinity_Trading]

Наш инстинкт . Когда хотим создавать объект, моментально в голову приходит "key" name и age .

[@АндрейУтин-э1к]

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

[@BotFather-m3s]

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

[@БорисБаровский]

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

[@oz9608]

Согласен)

[@oz9608]

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

[@tinaanit2965]

21:00 Fetch(Get) 25:00 Fetch (POST)

[@user-ck9ru7oc1h]

Ты хороший человек. Спасибо.

[@vyacheslav7838]

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

[@evgeniiak7458]

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

[@de17eon50]

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

[@AntonioBenderas]

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

[@returnobject]

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

[@vallery1395]

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

[@fein7068]

Правильное решение это нужно создавать асинхронную функцию и ждать ответа до полного выполнения await и потом уже обрабатывать данные и тогда вам не нужно будет работать с проммисами.

[@evgeny9242]

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

[@alifox6056]

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

[@unknown.6914]

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

[@ups7write]

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

[@name-yy9yu]

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

[@AsVit]

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

[@ФаррухГулбоев-с1к]

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

[@buksirchik1663]

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

[@ПавелГород-ъ5л]

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

[@astrotrain]

Спасибо, чистым xhr сам никогда не пользовался, но всё же было интересно как можно было бы воспользоваться, брался изучать, а там понапишут кучу строк, ничего не понятно что для чего, хоть в 2019 прояснилось. ((: Присоединяюсь к просьбе рассказать про axios, но желательно что-нибудь посложнее, чтобы урок не дублировал этот. Например то, что параметры для гет и пост там отправляются в разных объектах, get в params, а post в data, как можно сделать универсальный обработчик типа жукверевского $.ajax, чтобы можно было не заморачиваться этим а просто указывать данные и метод, а он сам разбирался что с этим делать. Ещё некоторые сервера не принимают данные пост в виде json, поэтому его нужно прогонять через new FormData(), но этого мало, нужно менять ещё и Content-Type. Ну и то что у axios есть axios.all для нескольких запросов за раз... ((:

[@cheesecheesson9842]

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

[@Дмитрий-л4с9х]

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

[@NeedForHeavyMetal]

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

[@vitalijslavrinovics8756]

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

[@Дмитрий-г7я7п]

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

[@dmitryivanov3200]

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

[@anton9443]

Хороший урок. Не хватает только упоминания об async/await и наглядного использования полученной информации из сервера

[@VladilenMinin]

Про них отдельное видео в плейлисте

[@Slovjanyn]

нормальным браузером надо пользоваться а не стоковым огрызочным. В мозиле JSON открылся встроенным вьювером (можно даже соврачивать-разворачивать)

[@denzelwash33]

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

[@АлексейФилатов-э3е]

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

[@const1525]

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

[@sergeyorlov6190]

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

[@astrotrain]

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

[@СергейКозлов-ж5ы8ф]

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

[@artemijeka]

Спасибо!

[@userman6193]

Согласен со многими! Владлен давай! А, если по простому --- Спасибо! Вас, Владлен, мне рекомендовал Димыч). Спасибо обоим!!

[@mk3mk3mk]

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

[@sucsgod2859]

Спасибо, отличный видео-урок, но после того как ты дорабатываешь функцию sendRequest с использованием fetch, для того чтобы она могла принимать метод POST, после данных модификаций, метод GET с этой функцией перестаёт работать и выкидывает ошибку TypeError говорящая о том что у методов GET/HEAD не должно быть параметра body. А в целом сам урок свою цель выполняет, просто функция вроде как делалась для того чтобы работать как с методом GET, так и с методом POST.

[@alekseiskvortsov491]

Согласен, тоже это заметил

[@horizon3208]

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

[@andrii_vorona]

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

[@MikeMentzer09]

Дарова

[@404piano]

Было бы неплохо увидеть курс по axios от тебя, Владилен :)

[@alex_k21]

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

[@ВадимАлекс-щ6ъ]

спасибо

[@СергейКулаков-ю6д]

в уроке, видимо, ошибка. Если в готовом коде закомментить метод 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 , то и всё норм работает

[@irinabaranova9236]

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

[@whicencer8819]

Можно сделать это всё в пару строк кода. Используя Async, await. Как раз вы уже снимали видео про них.

[@994gun3]

Есть сссылка ?

[@maksymvintskovskyi6475]

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

[@ArtemKolinko]

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

[@GeorgeKolesnikov]

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

[@bolatzhanulys]

ТОП урок!!!

[@leokorsunsky2395]

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

[@ilnurryazhapov]

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

[@mihaylov13]

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

[@dovgaldima]

Отличная работа, спасибо за информацию. Но когда я подключил файл JSON с репозитория GITHUB, у меня доступ был заблокирован политикой CORS, сейчас интересуюсь как решить эту задачу.

[@azamatkurmangaliyev6010]

как успехи?)

[@MrGerka0291]

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

[@todrgor]

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

[@artemzhuravlenko9955]

Очень круто

[@kirillbaryba746]

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

[@sabrinashamsiddinova7691]

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

[@АрсенийРоманюк-ы9х]

Урок то, конечно классный и понятный, но блин, в названии ролика в тегах прописан ajax, хотя ни разу он даже упомянут не был... Не круто.

[@Irishka_Vinni]

super

[@svetlana9436]

Спасибо ♥

[@tatianaleonova335]

видео огонь!

[@bloodraven9622]

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

[@Anik_666]

юрлЬ...

[@Fenjkeee]

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

[@-wildberries9607]

лучший

[@angelarazina9468]

xhr.js:10 Uncaught SyntaxError: missing ) after argument list

[@smolindesign]

у меня такая же ошибка. это где пишется xhr.open(method:'GET', URL) хотя никакая скобка там не пропущена

[@diekunstUA]

Не совсем понятно, делается функция sendRequest которая, по идее, должна быть универсальной как для POST так и для GET но по факту, в конечном ее варианте она работать для GET не будет, так как для GET нет body. Если это частный случай, тогда не понимаю зачем фунция, все можно сделать просто через fetch

[@yevhenlebid]

действительно, в принципе ничего сложного