Урок 14. JavaScript. Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax
HTML-код
- Опубликовано: 15 окт 2019
- Эксклюзивный контент на моем 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
Результаты конкурса будут завтра :)
Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Только сейчас дошло, как решить задачку.
Вот это мужик, вот как надо рассказывать, я несколько часов слушал разных индусов, но ни один и в подметки не годится. Спасибо тебе, Бро!!!
ну про индусов ты загнул
МУЖЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫК!
индус - это принадлежность к религии
@@user-hz3zd3nz6h я тоже индусов смотрела😅 не поверите, но все получалось только по их урокам, не надо на них гнать
Так он нихрена нормально и не рассказал
Мужик, делай то что ты делаешь. Я чуть с ума не сошел пока искал эту инфу в понятном и доступном виде в сети. Пришлось самому всё понимать кое-как, и то не всё. И тут, хвала алгоритмам ютуба, появился ты.
еще раз спасибо + лайк + подпискам (:
Вот это я понимаю качественный контент, разложил по полочкам. Владилен, спасибо)
очень толково.
Разложил все по полочкам.
Просто и лаконично.
Для введения самое оно
Хочу отметить разницу между Fetch и XHR: при отправке файлов/больших payload'ов на сервер XHR - позволяет получать прогресс загрузки файла на сервер, в то время как Fetch этой информации не предоставляет
Смотрел кучу видео на эту тему, ваше - лучшее! Огромное спасибо за качественный контент и удачи вашему каналу!
Очень клевое расширение для Гитхаба, спасибо Владилен. Даже пассивно умеешь помогать :)
Обожаю Ваши видео. Всегда всё четко и по делу. Спасибо большое за труд!
Спасибо большое за этот видео урок, обыскал весь интернет, но некто так грамотно как вы не смог рассказать а тут всё ясно и понятно , 😎
Огромное спасибо! Я тоже пересмотрела на эту тему много видео. Это - лучшее из всех! Удачи!!!
круто, действительно очень познавательно, как только появятся деньги отблагодарю, курс куплю или задоначу, очень понятно, а главное отвечает на все вопросы которые мучали раннеее
Это не единственный канал по программированию, но единственный с автором, который так хорошо объясняет. Спасибо за знания!
Отлично! Спасибо. Хорошие уроки. Пришлось про CORS погуглить :)
спасибо большое, раньше использовал только axios,ajax(jquery) теперь в курсе про нативные методы
Огромное спасибо! Продолжай в том же духе! Очень жду роликов по выполнению каких-то проектов на реакте.
Их много на канале
Шикарное объяснение, ты прям прирожденная училка!)
Благодарю за то что помогаешь обучаться разработке на javascript!
Спасибо, классное и подробное объяснение, удивляюсь что подписчиков не раза в 2 - 3 минимум, больше.
Спасибо! Отличные уроки по js. Все ясно понятно. Ну прям огонь🔥
Хорошо все разобрал, говорим тебе спасибо!
Спасибо большое, Владилен! 😍😍😍
Супер! Надеюсь, это мне поможет всё-таки сделать тестовое задание
класс. как раз сейчас работаю с с запросами. прям вовремя
спасибо агромное, вот я наконец понял что запросы и как они работают
Этот урок классно объяснил🎉
Владилен, спасибо большое тебе за твой труд! Однозначно ЛАЙК!!!
Просьба, сделай пожалуйста подробный гайд по axios!
Владилен, запиши видос про графику на canvas, никогда этим не пользовался и не сталкивался, но очень было бы увидеть и послушать профессионала на эту тему. Ты же вроде разбирался с этим как раз, когда в конкурсе Telegram участвовал, вот было бы очень интересно послушать как ты все писал и как работать с графикой
Досмотрел плейлист. Спасибо за уроки !
Спасибо огромное разобрали супер. поставил бы два лайка даже. подписался.
Это ШЕДЕВРАЛЬНО!
Спасибо огромное за ваши уроки! Хоть по темам уже ушли далеко вперед, но было бы неплохо услышать про DOM/BOM с вашими пояснениями. Заранее спасибо
Владилен, спасибо тебе за твои видео. Очень помогают!
Нет ли у тебя в планах записать мастер класс по DevTools бразуера?
У тебя очень много уроков в которых ты объясняешь, как что-то сделать с нуля, с этим все более-менее понятно. Мог бы ты записать какой-нибудь курс, в котором ты бы взял какой-нибудь open-source проект, и показал от и до, как разобраться в новом проекте, с чего начать, как правильно читать код, как структурировать полученную информацию и приступить к допиливанию своего функционала. (Лично меня интересуют проекты на Angular и чистом JS).
Спасибо, очень и очень полезно и понятно. Только в названии еще Ajax упоминается, но что-то вроде бы в ролике ни слова не было.
Урок пройден) Спасибо!!! Очень круто все разобрано, все понятно! Супер!
Спасибо, Владилен!
Спасибо за урок!
Спасибо, очень полезное видео.
урок правда полезный, спасибо
лучший канал) спасибо
Реально, практически идеальный урок!
Единственное из-за чего картина не совсем до конца складывается, так это из-за того, что были опущены async/await, а также очень хотелось бы увидеть наглядный пример serialize у ajax, но используя fetch
есть отдельное видео по async await и промисы
Большое спасибо за видео!
Fetch как раз учу сейчас, спасибо за подгон)
Смотрю с удовольствием. Спасибо, Владилен!
Огонь, теперь хватает знаний чтобы полчить данные со своего REST api
уроки ТОП! всё чётко и по полочкам.
спасибо!
Теперь хоть разобрался зачем был нужен XMLHttpRequest. Спасибо.
Хотелось бы разобрать как правильно проектировать бекенд + фронт. А то столько мнений не знаешь кто прав.
Супер. Полдня убил на понимание запросов. С jQuery ajax всё получалось, а native js не поддавался.
Спасибо за видео!
Юзал свой jQuery, до фетча все никак не добирался, и наконец у тебя вышел такой видосик, хоть уже что-то и есть про фетч, но тут более понятней и подробней. Пасеба , сэр!
Я бы всё же советовал пользовать axios, если хоть какая-то совместимость в проекте нужна, он такой же удобный, но использует xhr.
@@astrotrain как axios использовать на фронте?
@@user-gu5ir3zs4v в смысле как?
axios({
url,
method,
data
}).then(({data}) => {
console.log(data);
})
@@astrotrain так а как его подключить это же npm модуль
@@user-gu5ir3zs4v если есть вебпак просто импортом, если нет - то как жуквери
github.com/axios/axios#installing
По-моему еще ЛУЧШЕ все это рассказать просто не возможно. Большое спасибо за видео! Мне кажется, если вы сейчас начнете выкладывать обучающие видео о том, как правильно строить дома - я подамся в строители, потому что ваши видео смотреть - одно удовольствие ! :D :)))
Очень крутой канал! предлагаю рассказать про Регулярные выражения мне кажется интересная тема.
спасибо огромное! очень помог!
Спасибо, здорово
всё круто, лайк подписка! Было бы ещё круче если б делал пометки // хотя б простенькие) спасибо)
крутая подача! все четко, без H2O
Согласен)
Даже под C2H5OH хорошо заходит)
Поддерживаю, что нужен видеоурок про rest & spread.
Как раз завтра будет)
Владилен вы растете на наших глазах))))) в предыдущих уроках у объекта Владилен поле age был ровен 25))))
кстати, привет из 2020
стареет потихоньку
Отличный урок, проходит со свистом ))
Давайте больше таких видео
Дарова
Большое спасибо
ТОП урок!!!
зачетный ролик! работать с XHR классом как по мне проще для понимания чем с fetch(). классе все явно указывается а в fetch неявные промисы и прочие методы, мне нубу без доков не разобраться.
Лайк однозначно)
Да!! просто нечеловеческое спасибо!!! а скажешь что за шаблон подсветки кода у тебя установлен?
Очень круто
спасибо, помог
Спасибо!
Владилен, спасибо за видео!!
Но как всегда есть вопрос ведь странные ситуацию случаются, а ты немного говоришь о том как обрабатывать ошибки.
Например, когда сервис упал он вместо ошибки начинает отдавать свою странницу 404, вместо json, но по каким-то истерическим причинам ее статус 200.
Что делать в таких случаях?
Очень доступно. Но подскажите как использовать полученные данные, где они хранятся и т.п.
Спасибо ♥
Лайк не глядя!
Согласен, лайк
Благодарю!!
Наш инстинкт . Когда хотим создавать объект, моментально в голову приходит "key" name и age .
на самом деле ты читаешь мои мысли.. хотел попросить урок по fetch и вот спс тебе
СПАСИБО!
Я реально испугался, когда ты не поставил точку с запятой, а потом вспомнил - это же js......)
СПАСИБО!!!
пару заметок, если кто-то захочет постестироват запросы через свой 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);
Блин спасибо большущее)))))
Спасибо!!!
С этим сайтом json placeholder понятно, а как быть с локальным своим сайтом? Там что должно быть, в самом простом варианте, файл index.php и в нем что должно быть? Чтобы мы могли получить данные.
И еще, т. к. тут упоминается ajax, то что тут рассматривается, мы получаем данные с сервера, я например хочу сделать, чтобы эти полученные данные отображались на странице сайта, то они будут добавляться Без перезагрузки страницы?
Владилен, хотелось бы узнать полное взаимодействие базы, сервера, и приложения. Давай разберём остальные методы зачем они нужны и когда используются
Присоединяюсь, на практике только гет и пост юзал.
21:00 Fetch(Get)
25:00 Fetch (POST)
Ты хороший человек. Спасибо.
Видео помогло, спасибо, + к карме.
Владилен, спасибо за урок!
Не могли бы подсказать, где проблема в следующей ситуации: POST запрос при загрузке файлов отрабатывается правильно, но если в названии файла есть кириллица, то вместо нее приходит абракадабра. Попробовал и fetch, и XMLHttpRequest. FormData формируется правильно. С postman тестирование проходит без ошибок.
с уважением,
Юрий
Fetch уже был в Уроке8. Вообще плейлист как-то не структурирован, всё намешано в куче, вроде смотришь с 1 урока, а потом все темы в разнобой
Спасибо за полезный урок!
Подскажите, пожалуйста, почему после команд до .onload не ставятся в конце ";"?
Нужно ли ставить точку с запятой(если да, то всегда ли) или нет и почему?
@@user-lm8py5rb4m тоже вижу, но мне интересно почему
спасибо
А можно спросить? 😅
А если в джаваскрипте "из коробки" есть XHR и Fetch, зачем нужны либы типа axios?
видео огонь!
Правильное решение это нужно создавать асинхронную функцию и ждать ответа до полного выполнения await и потом уже обрабатывать данные и тогда вам не нужно будет работать с проммисами.
Подскажи, пожалуйста, как так сделать, в названия методов внутри () скобок писались, как у тебя допустим
sendRequest ( method: "POST") - как сделать так чтоб "method" показывался?
это расширение какое-то ??
Подскажите плиз, а че в js, уже не нужны точка с запятой в конце команд?? спасибо!
Thank you! Cnocnbo!
Сnacubo! or Spasibo! or Спасибо! or Cnacu6(six)o!
Thank u very much, really understandable. U just explained things in so clear way
Можно сделать это всё в пару строк кода. Используя Async, await. Как раз вы уже снимали видео про них.
Есть сссылка ?
Привет. А будет материал про ООП?
лучший
Спасибо за видео.
Можешь сказать, есть ли случаи, когда fetch нежелательно использовать, а лучше придерживаться отправки/получения данных с помощью чистого (либо с исп-м Промисов) XMLHttpRequest (XHR) + Ajax?
Не то чтобы нежелательно, а не получится применить fetch в том случае, когда нужно отследить "процент" загрузки файла
@@user-oy7rm2kz4z то есть с помощью fetch не получится например делать полоски прогресса загрузки и тд?
@@vitaliy794 да. Для таких случаев используют api xmlhttprequest
@@user-oy7rm2kz4z А можете пожалуйста подсказать еще. Вот когда получил данные и что бы пройтись по массиву например map это делается внутри then типо такого
sendRequest('GET', url)
.then(data => {return data.map(item => {
arrMass.innerHTML += `
${item.title}
`
})})
или как то по другому можно данные выводить?