Как стать автором
Обновить

Ajax-запросы нативными средствами Joomla

Время на прочтение4 мин
Количество просмотров4.4K

Небольшая заметка о том, как делать ajax-запросы штатными средствами без использования дополнительных js-библиотек (jQuery, etc). Joomla 3 и Joomla 4 предоставляют небольшую обёртку для конструирования XMLHttpRequest. В целом синтаксис очень похож на тот же jQuery Ajax, поэтому заменить его будет очень легко.

В <head> страницы можно увидеть core.js, в котором есть немало любопытных функций для работы с фронтом на Joomla. Об одной из них (получение данных из php в js) писалось здесь: Разработка форм обратной связи для магазинов на Joomla 3. Для создания ajax-запросов нам пригодится Joomla.request.

Читать далее
Всего голосов 6: ↑5 и ↓1+4
Комментарии13

Интеграция приложения на QML с веб-ресурсами

Время на прочтение14 мин
Количество просмотров30K
Здравствуй, дорогой хабражитель! Я хочу рассказать, как интегрировать программу на новомодном языке QML с веб-ресурсами.

Сам по себе, QML — это декларативный JavaScript-подобный язык программирования, который входит в фреймворк Qt. Разработчики Qt настроены серьезно и продвигают его как основной инструмент создания интерфейсов. Более того, достаточно много вещей можно сделать не прибегая вообще к C++, в том числе и возможность работы с веб-серверами.

Веб-технологии все сильнее проникают в нашу жизнь, мы часто пользуемся различными веб-ресурсами. Не всегда удобно для этого запускать браузер, иногда отдельное приложение-клиент гораздо удобнее, о чем красноречиво говорит, например, количество клиентов для различных социальных сетей, особенно на мобильных платформах.

Учитывая, что в Qt 5.1, альфа версия которой вышла на прошлой неделе, включена начальная поддержка Android и iOS, эта тема может быть особенно интересна тем, кто присматривается к Qt или активно ее осваивает. В этой статье я расскажу, как можно организовать работу с веб-ресурсами из приложения на QML на примере API ВКонтакте.

На всякий случай отмечу, что я рассматриваю последнюю стабильную версию Qt 5.0.2. В более ранних версиях каких-то возможностей может не быть.
Читать дальше →
Всего голосов 26: ↑24 и ↓2+22
Комментарии14

«Ускоряем» открытие тяжелого сайта

Время на прочтение3 мин
Количество просмотров17K
На днях потребовалось ускорить открытие сайта. Проблема заключалась в том, что одни только JS-файлы, даже собранные в один и сжатые обфускацией, весили более 500kB, а ведь еще есть css тоже довольно крупный.
В связи с этим, пользователям, у которых файлы закешированы (например новый пользователь или после билда сменилась версия), с медленным интернетом приходилось ждать довольно долго, смотря на белый экран.
Читать дальше →
Всего голосов 16: ↑10 и ↓6+4
Комментарии11

Уязвимость в uTorrent Web позволяет загрузить произвольный файл в папку автозагрузки: демо

Время на прочтение3 мин
Количество просмотров29K
В двух версиях uTorrent (под Windows и в веб-версии uTorrent Web) обнаружено несколько опасных уязвимостей, которые легко эксплуатировать. При этом они позволяют запускать произвольный код на машине, где запущен uTorrent (веб-версия); получить доступ к скачанным файлам, в том числе копировать их, просматривать историю скачиваний (веб-версия и Windows).

Взлом возможен только если uTorrent работает с настройками по умолчанию, а именно с HTTP RPC сервером на порту 10000 (uTorrent Classic) или 19575 (веб-версия uTorrent) с активированным обработчиком /proxy/ (он активирован по умолчанию).

Баги нашёл хакер Тэвис Орманди (Tavis Ormandy) из подразделения Project Zero в компании Google. Он разгласил информацию в баг-трекере Chromium 31 января 2018 года (через 90 дней после того, как сообщил о ней разработчикам).
Читать дальше →
Всего голосов 18: ↑18 и ↓0+18
Комментарии48

JavaScript: как из Fetch сделать Axios?

Время на прочтение20 мин
Количество просмотров15K


Привет, друзья!


В этой статье я хочу поделиться с вами результатами небольшого эксперимента, суть которого заключается в создании обертки над Fetch API для максимального упрощения работы с ним.


С чего все началось?


Прочитал статью Kent C. Dodds "Replace axios with a simple custom fetch wrapper", изучил несколько аналогичных утилит других разработчиков и решил, что могу сделать лучше. О том, насколько мне это удалось, судите сами.


Ссылки


Исходный код проекта находится здесь.


