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

[@VladilenMinin]

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

[@nilsen1879]

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

[@rammlet2030]

Лучший туториал по этой теме даже спустя 5 лет. Снимаю шляпу!

[@Blue-oy7tz]

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

[@Selieznov]

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

[@user-hz3zd3nz6h]

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

[@yaroslavzef7267]

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

[@artemijeka]

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

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

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

[@cao_dzecbi]

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

[@user-QesOrwuMqN]

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

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

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

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

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

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

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

[@kostiabazrov-life]

@Валентин Инкогнито , стоит отметить, что даты нет у гета) если попробуешь отправить, то ошибку получишь)

[@zmeygorynych5684]

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

[@MrReflection540]

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

[@ett4t4]

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

[@BotFather-m3s]

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

[@HovoK]

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

[@HovoK]

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

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

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

[@tinaanit2965]

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

[@АлександрТкач-х1к]

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

[@Max-kr4ie]

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

[@gevorgmartirosyan2142]

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

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

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

[@oz9608]

Согласен)

[@oz9608]

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

[@SWIBORG-X]

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

[@kvaqich]

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

[@yatut4467]

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

[@vladislavozinkovskyi8276]

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

[@kotovadana]

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

[@ИловМакс]

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

[@VladilenMinin]

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

[@weekendshow7567]

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

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

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

[@pavelalekseev5849]

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

[@unknown.6914]

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

[@uaplatformacomua]

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

[@Kas-j2u]

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

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

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

[@mk3mk3mk]

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

[@skrillex8334]

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

[@VladilenMinin]

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

[@ivankalashnikov7700]

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

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

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

[@de17eon50]

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

[@MrGerka0291]

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

[@smartbrain4623]

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

[@AntonioBenderas]

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

[@Peter-vz4tb]

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

[@Trinity_Trading]

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

[@ArtemKolinko]

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

[@GeorgeKolesnikov]

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

[@classic5336]

Как получить отправленные данные с клиента методом POST на сервере? Пробовал реализовать как у вас fetch, но он возвращал мне мою html страницу на сервере. Хотя на самом клиенте данные отправляются и если смотреть в браузере, они находятся в Network в разделе Headers/Request Payload. Как мне достать оттуда мои данные на локальном сервере?

[@vyacheslav7838]

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

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

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

[@strikerorion5290]

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

[@ИльяИваник-ф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);

[@sergeyorlov6190]

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

[@sevenpages7068]

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

[@NeedForHeavyMetal]

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

[@returnobject]

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

[@densaface]

XHR не поддерживает запросы через прокси? Погуглил, вроде нет. Хотя странно, в питоне request session get/post без проблем это делает.

[@FilmsMediaTV]

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

[@evgeniiak7458]

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

[@maksymvintskovskyi6475]

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

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

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

[@АлександрДовгяло-я3р]

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

[@vallery1395]

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

[@evgeny9242]

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

[@bag8208]

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

[@name-yy9yu]

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

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

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

[@const1525]

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

[@fein7068]

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

