Веб-разработчики часто сталкиваются с необходимостью динамически обновлять страницы без полной перезагрузки. С этим хорошо справляется технология асинхронного обмена данными AJAX, однако я не нашел на просторах интернета простого мануала использования AJAX и решил создать его сам. В этой статье я собираюсь подробно показать взаимодействие фронтенда с AJAX и бекенда с Django, ограничившись минимумом кода. Статья больше рассчитана на новичков и станет отличной базой для дальнейшего развития в теме.
Ajax *
Asynchronous Javascript and XML
Новости
5 охранных систем для бизнеса в 2024 году
Всем привет! Я Дима, работаю закупщиком электронных компонентов и на досуге пишу статьи на Хабр.
Итак, ситуация: нам суперсрочно понадобилась охранная система. Мы находимся в маленьком БЦ, и к соседям пару дней назад пытался кто-то залезть. Конторка у нас небольшая, и я отвечаю практически за всю техническую часть.
Для выбора системы я анализировал параметры и изучал отзывы. Отобрал наиболее популярные охранные системы, которые первыми вышли в поисковике, и посмотрел — за что чаще всего люди их хвалят, а за что ругают. По ходу обзора делал заметки. Всего получилось 5 систем. В конце сводная таблица.
Все об охранных системах для дома в 2025 году
В 2016 году мы с мужем приобрели небольшой дом в Подмосковье. По охране сильно не заморачивались, так как у нас был сторож на поселок. А в 2022 к нам влезли воры: все что смогли — вынесли, что не смогли — сломали. Кто‑то из соседей вызвал полицию, но она приехала только через 50 минут.
Этим летом воры влезли к нашим соседям. После этого с мужем решили ставить охранную систему.
К вопросу подошли основательно: запросили КП; поспрашивали тех, кто уже поставил охрану; узнали, кто на каком оборудовании работает и, что лучше ставить для охраны дома. В итоге получился подробный разбор самого распространенного на рынке охранного оборудования с ценами. В конце статьи — таблица с кратким содержанием.
SPA приложение, без JS фреймворков и потери SEO в Bitrix
Создадим прототип SPA в Bitrix без использования популярных JS фреймворков и библиотек, все будет сделано средставами Bitrix.
И самое главное без потери серверного рендеринга и SEO страниц.
Истории
Пакетное действие SonataAdminBundle + Select2
Система очень гибкая и многими недооценённая, мол Sonata ограничивает администратора в действиях (представляет малый функционал панели администратора).
Если Вам нужно что-то иное, всегда можно дополнить или модернизировать уже существующие методы.
Безопасность Web Apps в Telegram ботах
16 апреля 2022 Telegram презентовал новую фичу - Web apps, с помощью которой можно открывать веб страницы в боте без перехода в браузер. Подробнее можно почитать в источнике https://core.telegram.org/bots/webapps.
Однозначно это удобная функция для пользователей и для разработчиков. Но, так как это веб приложение, можно просмотреть что под капотом. Telegram привел в качестве примера бота @DurgerKingBot, его и разберем.
AJAX: Шпаргалка по AJAX на jQuery
Всем привет в новой записи мы с вами разберём основные функции для Ajax запросов, которые позволяют передавать информацию с сайта в PHP скрипт без перезагрузки страницы.
Для работы Ajax запросов вам нужно подключить jQuery к вашему проекту. Ссылку на jQuery вы можете найти здесь.
Данный взяты с моего сайта Prog-Time.
Как из браузера отправлять команды в COM порт?
Столкнулся на днях с очень интересной задачей, на работе, мною же, внедрялась Система Быстрых Платежей по QR коду.
Ajax-запросы нативными средствами Joomla
Небольшая заметка о том, как делать ajax-запросы штатными средствами без использования дополнительных js-библиотек (jQuery, etc). Joomla 3 и Joomla 4 предоставляют небольшую обёртку для конструирования XMLHttpRequest. В целом синтаксис очень похож на тот же jQuery Ajax, поэтому заменить его будет очень легко.
В <head> страницы можно увидеть core.js, в котором есть немало любопытных функций для работы с фронтом на Joomla. Об одной из них (получение данных из php в js) писалось здесь: Разработка форм обратной связи для магазинов на Joomla 3. Для создания ajax-запросов нам пригодится Joomla.request.
Как работать с ошибками бизнес-логики через HTTP
Почти все разработчики так или иначе постоянно работают с api по http, клиентские разработчики работают с api backend своего сайта или приложения, а бэкендеры "дергают" бэкенды других сервисов, как внутренних, так и внешних. И мне кажется, одна из самых главных вещей в хорошем API это формат передачи ошибок. Ведь если это сделано плохо/неудобно, то разработчик, использующий это API, скорее всего не обработает ошибки, а клиенты будут пользоваться молчаливо ломающимся продуктом.
За 7 лет я как поддерживал множество legacy API, так и разрабатывал c нуля. И я поработал, наверное, с большинством стратегий по возвращению ошибок, но каждая из них создавала дискомфорт в той или иной мере. В последнее время я нащупал оптимальный вариант, о котором и хочу рассказать, но с начала расскажу о двух наиболее популярных вариантах.
Ajax, REST API OpenCart
В статье рассмотрим как устроены ajax запросы в OpenCart, в том числе запросы через api OpenCart, познакомимся с новым понятием front controller и немного коснемся темы ajax REST API.
Расширенный HTML
В этой статье хотел бы рассказать немного про библиотеку, первую версию которой я создал еще в конце прошлого года. Суть очень простая — расширить возможности языка HTML, чтобы можно было без JavaScript'а писать простые и рутинные вещи: отправка формы в json формате, загрузка HTML тимплейтов на определенную страницу(по сути модульная система для HTML через http/s запросы), турболинки(привет пользователям RoR), простая шаблонизация на основе ответов ajax запросов и немного еще.
Библиотека называется EHTML или Extended HTML. Основана она на небезызвестной идее веб компонентов. Она доступна на гитхабе, там довольно таки структурированная документация с примерами. В этой статье я просто опишу основные идеи, возможно кому-то это зайдет.
Как Амплифер использует Logux — инструмент для связи клиента и сервера
Меня зовут Виталий Ризо, я старший фронтенд-разработчик в «Амплифере». Поделюсь, как мы применяем Logux в веб-приложении: организуем обмен данными в реальном времени, уведомления об ошибках без перезагрузки страницы, общение между вкладками браузера и интеграцию с Redux.
Ближайшие события
Dap в действии. Пишем TodoMVC. Часть 1
TodoMVC, если кто не знает, это такой стандартный UI-хелловорлд, позволяющий сравнить решения одной и той же задачи — условного «Списка дел» — средствами разных фреймворков. Задачка, при всей своей простоте (ее решение на dap влезает «в один экран»), весьма иллюстративна. Поэтому на ее примере я попробую показать, как типичные для веб-фронтенда задачи реализуются с помощью dap.
Искать и изучать формальное описание задачи я не стал, а решил просто среверсить один из примеров. Бэкенд в рамках этой статьи нам не интересен, поэтому сами мы его писать не будем, а воспользуемся одним из готовых с сайта www.todobackend.com, оттуда же возьмем и пример клиента и стандартный CSS-файл.
Для использования dap вам не нужно ничего скачивать и устанавливать. Никаких
npm install
и вот этого всего. Не требуется создавать никаких проектов с определенной структурой каталогов, манифестами и прочей атрибутикой IT-успеха. Достаточно текcтового редактора и браузера. Для отладки XHR-запросов может еще потребоваться веб-сервер — достаточно простейшего, типа вот этого расширения для Chrome. Весь наш фронтенд будет состоять из одного-единственного .html-файла (разумеется, ссылающегося на скрипт dap-движка и на стандартный CSS-файл TodoMVC)Итак, с чистого листа.
Dap — еще один реактивный движок для веба. Совсем другой
Для затравки простая задачка: взять список неких пользователей (воспользуемся тестовыми данными, любезно предоставляемыми сервисом jsonplaceholder.typicode.com) и вывести их имена обычным html-списком; при нажатии на имя пользователя — показать алерт с его id.
Это, конечно, легко делается и на React, и на Angular, и на Vue. Вопрос: насколько легко? В dap это делается так:
'UL.users'.d("* :query`https://jsonplaceholder.typicode.com/users"
,'LI'.d("! .name").ui("? .id:alert")
)
(*Этот и последующие dap-примеры можно интерактивно потестить в песочнице dap.js.org/test.html)
Это первая пришедшая в голову тривиальная задачка и тривиальный же способ ее решения. На dap удобно писать «в лоб», не городя огород из классов, компонентов и прочего ритуального реквизита. Что вижу, то пою. Но «пою» не на javascript или его производных, а на языке dap-правил, специально заточенном на простое и лаконичное описание реактивных зависимостей между элементами.
Обзор пяти HTTP-библиотек для веб-разработки
В основе подобного взаимодействия систем лежит технология AJAX, в рамках применения которой используется экземпляр объекта
XMLHttpRequest
. Для того чтобы облегчить программистам работу с AJAX и XMLHttpRequest
, созданы специализированные библиотеки, которые предоставляют разработчикам удобные интерфейсы, избавляя их от необходимости пользоваться низкоуровневыми механизмами.Материал, перевод которого мы сегодня публикуем, посвящён анализу пяти популярных инструментов для работы с HTTP: Axios, Request, Superagent, Fetch и Supertest.
Модальное окно, которое вы ждали. Или как вызвать «всплывашку» с разных кнопок на чистом JS
Модификация ajax js для ajax Asp .net mvc
На своей работе я пытаюсь придерживаться определённых принципов разработки программного обеспечения. Одним из них является минимизация написания кода и создание универсальный классов и функций. Именно этот принцип предполагал использование jquery.unobtrusive-ajax.js и класс Ajax для mvc.
Практическое применение каррирования в js на примере модуля http запросов
Всем привет! Ни для кого не секрет, что в мире программирования есть много приемов, практик и шаблонов программирования (проектирования), но зачастую, узнав что-то новое, совершенно не понятно, куда и как это новое применить.
Сегодня на примере создания небольшого модуля-обертки для работы с http запросами разберем реальную пользу каррирования — приема функционального программирования.
Всем новичкам и интересующимся применением функционального программирования на практике — welcome, те, кто прекрасно понимают что такое каррирование — жду ваших комментариев по коду, ибо как говорится — нет предела совершенству.
Создание сайта на Delphi, или Как использовать uniGUI по-минимуму
Если смотреть на картину издалека, то вырисовываются 3 сценария использования библиотеки:
- Наиболее благоприятный, для которого она в целом и создавалась, когда описанная сильная, радужная сторона uniGUI проявляет себя в полной мере – перенос (полный или частичный – неважно) настольных приложений в веб, что возможно проделать быстро, привычным способом и с высоким качеством только в случаях, когда поставляемые с библиотекой компоненты сразу обеспечивают требуемый функционал – к примеру, фильтрацию и сортировку по столбцам таблицы.
- Очень похож на первый и в какой-то мере вытекает из него, с тем лишь отличием, что штатный набор компонентов не покрывает все необходимые по ТЗ возможности; если снова взять для примера таблицу, то таким требованием может стать многоуровневая группировка строк по произвольным столбцам. Если удастся найти сторонние решения с нужными возможностями, то сценарий сводится к первому, а если нет, то потребуется самостоятельная доработка, что уже весьма нетривиально, т. к. здесь не обойтись не просто без знаний JavaScript, а ещё и глубокого владения фреймворком Ext JS, на основе которого работает браузерная сторона uniGUI.
- Последний сценарий может показаться странным и даже чужеродным для тех, кто применял на практике в основном первый, – речь об отказе от всей богатой палитры визуальных компонентов и разработке клиентской части веб-приложения исключительно с использованием родной для неё триады – HTML, CSS и JavaScript. Данная статья покажет, в каких случаях подобное допустимо, а также продемонстрирует способ реализовать задуманное.