Обертка в виде npm-пакета — very-simple-fetch (хотел назвать пакет просто simple-fetch, но это название оказалось занято).


Нет предела совершенству и не ошибается только тот, кто ничего не делает, поэтому буду рад любой конструктивной критике, любым замечаниям и предложениям по улучшению инструмента: отправляйте реквесты или пишите в личку.


Что насчет Axios?


Наша обертка будет сильно похожа на axios. Это объясняется тем, что axios — лучший из известных мне инструментов для отправки HTTP-запросов. Он одинаково хорошо работает как в браузере, так и в Node.js. Безусловно, разработчики axios проделали большую работу. Однако в большинстве случаев нам для решения повседневных задач, связанных с разработкой веб-приложений, не требуется весь функционал, предоставляемый этим инструментом. Если в цифрах, то размер axios составляет 371 Кб, а размер very-simple-fetch — 9.33 Кб.

Читать дальше →
Всего голосов 8: ↑8 и ↓0+8
Комментарии24

Автоматическое определение часового пояса пользователя

Время на прочтение5 мин
Количество просмотров14K
Мужик сидит, слушает радио.
— В Москве полночь, в Благовещенске 6 утра, во Владивостоке, Хабаровске, Южно-Сахалинске 7, в Магадане 8, в Петропавловске-Камчатском 9 часов.
Мужик сидит, сидит, потом встаёт, и с некоторым сожалением произносит:
— Эх, ну и бардак же у нас в стране!

Текст перепечатан с аудиозаписи позывных «Маяка».
Для справки: в Петропавловске-Камчатском теперь UTC+11 (летом UTC+12), поэтому теперь в полночь по московскому времени там было бы 8 часов, а не 9.


Во многих местах на сайтах отображается время. И во многих случаях лучше всего отображать не время по Гринвичу, не время на сервере, а время в часовом поясе пользователя.

Часто предлагается выбрать свой часовой пояс из огромного списка возможных вариантов. Конечно, возможность приятная, но удобнее, если сайт может определить часовой пояс пользователя сам. А сделать это, как можно догадаться, совсем несложно — достаточно получить локальное время и отступ от UTC с помощью JavaScript и передать этот отступ на сервер с помощью XMLHttpRequest.

Читать дальше →
Всего голосов 61: ↑45 и ↓16+29
Комментарии35

Кроссдоменный AJAX

Время на прочтение1 мин
Количество просмотров112K
На вопрос, как сделать AJAX запрос к другому домену, я всегда отвечал, что никак, и предлагал в качестве альтернативы jsonp, прокси, флеш, фреймы. Но, оказывается, большинство современных браузеров (IE8+, FF3.5+, Chrome 6+ и Safari 4+) вполне поддерживает кроссдоменный XMLHTTPRequest.

Работает это на удивление просто
Всего голосов 97: ↑90 и ↓7+83
Комментарии22

Использование UpdatePanel и иже с ним

Время на прочтение9 мин
Количество просмотров20K
Каждый, кто занимается веб-программированием, рано или поздно сталкивается с задачей реализации асинхронных запросов на сервер и обработкой возвращаемого результата.
Если смотреть со стороны Asp.net, то ребята из Майкрософт сделали огромную работу для того, чтобы облегчить нам всем жизнь. Однако в моей голове присутствует какая-то маниакальная идея, запрещающая использовать то, принципы работы чего я не понимаю. Таким образом, кривая дорожка завела меня в исследование работы объекта UpdatePanel и иже с ним. Прошурудив множество форумов, я обнаружил десятки изъявлений о том, что «UpdatePanel – SUCKS», подкрепленные различными разрозненными объяснениями. Но ни одно из них так и не заставило меня окончательно разубедиться в отрицательном эффекте его использования. В связи с этим, приняв на веру, что все сказанное различными Анонимусами на форумах верно, я начал рыть.
И вот до чего дошло.
Читать дальше →
Всего голосов 18: ↑10 и ↓8+2
Комментарии28

Скрещиваем WebWorker и XMLHttpRequest

Время на прочтение3 мин
Количество просмотров7K
WebWorker+XMLHttpRequest

HTML5 уже никого не удивляет, но у многих новичков возникает много вопросов. Особенно вопросы связаные с параллельными потоками, а именно с WebWorker. Дальнейшее повествование требует знания JS и HTML — я не буду разжевывать основы html и js.
Сегодня мы рассмотрим как обернуть в WebWorker обычный XMLHttpRequest.
Читать дальше →
Всего голосов 14: ↑5 и ↓9-4
Комментарии12

Пилотируем облачную MongoDB через VanillaJS или как бесплатно сделать приватный todo-лист за 15 минут

Время на прочтение17 мин
Количество просмотров15K

На фото: Том Круз в фильме Лучший Стрелок

