Тёмный

Как работать с сервером в JavaScript ч.1 | AJAX 

Campfire School | Ivan Petrychenko
Подписаться 26 тыс.
Просмотров 34 тыс.
50% 1

В этом цикле роликов мы поговорим о том, как работать с сервером при помощи языка программирования JavaScript. Мы разберем технологию асинхронных запросов AJAX и чем её можно реализовать: XMLHttpRequest, Fetch API, axios.
Ссылки:
Скачать материалы для работы:
drive.google.c...
Node.js - nodejs.org/en/
MAMP - www.mamp.info/en/
Open Server - ospanel.io/
Json-server - www.npmjs.com/...
Коды ответа HTTP - developer.mozi...
XMLHttpRequest - developer.mozi...
Методы HTTP запроса - developer.mozi...
Одни из лучших и доступных курсов по JavaScript, верстке (html/css), React, Wordpress и многому другому вы найдете на campfire-schoo...
Ссылки:
Мой инстаграм - / petrychenko_ivan
Телеграм-канал: t.me/petrychen...
Телеграм-канал с общением: t.me/+U1yEc5iG...

Опубликовано:

 

21 ноя 2019

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 79   
@XXTRIONXX
@XXTRIONXX 4 года назад
Тот случай, когда автор заранее позаботился о тебе, и ускорил видео для комфортного и не скучного просмотра. Вань - ты топ!
@user-gu4lt4qw6k
@user-gu4lt4qw6k 2 года назад
Супер!
@user-mi4qz2ng4y
@user-mi4qz2ng4y 4 года назад
Большое спасибо, по вашему курсу и таблице js board я начал изучать JavaScript. Пожалуйста делайте больше таких видео))!
@user-lc1gu9fo6j
@user-lc1gu9fo6j 4 года назад
Хоспаде, наконец-то! Лучшее объяснение принципа работы xhr. Спасибо!
@denisbielishev
@denisbielishev 4 года назад
Не пойму где подписчики? Очень хорошая подача материала - без лишней воды, все четко и грамотно.
@efimkapliy6370
@efimkapliy6370 11 месяцев назад
Толковое видео, автор всё раскладывает по полочкам!)
@xdayx53
@xdayx53 9 месяцев назад
настолько годно, это просто...................
@yodapunishes
@yodapunishes 4 года назад
Просто огонь! Спасибо! То что нужно было питонисту, далёкому от фронта)
@dmitriystoyanov933
@dmitriystoyanov933 4 года назад
Как обычно круто! И еще.. на карточках есть Михаил Добкин. "Все х-ня, Миша, давай по новой" :)) Кому 30+ должны помнить эту дичь)
@dzhilinsamara
@dzhilinsamara 4 года назад
Очень очень вовремя видео вышло, делаю курсовую в универе с помощью вэба, скорее бы следующие видео)
@campfireschool
@campfireschool 4 года назад
Даниил Жилин в воскресенье выйдет)
@user-fv5kc5dy3r
@user-fv5kc5dy3r 11 месяцев назад
Урок замечательный, огромное СПАСИБО!
@amirsaulebekov3282
@amirsaulebekov3282 3 года назад
братан ты просто мой спаситель, спс огромное
@user-ml7dx4mg9t
@user-ml7dx4mg9t 4 года назад
Как всегда супер 😎
@user-sk1fe4do2d
@user-sk1fe4do2d 4 года назад
Чтож, давольно таки не плохая подача материала. Подписываюсь, ставлю лайкос. Буду палить новые видосы. Успехов)
@Serhii_P.
@Serhii_P. 2 года назад
Спасибо за понятное объяснение
@viacheslav7421
@viacheslav7421 4 года назад
Спасибо большое, лучшее обьяснение этой темы на ютубе👍
@Andrii_Vin
@Andrii_Vin 4 года назад
👍 круто
@fantast2568
@fantast2568 4 года назад
Очень круто, классная подача, спасибо. Интересно сколько нужно практики чтобы все это делать так же легко и быстро 🙂
@t-moor6668
@t-moor6668 4 года назад
У тебя очень хорошая дикция, тебя приятно слушать
@campfireschool
@campfireschool 4 года назад
T-MOOR 256 спасибо :)
@mikaelgevorgyan4521
@mikaelgevorgyan4521 4 года назад
Очень важную тему на конецто нашел у тебя,не осуждаю других,каждый по своему объясняет,но самое важное,что каждый из вас старается помочь тем кто в будущем займется этим делом=)),может и вместе с вами будет работать.Я когда шел на курсы=)) по js сейчас уже на последнем месяце на React.js.Но про эту тему времени у нас было мало,чтоб хорошенько все изучить.Меня лично волновало вот именно вот работа с сервером =))).Единственное чего боялся больше всего.Вот писать логику,код,что угодна =))),верстать нет проблем,но вот,как работа с сервером это дело гораздо серьезная,потому что там реально не шутки,ты работаешь с дата базой,с данными чужими и даже может место их своя родня(в зависимости от сайта,потому что сайт может иметь дело с деньгами,важной информацией и все такое,и не кто не хочет,чтоб было проблем).Так сказать люди не должны быть в страхе от того,что потеряют,что-то из-за не опытных рук.Так все ломается,на твой сайт или еще чей-то будут подходить не доверяя и вообще может проект упадет на дно.Очень спасибо о_О,что такую тему поднял!Молодец!
@taran_dm
@taran_dm 3 года назад
Спасибо! отличная практика!
@user-yw6bj5oe9w
@user-yw6bj5oe9w 3 года назад
Поставил лайк, всё было правильно сказано....Благодарю!
@michaeldevichenskiy4588
@michaeldevichenskiy4588 4 года назад
Как всегда на высоте .
@vadimoleynik3563
@vadimoleynik3563 4 года назад
Хорошая подача материала! Советую
@Lembergevgeny
@Lembergevgeny 4 года назад
Круто, для новичков в технологии аякс просто находка. Единственное что бросилось в глаза так это создание константы request, моё мнение таково, возможно следует заменить константу на xhr так как она меньше запутает новичков при JSON.parse(request.response); В целом очень познавательно, и я думаю многие новички и не только, смогут глубже понять общие принципы аякса. Спасибо за ролик.
@user-ov7gm7ey6l
@user-ov7gm7ey6l 4 года назад
О мужик, ты из Харькова. Респект тебе из киевской) Понял по городу выбранному в розетке )
@thekit9524
@thekit9524 2 года назад
ХГ тоже на месте!
@dimitridoroshko
@dimitridoroshko 4 года назад
Спасибо, бро
@sia4281
@sia4281 3 года назад
Четко объясняешь!
@milter2539
@milter2539 4 года назад
Создаю большой динамический проект и ваш урок оказался как нельзя кстати! Редко пишу такое, но спасибо за ваши старания)
@campfireschool
@campfireschool 4 года назад
Рад помочь)
@ilyaprotsenko1023
@ilyaprotsenko1023 3 года назад
Спасибо тебе огромное!!!
@akabussola4060
@akabussola4060 4 года назад
Спасибо! Спасибо спасибо спасибо!!! °˖✧◝(⁰▿⁰)◜✧˖°
@user-jj3zm1jx7z
@user-jj3zm1jx7z 3 года назад
nice
@marshall366
@marshall366 4 года назад
200 лайков и ни одного диза. Заслуженно
@badwombat
@badwombat 4 года назад
like!!
@user-en2xc4ls9v
@user-en2xc4ls9v 3 года назад
гений
@unselfishpodcast888
@unselfishpodcast888 2 года назад
Классное обьяснение на самом деле, наконец-то разобрался с запросами, сейчас посмотрел половину видео и не понял только одного - зачем создавать функцию req() и сразу после этого ее вызывать? на 19:24 понятно о чем я. Зачем мы оборачиваем функцию (которую выполнит обработчик) в еще одну функцию (которая req()) и сразу ее вызываем? Обработчик же и просто код может выполнить.
2 года назад
Для этого есть много причин, один из них для того что бы запустить функцию req() с помощью обработчика событий, то есть при нажатии на кнопку. Весь код помещен на функцию req(), а req() в свою очередь указывается вторым параметром обработчика событий addEventListener, напоминаю что первый параметр обработчика событий это действие при которой должен срабатывать второй параметр, например клик, а второй параметр кусок кода который должен срабатывать при нажатии на клик, то есть при активации первого параметра. А что бы в качестве второго параметра не указать огромный код, код оборачивают в функцию, в данном примере в функцию req(), и в качестве второго параметра обработчика события указывается именно эта функция, который сохраняет огромный кусок кода, то есть addEventListener(''click'', req); в таком случаем при клике будет запускаться функция req(), а это в свою очередь приведет к выполнению кода внутри функции req();
@unselfishpodcast888
@unselfishpodcast888 2 года назад
@ я понимаю как работает обработчик, да и запрос я бы в Promise оборачивал. Но в качестве второго параметра туда не req() передано, а анонимная функция, внутри которой уже req. Я об этом
@user-dj5sk4oj6w
@user-dj5sk4oj6w 4 года назад
Круто!
@pitbrest
@pitbrest 2 года назад
Такие уроки это именно то что мне сейчас нужно. Ты реально хорошо объясняешь, спасибо. Но все же добавлю, после такого изумительного объяснения, в самом конце появляется this.remove() ... 10 мин думал почему this стало кнопкой, наверное из за того что по ней последней кликнули соответственно в this она и зависла?
@SharapoffEdward
@SharapoffEdward 7 месяцев назад
Событие произошло на кнопке, т.е. после нажатия на неё, значит this в данном случае ссылается на объект кнопки.
@ilyasmukashev1713
@ilyasmukashev1713 Год назад
не выводятся некоторые фото, только первая и последняя отображается. в чем причина?
@kannsky8812
@kannsky8812 4 года назад
охренеть, я в шоке от такого контента.
@kot19741
@kot19741 Год назад
У меня говорит: ошибка безопасности PSSecurityE[ception, + FullyQalifiedErrorID: UnautorizedAccess Что делать в этом случае ?
@serhiigerkhard6745
@serhiigerkhard6745 4 года назад
Иван, большое спасибо за ценный урок, с четким планом и детальными объяснениями! Единственный вопрос: как это на реальном сервере применить?) Посоветуйте, пожалуйста, с чего копнуть следует и в какую сторону двигаться? Может есть курсы (бесплатные/платные) по настройке реального сервера и работе с ним при помощи js?
@campfireschool
@campfireschool 4 года назад
Sergij Gerkhard нужно начать с того, на чем вы будете писать бэк: php, node.js, python... Ну, могу сказать, что в практике создания своего fullstack приложения на react (ссылка в описании) мы создаем бэк на php. Можно посмотреть его)
@serhiigerkhard6745
@serhiigerkhard6745 4 года назад
@@campfireschool Спасибо, попробую ваш курс!
@user-mr4yt7vr9r
@user-mr4yt7vr9r Год назад
Иван, привет! А каким образом this.remove() удаляет кнопку? Не совсем понял этот момент
@SharapoffEdward
@SharapoffEdward 7 месяцев назад
Событие произошло на кнопке, т.е. после нажатия на неё, значит this в данном случае ссылается на объект кнопки.
@nurbolot02
@nurbolot02 2 года назад
у меня проблема ajax когда я отправляю запрос сайт перезагружается и имя телефона пишется во всех формах все url будет можете мне помочь ?
@user-df4lw9dx5v
@user-df4lw9dx5v 3 года назад
А почему этот код не работает, если json файл выложить на хостинг ?
@user-yw6bj5oe9w
@user-yw6bj5oe9w 3 года назад
Иван, есть вопрос по поводу.....а если я захожу на сервер, и мне нужно указать экаунт и пароль к моей базе данных, как тогда построить запрос .... Тоже через XMLHttpReqwest?
@campfireschool
@campfireschool 3 года назад
Да, отправляем post запрос
@user-xd5td7px9t
@user-xd5td7px9t 4 года назад
Можите пожалуста скинуть сылку на готовый мотериал? )) не могу найти ошибку
@galievramil1169
@galievramil1169 3 года назад
А разве от get -запроса нам не стринг приходит, а мы её потом парсим в обычный объект, чтобы работать ней в js?
@campfireschool
@campfireschool 3 года назад
Зависит от сервера: что он нам вернет - с тем и будет работать) Это может быть и строка, и json и тп.
@404alex_eu
@404alex_eu 4 года назад
при попытке запуска, в консоли пусто, если через run в vs code, отображается ошибка "ReferenceError: window is not defined", подскажите пожалуйста как решить...
@campfireschool
@campfireschool 4 года назад
Александр Шляховой значит где-то проблема в коде. Лучше где-то разместить его(codepen...) и прислать ссылку)
@404alex_eu
@404alex_eu 4 года назад
@@campfireschool Спасибо большое! ссылка codepen.io/alex_a_nder/pen/abONZPy
@ioannhide3355
@ioannhide3355 4 года назад
очень быстро говоришь, куда так торопиться... а в общем видео очень полезное
@mr.marten8235
@mr.marten8235 4 года назад
gender :)
@user-xw1ou7nd5p
@user-xw1ou7nd5p 4 года назад
Извините, не подскажете что это может значить? PS C:\Users\Dima> json-server db.json json-server : Невозможно загрузить файл C:\Users\Dima\AppData\Roaming pm\json-server.ps1, так как выполнение сценариев отключено в это й системе. Для получения дополнительных сведений см. about_Execution_Policies по адресу https:/go.microsoft.com/fwlink/?LinkID=135170. строка:1 знак:1 + json-server db.json + ~~~~~~~~~~~ + CategoryInfo : Ошибка безопасности: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess
@campfireschool
@campfireschool 4 года назад
Марков Дмитрий вам нужно донастроить систему. Вот гайд: winnote.ru/security/160-windows-powershell.-vypolnenie-scenariev-otklyucheno-v-etoy-sisteme.html
@user-xw1ou7nd5p
@user-xw1ou7nd5p 4 года назад
@@campfireschool спасибо большое за информацию и уроки
@ches_ter6842
@ches_ter6842 3 года назад
@@campfireschool, посмотрел урок, все получилось запустить/настроить. Немного в голове сумбур в том плане что мы получаем данные с сервера/с базы данных.Понятно то что физически наблюдается, а именно - файл index.html (наша страничка), файл js.script (наш скрипт с логикой), файл db.json (база данных с нашими людьми) ну а сам сервер то где? Это вот тот самый порт - port: 3000, который мы настраивали в самом начале? И через этот порт общается наш скрипт с базой данных? Извиняюсь, пытался спросить максимально понятно. Заранее спасибо!
@campfireschool
@campfireschool 3 года назад
@@ches_ter6842 да, сервер это то, что мы настраивали в начале, например open server
@ches_ter6842
@ches_ter6842 3 года назад
@@campfireschool спасибо!
@osmon-11
@osmon-11 4 года назад
Никто не заметил подозрительный ключ в хешах?
@sia4281
@sia4281 3 года назад
Ссылки двух фоток недействительны
@alekspianov1668
@alekspianov1668 3 года назад
Поменяйте на любые другие ссылки.
@user-eh7no3me3x
@user-eh7no3me3x 5 месяцев назад
Что за цены?😱😱 ноутбуки по 5к гривен😭😭😭😭😭😭😭😭😭😭
@nataly1770
@nataly1770 Год назад
Контент вроде хороший, но зачем так тараторить автор.
Далее
Вся Правда Про Хазяевов !
41:02
Просмотров 2,2 млн
КАК РАБОТАЕТ БРАУЗЕР?
45:23
Просмотров 135 тыс.
ПРОГРАММИСТЫ! ВСЕ СЮДА...
14:25
Просмотров 336 тыс.