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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо!

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

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

ТОП урок!!!

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

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

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

пару заметок, если кто-то захочет постестироват запросы через свой 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);

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

Благодарю!!

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

Спасибо ♥

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

СПАСИБО!

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

Очень круто

СПАСИБО!!!

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

спасибо

Спасибо!!!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

лучший

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

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

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

super

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

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

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

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