[@СергейКулаков-ю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 , то и всё норм работает

[@ups7write]

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

[@andrii_vorona]

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

[@Mentzer009]

Дарова

[@Григорий-т2б]

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

[@ЮрийГригорьевичСериков]

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

[@tomskgid_vape4256]

Не могу понять я всеравно почему у меня не работает пишу так же все но на другой сайт отправляю get запрос они все ругаются на cors policy делаю все так же что не так то

[@ЛераВоробьева-ю5з]

22:42 'Мы можем его ?зачейнить? с помощью метода then'. Что значит зачейнить и откуда это слово?

[@alifox6056]

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

[@datasource171]

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

[@zergzerg4844]

Странно, почему-то я всеравно получаю promis вместо json по этому коду let response = fetch(url) .then((response) => { return response.json(); }).catch((e) => console.log(e.message));

[@horizon3208]

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

[@buksirchik1663]

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

[@nurbolot02]

у меня проблема ajax когда я отправляю запрос сайт перезагружается и имя телефона пишется во всех формах все url будет можете мне помочь ?

[@denzelwash33]

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

[@EvgenichTalagaev]

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

[@dmitryivanov3200]

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

[@slavam13]

Возможно задам глупый вопрос, но можно получать данные в виде XML?

[@Малинка30]

Добрый день. Вкладываю полученый массив в глобальный объект window, а консоль возвращает undefined, хотя если смотреть сам объект , то массив в нем есть. Где может быть ошибка?

[@maxwellcoding]

Думаю, что проблема может быть в том, как ты пытаешься получить данные записанные в объект windows. Попытайся их получить где-нибудь в .then() или через await, если ты работаешь с асинхронной функцией, т.к. записываются они в windows асинхронно. Т.е., если ты где-нибудь в коде просто попытаешься вывести эти данные - console.log(windows.myData), то получишь undefined, т.к. твой вывод сработает раньше, чем запись данных в windows.

[@catelectro3167]

Яверно считаю, чтобы написать Пост и Гет запросы нужно писать отдельные функции?

[@dmitruz1900]

Здравствуйте. У вас в 11 строке headers: headers. Когда я так пишу то ошибка (Syntax Error: Application is not defined)

[@Максим-й3з5н]

Честно, так и не понял, почему рекомендуется добавлять слушатель onload раньше отправки запроса, попробовал написать после - все работает. Может, есть какие-то случаи, в которых такой фокус не пройдет. Буду рад, если кто-нибудь объяснит подробнее этот момент

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

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

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

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

[@AsVit]

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

[@sekirogenshiro2210]

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

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

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

[@userman6193]

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

[@frany4057]

return fetch(url).then((data) => { console.log(data.text());}) почему такой код возвращает промис, а не текст?

[@malcorehardcore]

Потому что Fetch всегда возвращает промис, утебя в первом then приходят не данные, а Response объект, данные ты получишь только в следующем then. Используй Promise.all, если хочешь вернуть текст

[@ЕвгенийДавыдов-ф2ш]

Добрый день, у меня возникла такая проблемка с Ajax. При загрузке картинки в интернет магазине, данные о картинке отправляются Ajax на Метод контролера, где эти данные обрабатываются, файл сохраняется, производятся над ним операции, дальше в таблицы пишутся такие данные, как айди картинки, айди товара которому она принадлежит, Альт картинки. При загрузки одной картинки все отлично. Например в товаре уже была загружена картинка с альтом, у меня сделано чтобы в последующие загружаемые альт копировался в них. Но проблема при мультизагрузке - в этом случает теряются данные Альта, и не записываются в базу. Но когда я дибажу, делаю вардамп и отправляю запрос, видимо из-за какой-то задержки, данные нормально записываются. Что это за проблема такая и как она лечиться?

[@ulvenrain4295]

привет, спасибо за урок, лайк автоматом, подписка уже пару месяцев. Но не совсем понял следующее: на 21:44 ты удаляешь код внутри функции sendRequest , конкретно говорю про return new Promise(...) и потом на 22:11 говоришь, что sendRequest возвращает промис, тут я немного запутался. Ты же удалил "return new Promise(...) ", почему он все еще возвращает промис? Прошу простить, если вопрос глупый, только начал изучать JavaScript.

[@toxroy7140]

fetch возвращает промис

[@IhorVyshniakov]

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

[@IhorVyshniakov]

@@СергейЦветов-н4н тоже вижу, но мне интересно почему

[@Slovjanyn]

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

[@anton9443]

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

[@VladilenMinin]

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

[@ВИКА-г3о9р]

open() не открывает соединение, а конфигурирует, инициализирует его, запрос отсылает же только после send

[@begovik9866]

У меня почему-то не переопределяется Content-type так и остаётся text/html

[@vitalijslavrinovics8756]

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

[@АлексейКомлев-т4с]

Почему голубь не может открыть нежную страницу? Не правильный url

[@cheesecheesson9842]

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

[@nosooqua]

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

[@НикитаКочулов-ф7ц]

Спасибо за видео. Можешь сказать, есть ли случаи, когда fetch нежелательно использовать, а лучше придерживаться отправки/получения данных с помощью чистого (либо с исп-м Промисов) XMLHttpRequest (XHR) + Ajax?

[@АлексейСедов-й5м]

Не то чтобы нежелательно, а не получится применить fetch в том случае, когда нужно отследить "процент" загрузки файла

[@vitaliy794]

@@АлексейСедов-й5м то есть с помощью fetch не получится например делать полоски прогресса загрузки и тд?

[@АлексейСедов-й5м]

@@vitaliy794 да. Для таких случаев используют api xmlhttprequest

[@vitaliy794]

@@АлексейСедов-й5м А можете пожалуйста подсказать еще. Вот когда получил данные и что бы пройтись по массиву например map это делается внутри then типо такого sendRequest('GET', url) .then(data => {return data.map(item => { arrMass.innerHTML += ` ${item.title} ` })}) или как то по другому можно данные выводить?