В этой статье мы рассмотрим взаимодействие Single Page HTML Application с облачной MongoDB через JavaScript. В качестве MongoDB-as-a-Service я возьму Mongolab. Стоимость развернутой MongoDB, с объёмом в 500мб, обойдется нам всего-лишь в 0 USD.

Для того, чтобы создать todo-лист, нам не потребуется бекенд. Взаимодействовать с Mongolab мы будем через REST API, а обертку для него в клиентской части мы напишем не прибегая к помощи сторонних JavaScript-фреймворков.

К полету готов
Всего голосов 34: ↑23 и ↓11+12
Комментарии7

Художественный подход к загрузке изображений

Время на прочтение7 мин
Количество просмотров7.7K
У меня, как у художницы и web-разработчика, со временем появилась необходимость в собственной галерее. Обычно, у галерей две основные функции: показ витрины — всех (или некоторых) картин — и детальный показ одной. Реализация обеих функций есть практически в любой готовой галерее. Но «заношенный» внешний вид готовых галерей и, ставший стандартом, пользовательский интерфейс не годятся для художника :). А нестандартный — требует особой архитектуры и реализации кода, осуществляющего загрузку и показ картин. Сам показ и пользовательский интерфейс я в этой статье опущу. Основное внимание будет отдано загрузке картин с сервера. Об итоговой организации контролируемой загрузки с использованием очередей, асинхронного загрузчика, обработки блоб-объектов, каскадов выполнения обещаний и с возможностью приостановки и пойдет речь.



Примеры кода записаны на coffeeScript
Читать дальше →
Всего голосов 17: ↑11 и ↓6+5
Комментарии7

Особенности withCredentials

Время на прочтение2 мин
Количество просмотров31K
Многие знакомы с таким флагом XmlHttpRequest как withCredentials, знают для чего он нужен, какие заголовки нужно использовать с ним в паре, чтобы браузер нормально обрабатывал ответы сервера. И я вроде тоже знал, а что не знал — нагугливал, и всё работало как надо. Но однажды столкнулся с неожиданным поведением, о чём и хочу поведать.
Интересности
Всего голосов 9: ↑3 и ↓6-3
Комментарии2

Эмуляция CORS на стороне клиента: кроссбраузерное решение некоторых пользовательских задач без расширений

Время на прочтение40 мин
Количество просмотров24K

I. В чём проблема



Расширения для браузеров — мощный инструмент продвинутого веб-сёрфинга, самая доступная, развитая и распространённая часть целого ряда инструментов. Однако расширения имеют и слабые стороны: каждый браузер требует знания и применения своих правил и форматов, а это дополнительная сложность для создателя. Расширения не кроссбраузерны, что сразу ограничивает их адресат. Есть попытки обобщить создание расширений, но они могут добавлять уже свою дополнительную прослойку форматов и правил.

Когда расширение улучшает специфические стороны браузерного интерфейса, без него не обойтись. Но некоторые задачи универсальны, не связаны с частными средствами браузера и, тем не менее, без расширения их тоже не выполнить. Одна из таких задач — кроссдоменные XMLHttpRequest запросы, нарушающие политику одного источника.
Читать дальше →
Всего голосов 9: ↑8 и ↓1+7
Комментарии5

Кросс-доменный XMLHttpRequest

Время на прочтение4 мин
Количество просмотров3.1K
Важной составляющей технологии AJAX является XMLHttpRequest. Этот объект дает возможность осуществлять HTTP-запросы к серверу без необходимости в перезагрузке страницы.
Читать дальше →
Всего голосов 20: ↑9 и ↓11-2
Комментарии22

Кроссдоменный AJAX-запрос для Opera.

Время на прочтение3 мин
Количество просмотров574
Известно, что XmlHttpRequest в Opera срабатывает только в том домене, где открыт яваскрипт. Ниже я приведу способ, как миновать эту оплошность.

Читать дальше →
Всего голосов 16: ↑12 и ↓4+8
Комментарии13

UserJS. Часть 2: Трюки

Время на прочтение7 мин
Количество просмотров3.5K
В этой статье я опишу способ переиспользования кода, а также различные трюки, специфичные для userjs.

Другие статьи серии:
Читать дальше →
Всего голосов 16: ↑13 и ↓3+10
Комментарии2

UserJS. Часть 4: libretki framework

Время на прочтение8 мин
Количество просмотров1.7K
libretki — это framework, призванный упростить создание userjs и предоставить уже готовый набор полезных функций.

Другие статьи серии:

Ядро



Ядро системы представлено файлом libretki.core.js, который является развитием loader.js из второй статьи. Ядро также предоставляет некоторые базовые функции. Если все, что Вам нужно — это возможность подключать другие файлы, ядра достаточно.

