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

В этом цикле роликов мы поговорим о том, как работать с сервером при помощи языка программирования 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...

[@XXTRIONXX]

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

[@xdayx53]

настолько годно, это просто...................

[@denisbielishev]

Не пойму где подписчики? Очень хорошая подача материала - без лишней воды, все четко и грамотно.

[@Dmytro-q3o]

Супер!

[@efimkapliy6370]

Толковое видео, автор всё раскладывает по полочкам!)

[@Верстачок-и6с]

Хоспаде, наконец-то! Лучшее объяснение принципа работы xhr. Спасибо!

[@ДанилоНовосад-ь7х]

Большое спасибо, по вашему курсу и таблице js board я начал изучать JavaScript. Пожалуйста делайте больше таких видео))!

[@АсанТурдукулов-и9б]

Урок замечательный, огромное СПАСИБО!

[@dmitriystoyanov933]

Как обычно круто! И еще.. на карточках есть Михаил Добкин. "Все х-ня, Миша, давай по новой" :)) Кому 30+ должны помнить эту дичь)

[@РамизМирзаев-х5к]

Как всегда супер 😎

[@Serhii_P.]

Спасибо за понятное объяснение

[@yodapunishes]

Просто огонь! Спасибо! То что нужно было питонисту, далёкому от фронта)

[@t-moor6668]

У тебя очень хорошая дикция, тебя приятно слушать

[@campfireschool]

T-MOOR 256 спасибо :)

[@Andrii_Vin]

👍 круто

[@amirsaulebekov3282]

братан ты просто мой спаситель, спс огромное

[@BYD-atto3]

Круто, для новичков в технологии аякс просто находка. Единственное что бросилось в глаза так это создание константы request, моё мнение таково, возможно следует заменить константу на xhr так как она меньше запутает новичков при JSON.parse(request.response); В целом очень познавательно, и я думаю многие новички и не только, смогут глубже понять общие принципы аякса. Спасибо за ролик.

[@dzhilinsamara]

Очень очень вовремя видео вышло, делаю курсовую в универе с помощью вэба, скорее бы следующие видео)

[@campfireschool]

Даниил Жилин в воскресенье выйдет)

[@АлександрЮдин-щ3в]

Чтож, давольно таки не плохая подача материала. Подписываюсь, ставлю лайкос. Буду палить новые видосы. Успехов)

[@Programming-w7s]

О мужик, ты из Харькова. Респект тебе из киевской) Понял по городу выбранному в розетке )

[@thekit9524]

ХГ тоже на месте!

[@mikaelgevorgyan4521]

Очень важную тему на конецто нашел у тебя,не осуждаю других,каждый по своему объясняет,но самое важное,что каждый из вас старается помочь тем кто в будущем займется этим делом=)),может и вместе с вами будет работать.Я когда шел на курсы=)) по js сейчас уже на последнем месяце на React.js.Но про эту тему времени у нас было мало,чтоб хорошенько все изучить.Меня лично волновало вот именно вот работа с сервером =))).Единственное чего боялся больше всего.Вот писать логику,код,что угодна =))),верстать нет проблем,но вот,как работа с сервером это дело гораздо серьезная,потому что там реально не шутки,ты работаешь с дата базой,с данными чужими и даже может место их своя родня(в зависимости от сайта,потому что сайт может иметь дело с деньгами,важной информацией и все такое,и не кто не хочет,чтоб было проблем).Так сказать люди не должны быть в страхе от того,что потеряют,что-то из-за не опытных рук.Так все ломается,на твой сайт или еще чей-то будут подходить не доверяя и вообще может проект упадет на дно.Очень спасибо о_О,что такую тему поднял!Молодец!

[@fantast2568]

Очень круто, классная подача, спасибо. Интересно сколько нужно практики чтобы все это делать так же легко и быстро 🙂

[@taran_dm]

Спасибо! отличная практика!

[@dimitridoroshko]

Спасибо, бро

[@vadimoleynik3563]

Хорошая подача материала! Советую

[@unselfishpodcast888]

Классное обьяснение на самом деле, наконец-то разобрался с запросами, сейчас посмотрел половину видео и не понял только одного - зачем создавать функцию req() и сразу после этого ее вызывать? на 19:24 понятно о чем я. Зачем мы оборачиваем функцию (которую выполнит обработчик) в еще одну функцию (которая req()) и сразу ее вызываем? Обработчик же и просто код может выполнить.

Для этого есть много причин, один из них для того что бы запустить функцию req() с помощью обработчика событий, то есть при нажатии на кнопку. Весь код помещен на функцию req(), а req() в свою очередь указывается вторым параметром обработчика событий addEventListener, напоминаю что первый параметр обработчика событий это действие при которой должен срабатывать второй параметр, например клик, а второй параметр кусок кода который должен срабатывать при нажатии на клик, то есть при активации первого параметра. А что бы в качестве второго параметра не указать огромный код, код оборачивают в функцию, в данном примере в функцию req(), и в качестве второго параметра обработчика события указывается именно эта функция, который сохраняет огромный кусок кода, то есть addEventListener(''click'', req); в таком случаем при клике будет запускаться функция req(), а это в свою очередь приведет к выполнению кода внутри функции req();

[@unselfishpodcast888]

@ я понимаю как работает обработчик, да и запрос я бы в Promise оборачивал. Но в качестве второго параметра туда не req() передано, а анонимная функция, внутри которой уже req. Я об этом

[@КостяКреон]

Поставил лайк, всё было правильно сказано....Благодарю!

