Как работать с сервером в JavaScript ч.1 | AJAX
HTML-код
- Опубликовано: 21 ноя 2019
- В этом цикле роликов мы поговорим о том, как работать с сервером при помощи языка программирования JavaScript. Мы разберем технологию асинхронных запросов AJAX и чем её можно реализовать: XMLHttpRequest, Fetch API, axios.
Ссылки:
Скачать материалы для работы:
drive.google.com/open?id=1zhb...
Node.js - nodejs.org/en/
MAMP - www.mamp.info/en/
Open Server - ospanel.io/
Json-server - www.npmjs.com/package/json-se...
Коды ответа HTTP - developer.mozilla.org/ru/docs...
XMLHttpRequest - developer.mozilla.org/ru/docs...
Методы HTTP запроса - developer.mozilla.org/ru/docs...
Одни из лучших и доступных курсов по JavaScript, верстке (html/css), React, Wordpress и многому другому вы найдете на campfire-school.com/
Ссылки:
Мой инстаграм - / petrychenko_ivan
Телеграм-канал: t.me/petrychenko_ivan
Телеграм-канал с общением: t.me/+U1yEc5iGptY6ghY_
![Moneybagg Yo - WHISKEY WHISKEY [feat. Morgan Wallen] (Official Audio)](http://i.ytimg.com/vi/kJamyq0WplE/mqdefault.jpg)
Тот случай, когда автор заранее позаботился о тебе, и ускорил видео для комфортного и не скучного просмотра.
Вань - ты топ!
Хоспаде, наконец-то! Лучшее объяснение принципа работы xhr. Спасибо!
Большое спасибо, по вашему курсу и таблице js board я начал изучать JavaScript. Пожалуйста делайте больше таких видео))!
Просто огонь! Спасибо! То что нужно было питонисту, далёкому от фронта)
Толковое видео, автор всё раскладывает по полочкам!)
Урок замечательный, огромное СПАСИБО!
Чтож, давольно таки не плохая подача материала. Подписываюсь, ставлю лайкос. Буду палить новые видосы. Успехов)
Не пойму где подписчики? Очень хорошая подача материала - без лишней воды, все четко и грамотно.
Как всегда супер 😎
Как всегда на высоте .
Хорошая подача материала! Советую
братан ты просто мой спаситель, спс огромное
У тебя очень хорошая дикция, тебя приятно слушать
T-MOOR 256 спасибо :)
Поставил лайк, всё было правильно сказано....Благодарю!
Очень очень вовремя видео вышло, делаю курсовую в универе с помощью вэба, скорее бы следующие видео)
Даниил Жилин в воскресенье выйдет)
настолько годно, это просто...................
Спасибо за понятное объяснение
Спасибо! отличная практика!
Как обычно круто! И еще.. на карточках есть Михаил Добкин. "Все х-ня, Миша, давай по новой" :)) Кому 30+ должны помнить эту дичь)
Очень круто, классная подача, спасибо. Интересно сколько нужно практики чтобы все это делать так же легко и быстро 🙂
Очень важную тему на конецто нашел у тебя,не осуждаю других,каждый по своему объясняет,но самое важное,что каждый из вас старается помочь тем кто в будущем займется этим делом=)),может и вместе с вами будет работать.Я когда шел на курсы=)) по js сейчас уже на последнем месяце на React.js.Но про эту тему времени у нас было мало,чтоб хорошенько все изучить.Меня лично волновало вот именно вот работа с сервером =))).Единственное чего боялся больше всего.Вот писать логику,код,что угодна =))),верстать нет проблем,но вот,как работа с сервером это дело гораздо серьезная,потому что там реально не шутки,ты работаешь с дата базой,с данными чужими и даже может место их своя родня(в зависимости от сайта,потому что сайт может иметь дело с деньгами,важной информацией и все такое,и не кто не хочет,чтоб было проблем).Так сказать люди не должны быть в страхе от того,что потеряют,что-то из-за не опытных рук.Так все ломается,на твой сайт или еще чей-то будут подходить не доверяя и вообще может проект упадет на дно.Очень спасибо о_О,что такую тему поднял!Молодец!
Спасибо большое, лучшее обьяснение этой темы на ютубе👍
Четко объясняешь!
Супер!
Спасибо, бро
👍 круто
Круто, для новичков в технологии аякс просто находка. Единственное что бросилось в глаза так это создание константы request, моё мнение таково, возможно следует заменить константу на xhr так как она меньше запутает новичков при JSON.parse(request.response);
В целом очень познавательно, и я думаю многие новички и не только, смогут глубже понять общие принципы аякса.
Спасибо за ролик.
Спасибо тебе огромное!!!
Спасибо! Спасибо спасибо спасибо!!! °˖✧◝(⁰▿⁰)◜✧˖°
Круто!
like!!
О мужик, ты из Харькова. Респект тебе из киевской) Понял по городу выбранному в розетке )
ХГ тоже на месте!
Создаю большой динамический проект и ваш урок оказался как нельзя кстати! Редко пишу такое, но спасибо за ваши старания)
Рад помочь)
200 лайков и ни одного диза. Заслуженно
nice
гений
Иван, большое спасибо за ценный урок, с четким планом и детальными объяснениями! Единственный вопрос: как это на реальном сервере применить?) Посоветуйте, пожалуйста, с чего копнуть следует и в какую сторону двигаться? Может есть курсы (бесплатные/платные) по настройке реального сервера и работе с ним при помощи js?
Sergij Gerkhard нужно начать с того, на чем вы будете писать бэк: php, node.js, python...
Ну, могу сказать, что в практике создания своего fullstack приложения на react (ссылка в описании) мы создаем бэк на php. Можно посмотреть его)
@@campfireschool Спасибо, попробую ваш курс!
Классное обьяснение на самом деле, наконец-то разобрался с запросами, сейчас посмотрел половину видео и не понял только одного - зачем создавать функцию req() и сразу после этого ее вызывать? на 19:24 понятно о чем я. Зачем мы оборачиваем функцию (которую выполнит обработчик) в еще одну функцию (которая req()) и сразу ее вызываем? Обработчик же и просто код может выполнить.
Для этого есть много причин, один из них для того что бы запустить функцию req() с помощью обработчика событий, то есть при нажатии на кнопку. Весь код помещен на функцию req(), а req() в свою очередь указывается вторым параметром обработчика событий addEventListener, напоминаю что первый параметр обработчика событий это действие при которой должен срабатывать второй параметр, например клик, а второй параметр кусок кода который должен срабатывать при нажатии на клик, то есть при активации первого параметра. А что бы в качестве второго параметра не указать огромный код, код оборачивают в функцию, в данном примере в функцию req(), и в качестве второго параметра обработчика события указывается именно эта функция, который сохраняет огромный кусок кода, то есть addEventListener(''click'', req); в таком случаем при клике будет запускаться функция req(), а это в свою очередь приведет к выполнению кода внутри функции req();
@ я понимаю как работает обработчик, да и запрос я бы в Promise оборачивал. Но в качестве второго параметра туда не req() передано, а анонимная функция, внутри которой уже req. Я об этом
Можите пожалуста скинуть сылку на готовый мотериал? )) не могу найти ошибку
охренеть, я в шоке от такого контента.
Такие уроки это именно то что мне сейчас нужно. Ты реально хорошо объясняешь, спасибо. Но все же добавлю, после такого изумительного объяснения, в самом конце появляется this.remove() ... 10 мин думал почему this стало кнопкой, наверное из за того что по ней последней кликнули соответственно в this она и зависла?
Событие произошло на кнопке, т.е. после нажатия на неё, значит this в данном случае ссылается на объект кнопки.
А почему этот код не работает, если json файл выложить на хостинг ?
не выводятся некоторые фото, только первая и последняя отображается. в чем причина?
Иван, есть вопрос по поводу.....а если я захожу на сервер, и мне нужно указать экаунт и пароль к моей базе данных, как тогда построить запрос ....
Тоже через XMLHttpReqwest?
Да, отправляем post запрос
У меня говорит: ошибка безопасности PSSecurityE[ception, + FullyQalifiedErrorID: UnautorizedAccess Что делать в этом случае ?
Иван, привет!
А каким образом this.remove() удаляет кнопку? Не совсем понял этот момент
Событие произошло на кнопке, т.е. после нажатия на неё, значит this в данном случае ссылается на объект кнопки.
у меня проблема ajax когда я отправляю запрос сайт перезагружается и имя телефона пишется во всех формах все url будет можете мне помочь ?
при попытке запуска, в консоли пусто, если через run в vs code, отображается ошибка "ReferenceError: window is not defined", подскажите пожалуйста как решить...
Александр Шляховой значит где-то проблема в коде. Лучше где-то разместить его(codepen...) и прислать ссылку)
@@campfireschool Спасибо большое! ссылка codepen.io/alex_a_nder/pen/abONZPy
А разве от get -запроса нам не стринг приходит, а мы её потом парсим в обычный объект, чтобы работать ней в js?
Зависит от сервера: что он нам вернет - с тем и будет работать) Это может быть и строка, и json и тп.
gender :)
Никто не заметил подозрительный ключ в хешах?
Извините, не подскажете что это может значить?
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
Марков Дмитрий вам нужно донастроить систему. Вот гайд: winnote.ru/security/160-windows-powershell.-vypolnenie-scenariev-otklyucheno-v-etoy-sisteme.html
@@campfireschool спасибо большое за информацию и уроки
@@campfireschool, посмотрел урок, все получилось запустить/настроить. Немного в голове сумбур в том плане что мы получаем данные с сервера/с базы данных.Понятно то что физически наблюдается, а именно - файл index.html (наша страничка), файл js.script (наш скрипт с логикой), файл db.json (база данных с нашими людьми) ну а сам сервер то где? Это вот тот самый порт - port: 3000, который мы настраивали в самом начале? И через этот порт общается наш скрипт с базой данных? Извиняюсь, пытался спросить максимально понятно. Заранее спасибо!
@@ches_ter6842 да, сервер это то, что мы настраивали в начале, например open server
@@campfireschool спасибо!
очень быстро говоришь, куда так торопиться... а в общем видео очень полезное
Ссылки двух фоток недействительны
Поменяйте на любые другие ссылки.
Что за цены?😱😱 ноутбуки по 5к гривен😭😭😭😭😭😭😭😭😭😭
Контент вроде хороший, но зачем так тараторить автор.