Типовой скрипт с использованием libretki:
if (! ('libretki' in window)) { libretki = { __scripts: [] }; }
libretki.__scripts.push({
    name: 'habrahabr.example',
    requires: ['libretki.utilities'],

    init: function(unsafe) {
      // some code...

      libretki.core.namespace('habrahabr.example', {
        func: function() { /* ... */ },
      });
    }
});


Читать дальше →
Всего голосов 31: ↑27 и ↓4+23
Комментарии40

Кросс-доменные запросы в Opera UserJS

Время на прочтение3 мин
Количество просмотров1.5K
В отличие от расширения Greasemonkey в мозилле, Опера не предоставляет аналога функции GM_xmlhttpRequest для кросс-доменных запросов (XDR). Это, понятное дело, сильно ограничивает возможности и сферу применения UserJS. Используя XDR, например, можно реализовать Last.fm-скробблер для различных онлайн-проигрывателей музыки (типа vkontakte.ru или MySpace).

Однако кросс-доменные запросы можно заставить работать в Опере с помощью трюков с iframe'ами и window.name транспортом. Под катом я покажу как это сделать и предъявлю простую библиотеку, реализующую все колдовство.
Читать дальше →
Всего голосов 27: ↑26 и ↓1+25
Комментарии30

dklab_multiplexor: постоянное Javascript-соединение с сервером в условиях сотен тысяч онлайн-клиентов

Время на прочтение4 мин
Количество просмотров6.7K
Dklab_multiplexor — это инструмент, который позволяет держать одновременно сотни тысяч долгоживущих открытых HTTP-соединений с сервером. Например, если на вашем сайте находится одновременно несколько сот тысяч посетителей, каждый из них может быть связан с сервером постоянным соединением, установленным из JavaScript. Это например, полезно при организации онлайн-чатов или мгновенных уведомлений.

Dklab_multiplexor не претендует на полную универсальность или исключительность (кстати, если знаете аналоги, близкие по простоте к multiplexor-у, пишите в комментариях). Это лишь простейший инструмент, который наконец-то дошли руки опубликовать.

Зачем это нужно?


Предположим, посетители вашего сайта могут посылать друг другу сообщения. Если получатель в момент отправки находится на сайте (просматривает какую-либо страницу), ему немедленно выдается уведомление (всплывающее окошко на JavaScript).

Данную задачу можно решить двумя способами.
  1. Неправильный способ. Раз в 10 секунд делать из JavaScript запрос на сервер для проверки, не появилось ли новых сообщений. Этот метод не работает, если на сайте одновременно находится очень большое количество пользователей, т.к. нагрузка на сервер растет слишком быстро. Кроме того, потребление трафика пользователем также оказывается крайне высоким.
  2. Правильный способ. Устанавливать постоянное и длительное соединение с сервером, ожидая поступления данных через него. Если сообщений нет, соединение просто держится открытым на протяжение нескольких минут. Если соединение по каким-либо причинам закрылось, оно вновь открывается. В итоге и трафика потребляется мало, и нагрузка на сервер оказывается невелика. Так работает GMail, Мой Круг и т. д., и именно на этом принципе построен dklab_multiplexor.
+-------------------+                    ------------------ 
| Сервер обработки  |                   |                  |   <===WAIT=== Клиент A
| и базы данных     |  ======IN=======> |   Мультиплексор  |   <===WAIT=== Клиент B
| (e.g Apache + PHP |                   |                  |   <===WAIT=== Клиент C
+-------------------+                    ------------------ 
(указаны направления установления TCP-соединений).
Читать дальше →
Всего голосов 103: ↑97 и ↓6+91
Комментарии108

Почему вы должны использовать XMLHttpRequest асинхронно

Время на прочтение6 мин
Количество просмотров17K
*Пер.: Мысль этого топика тривиальная и должна быть известна каждому: используйте асинхронные запросы. Но статистика — штука суровая, и, видимо, это знают не все. А последствия, на самом деле, имеют место во всех браузерах.*

8.4% всех зависаний страниц в IE9 за прошедший месяц являются следствием того, что XMLHttpRequest объекты блокируют поток UI синхронным запросом. Это огромное число! С помощью нескольких доступных изменений в коде эти зависания можно легко избежать — и разработчики могут обеспечить своим пользователям намного лучшие впечатления от работы с их сайтами. Мы рассмотрим, что происходит при зависании, что вы можете с этим сделать, и мы также попробуем сделать небольшую демонстрацию, чтобы воочую посмотреть, что происходит, когда синхронный запрос подвешивает браузер.
Читать дальше →
Всего голосов 51: ↑32 и ↓19+13
Комментарии86
1