[@sia4281]

Четко объясняешь!

[@viacheslav7421]

Спасибо большое, лучшее обьяснение этой темы на ютубе👍

[@pitbrest]

Такие уроки это именно то что мне сейчас нужно. Ты реально хорошо объясняешь, спасибо. Но все же добавлю, после такого изумительного объяснения, в самом конце появляется this.remove() ... 10 мин думал почему this стало кнопкой, наверное из за того что по ней последней кликнули соответственно в this она и зависла?

[@SharapoffEdward]

Событие произошло на кнопке, т.е. после нажатия на неё, значит this в данном случае ссылается на объект кнопки.

[@Кеша-р3я]

гений

[@akabussola4060]

Спасибо! Спасибо спасибо спасибо!!! °˖✧◝(⁰▿⁰)◜✧˖°

[@marshall366]

200 лайков и ни одного диза. Заслуженно

[@badwombat]

like!!

[@serhiigerkhard6745]

Иван, большое спасибо за ценный урок, с четким планом и детальными объяснениями! Единственный вопрос: как это на реальном сервере применить?) Посоветуйте, пожалуйста, с чего копнуть следует и в какую сторону двигаться? Может есть курсы (бесплатные/платные) по настройке реального сервера и работе с ним при помощи js?

[@campfireschool]

Sergij Gerkhard нужно начать с того, на чем вы будете писать бэк: php, node.js, python... Ну, могу сказать, что в практике создания своего fullstack приложения на react (ссылка в описании) мы создаем бэк на php. Можно посмотреть его)

[@serhiigerkhard6745]

@@campfireschool Спасибо, попробую ваш курс!

[@milter2539]

Создаю большой динамический проект и ваш урок оказался как нельзя кстати! Редко пишу такое, но спасибо за ваши старания)

[@campfireschool]

Рад помочь)

[@СултанЕсболатов]

Круто!

[@kot19741]

У меня говорит: ошибка безопасности PSSecurityE[ception, + FullyQalifiedErrorID: UnautorizedAccess Что делать в этом случае ?

[@ilyasmukashev1713]

не выводятся некоторые фото, только первая и последняя отображается. в чем причина?

[@nurbolot02]

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

[@КостяКреон]

Иван, есть вопрос по поводу.....а если я захожу на сервер, и мне нужно указать экаунт и пароль к моей базе данных, как тогда построить запрос .... Тоже через XMLHttpReqwest?

[@campfireschool]

Да, отправляем post запрос

[@kannsky8812]

охренеть, я в шоке от такого контента.

[@ХалидИбнВалид-т1э]

Можите пожалуста скинуть сылку на готовый мотериал? )) не могу найти ошибку

[@СергейКомыза]

А почему этот код не работает, если json файл выложить на хостинг ?

[@ВадимЗаманов-г3ю]

Иван, привет! А каким образом this.remove() удаляет кнопку? Не совсем понял этот момент

[@SharapoffEdward]

Событие произошло на кнопке, т.е. после нажатия на неё, значит this в данном случае ссылается на объект кнопки.

[@МарковДмитрий-х5ф]

Извините, не подскажете что это может значить? 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]

Марков Дмитрий вам нужно донастроить систему. Вот гайд: winnote.ru/security/160-windows-powershell.-vypolnenie-scenariev-otklyucheno-v-etoy-sisteme.html

[@МарковДмитрий-х5ф]

@@campfireschool спасибо большое за информацию и уроки

[@ches_ter6842]

@@campfireschool, посмотрел урок, все получилось запустить/настроить. Немного в голове сумбур в том плане что мы получаем данные с сервера/с базы данных.Понятно то что физически наблюдается, а именно - файл index.html (наша страничка), файл js.script (наш скрипт с логикой), файл db.json (база данных с нашими людьми) ну а сам сервер то где? Это вот тот самый порт - port: 3000, который мы настраивали в самом начале? И через этот порт общается наш скрипт с базой данных? Извиняюсь, пытался спросить максимально понятно. Заранее спасибо!

[@campfireschool]

@@ches_ter6842 да, сервер это то, что мы настраивали в начале, например open server

[@ches_ter6842]

@@campfireschool спасибо!

[@galievramil1169]

А разве от get -запроса нам не стринг приходит, а мы её потом парсим в обычный объект, чтобы работать ней в js?

[@campfireschool]

Зависит от сервера: что он нам вернет - с тем и будет работать) Это может быть и строка, и json и тп.

[@404alex_eu]

при попытке запуска, в консоли пусто, если через run в vs code, отображается ошибка "ReferenceError: window is not defined", подскажите пожалуйста как решить...

[@campfireschool]

Александр Шляховой значит где-то проблема в коде. Лучше где-то разместить его(codepen...) и прислать ссылку)

[@404alex_eu]

@@campfireschool Спасибо большое! ссылка codepen.io/alex_a_nder/pen/abONZPy

[@osmon-11]

Никто не заметил подозрительный ключ в хешах?

[@ioannhide3355]

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

[@sia4281]

Ссылки двух фоток недействительны

[@alekspianov1668]

Поменяйте на любые другие ссылки.

[@mr.marten8235]

gender :)

[@НиколайПанкратов-к8о]

Что за цены?😱😱 ноутбуки по 5к гривен😭😭😭😭😭😭😭😭😭😭

[@nataly1770]

Контент вроде хороший, но зачем так тараторить автор.

[@michaeldevichenskiy4588]

Как всегда на высоте .

[@ilyaprotsenko1023]

Спасибо тебе огромное!!!