Читать дальше →
0
Рейтинг
Ajax *
Asynchronous Javascript and XML
Сначала показывать
Порог рейтинга
Уровень сложности
Новый взгляд на старый MS Ajax
3 мин
5.4KЧуть больше года назад мне на глаза попался один сайт. На первый взгляд он не чем не отличался от сотни подобных сайтов, но мой коллега заметил множественное обновление мелких модулей при клике на функциональных элементах. Дальнейшим открытием было то, что он работает без перегрузок. На сегодняшний день у каждого из нас это не вызовет большого впечатления, но данный сайт работает уже больше 5 лет.
После двухдневного анализа сайта мы нашли ответ на вопрос — «Как он работает? ». Центром данного сайта был файл с названием msajax.js, что побудило нас к поискам в интернете. Информации оказалось мало, но достаточно для начала экспериментов.
После двухдневного анализа сайта мы нашли ответ на вопрос — «Как он работает? ». Центром данного сайта был файл с названием msajax.js, что побудило нас к поискам в интернете. Информации оказалось мало, но достаточно для начала экспериментов.
-3
Stand-alone приложение RAP
7 мин
4.3KПриветствую всех! Это моя первая статья, потому просьба отнестить с пониманием.
С тех пор как я впервые увидел RAP и OSGi — прошел год, но с первого взгляда я просто влюбился в эти технологии. К сожалению даже в сети очень мало документации по RAP, позволяющей написать что-то крутое (кроме hello world) с нуля. Для начала, конечно, нужно знать что такое OSGi. По этой теме инфы в сети достаточно — можно загуглить. Так как статья о RAP, подразумевается, что читатель уже знает как создавать OSGi бандлы, как их устанавливать и запускать.
То есть задача ставится так: «сделать кастомный интерфейс сайта заюзав RAP». Как создать в Eclipse проект OSGi бандла, читатель, я предполагаю, знает.
С тех пор как я впервые увидел RAP и OSGi — прошел год, но с первого взгляда я просто влюбился в эти технологии. К сожалению даже в сети очень мало документации по RAP, позволяющей написать что-то крутое (кроме hello world) с нуля. Для начала, конечно, нужно знать что такое OSGi. По этой теме инфы в сети достаточно — можно загуглить. Так как статья о RAP, подразумевается, что читатель уже знает как создавать OSGi бандлы, как их устанавливать и запускать.
То есть задача ставится так: «сделать кастомный интерфейс сайта заюзав RAP». Как создать в Eclipse проект OSGi бандла, читатель, я предполагаю, знает.
+5
Модальное окно bootstrap для редактирования форм
3 мин
37KТуториал
Возникла необходимость использовать плагин bootstrap-modal.js для редактирования формы. Казалось бы тривиальная задача, но пришлось столкнуться с некоторыми сложностями. В данной статье поделюсь с вами своим решением, более изящные решения и здоровая критика приветствуются.
Имеется страница с формой для редактирования товара. Добавим на форму выпадающий список с перечнем производителей. Рядом разместим бутстраповскую иконку icon-plus-sing, которая и будет триггером для вызова модального окна.
Имеется страница с формой для редактирования товара. Добавим на форму выпадающий список с перечнем производителей. Рядом разместим бутстраповскую иконку icon-plus-sing, которая и будет триггером для вызова модального окна.
+1
Истории
Зачем Google добавляет while(1); к своим JSON-ответам?
2 мин
68KПеревод
Это позволяет избежать CSRF/XSRF-атак (подделки межсайтовых запросов).
Рассмотрим следующий пример: допустим у Google есть URL вида
Рассмотрим следующий пример: допустим у Google есть URL вида
gmail.com/json?action=inbox
, который возвращает 50 первых сообщений вашего почтового ящика в формате JSON. Злоумышленник, чей сайт находятся на другом домене, не может выполнить AJAX запрос, обратившись по данному URL, чтобы получить данные, ввиду same origin policy (правило ограничения домена). Но ничто не мешает злоумышленнику включить вышеуказанный URL на свою страницу с помощью тега .
+163
AJAX в CakePHP на jQuery и Prototype
5 мин
5.3KТуториал
Небольшой пример реализации AJAX в CakePHP, пример показывает, как легко работать с AJAX в СakePHP, всю работу берет на себя фреймворк. Реализуем пример на библиотеке jquery.js затем переделаем наш пример на библиотеку prototype.js
+2
Кроссдоменный обмен: анонимайзер + фрейм
3 мин
7.8KПоскольку для проектов на коленках или оказания безвозмездной помощи душит жаба по написанию и использованию собственного прокси (требует денег и времени), — есть идея замены прокси существующими анонимайзерами.
=======================================================================================
Идея позволяет: читать-писать контент и message на выбранном сайте,
производить авторизацию, ставить и исполнять скрипты.
=======================================================================================
=======================================================================================
Идея позволяет: читать-писать контент и message на выбранном сайте,
производить авторизацию, ставить и исполнять скрипты.
=======================================================================================
+5
Псевдо веб сокеты
8 мин
12K Вдохновившись вот этой статьёй о Socket-соединениях в Веб-приложениях, решил сделать более-менее универсальный модуль с удобным интерфейсом, реализующий эту технологию.
В этой статье под словом «сокет» имеется ввиду програмный интерфейс, который обеспечивает обмен данными между серверным и клиентским скриптами, с возможностью клиентского постоянно «слушать порт». Другими словами, как только что-то произошло на сервере, он может тут же сообщить об этом клиенту, и наоборот. Конечно же, в javascript нет возможности «слушать порты» и создавать полноценные сокеты, но зато у нас есть спички, изолента и пластилин, из которых можно смастерить какое-то подобие.
Сначала я опишу примерный принцип действия этой системы, а затем, по традиции, приведу код примитивного чата построенного на её основе, с, конечно же, ссылкой. Хотелось бы увидеть своими глазами хабраэффект в действии. Ещё в конце будет ссылка на репозиторий с исходниками.
В этой статье под словом «сокет» имеется ввиду програмный интерфейс, который обеспечивает обмен данными между серверным и клиентским скриптами, с возможностью клиентского постоянно «слушать порт». Другими словами, как только что-то произошло на сервере, он может тут же сообщить об этом клиенту, и наоборот. Конечно же, в javascript нет возможности «слушать порты» и создавать полноценные сокеты, но зато у нас есть спички, изолента и пластилин, из которых можно смастерить какое-то подобие.
Сначала я опишу примерный принцип действия этой системы, а затем, по традиции, приведу код примитивного чата построенного на её основе, с, конечно же, ссылкой. Хотелось бы увидеть своими глазами хабраэффект в действии. Ещё в конце будет ссылка на репозиторий с исходниками.
+23
Живой пример, Google теперь сканирует Ajax
1 мин
17KЗадумал переделать на сайте навигационное меню изобилующее ссылками в разные разделы и сделать менее «спамное» для поисковых систем и более удобное для посетителей. Идея была проста.
- с главной страницы все ссылки на разделы сайта на HTML
- ссылки в меню из разделов только на тематические разделы
- остальные ссылки на нетематические разделы сделать на JavaScript в отдельном файле
+6
Визуализируем геоинформацию из логов на web-карте в реальном времени
9 мин
17KТуториал
Дабы не было двусмысленностей, обозначу суть. При приёме на новую работу мне дали тестовое задание, которое кратко можно описать так: «Написать аналог Glow для геовизуализации событий входа пользователей в кастомерку интернет-магазина». Проще говоря, необходимо мониторить лог системы на предмет возникновения определенных событий и в случае оных выполнять (в данном случае) отображение точки на карте, которая будет определяться IP-адресом пользователя. Цель реализации: создать приятную на вид «игрушку» для презентационных целей, способную погрузить смотрящего в нирвану гармонии и эстетического наслаждения. Основным условием было использование в процессе разработки стека Java-технологий, чем обусловлено принятие многих решений. Кроме этого, было решено реализовать это в виде одностраничного сайта. А поскольку с Java и web я был знаком крайне поверхностно (писал в основном на C/C++), пришлось многому научиться. Что ж, будем разбираться вместе.
Статья рассчитана на интересующихся и начинающих, однако не «разжевывает» простые вещи, с которыми можно ознакомиться с помощью документации или специализированных статей. Наиболее полезные ресурсы, ссылка на исходники (распространяются по лицензии BSD) и ссылка на рабочую версию приведены в конце статьи.
+35
Реализация пошаговой работы PHP-скрипта с помощью AJAX
5 мин
47KИскал более-менее простое и универсальное средство для организации пошаговой работы скрипта, но так ничего и не нашел. Даже вопрос в QA задал, везде только общие фразы. Поэтому решил сам сделать такой инструмент.
Бывает необходимо обработать скриптом какой-то очень уж большой файл, например, для импорта. Естественно, время работы скрипта увеличивается пропорционально размеру файла или количеству строк в нем.
Хотелось бы разбить обработку файла на несколько частей и запускать скрипт в работу уже по частям.
Принцип реализации давно известен — обмен данными между сервером и клиентом:
Клиент запускает скрипт, тот выполняет несколько итераций и возвращает клиенту номер строки, на которой он остановился. После этого клиент делает новый запрос, в котором передает скрипту этот номер и скрипт продолжает работу дальше.
Для чего это вообще нужно?
Бывает необходимо обработать скриптом какой-то очень уж большой файл, например, для импорта. Естественно, время работы скрипта увеличивается пропорционально размеру файла или количеству строк в нем.
Хотелось бы разбить обработку файла на несколько частей и запускать скрипт в работу уже по частям.
Принцип реализации давно известен — обмен данными между сервером и клиентом:
Клиент запускает скрипт, тот выполняет несколько итераций и возвращает клиенту номер строки, на которой он остановился. После этого клиент делает новый запрос, в котором передает скрипту этот номер и скрипт продолжает работу дальше.
+2
Обзор JS-фреймворков. Путешествие через джунгли JavaScript MVC. Ч. 2
15 мин
124KПеревод
(Окончание перевода статьи Эдди Османи о сравнении и выборе библиотеки для проекта со значительной ролью JS на клиенте.)
Содержание первой части:
■ Что такое MVC или, лучше сказать, MV*?
■ Когда нам нужен MV*-фреймворк JS?
■ Где же мы будем нуждаться в MV*, а где нет?
■ Проблема выбора: слишком много вариантов?
■ TodoMVC: общее приложение для обучения и сравнения
■ Предложенные нами критерии выбора фреймворка
■ Dojo и усложнение фреймворков на JavaScript
■ Коллекция TodoMVC (фреймворки, на которых сделаны реализации тестового приложения Todo)
Содержание первой части:
■ Что такое MVC или, лучше сказать, MV*?
■ Когда нам нужен MV*-фреймворк JS?
■ Где же мы будем нуждаться в MV*, а где нет?
■ Проблема выбора: слишком много вариантов?
■ TodoMVC: общее приложение для обучения и сравнения
■ Предложенные нами критерии выбора фреймворка
■ Dojo и усложнение фреймворков на JavaScript
■ Коллекция TodoMVC (фреймворки, на которых сделаны реализации тестового приложения Todo)
+69
Обзор JS-фреймворков. Путешествие через джунгли JavaScript MVC. Ч. 1
11 мин
113KПеревод
(от 27 июля 2012)
При написании нативного веб-приложения легко начать чувствоватьсебя богом, способным работать просто с библиотекой работы с DOM (такой как jQuery) и горсткой сервисных плагинов. Вскоре возникает проблема в виде груды вложенных возвратных функций jQuery и разбросанных DOM-элементов без всякой структуры вместо приложения.
Короче, мы застреваем в спагетти-коде. К счастью, есть современные JS-фреймворки (библиотеки, задающие, кроме функций, правила организации кода --прим. перев.), помогающие поддерживать структуру и организованность в проекте, облегчающие ремонтопригодность в будущем.
Эти современные библиотеки дают разработчикам простой путь к организации кода, используя вариации паттерна проектирования, известного как MVC (Model-View-Controller). MVC разделяет задачи в приложении на 3 части:
При написании нативного веб-приложения легко начать чувствовать
Короче, мы застреваем в спагетти-коде. К счастью, есть современные JS-фреймворки (библиотеки, задающие, кроме функций, правила организации кода --прим. перев.), помогающие поддерживать структуру и организованность в проекте, облегчающие ремонтопригодность в будущем.
■ Что такое MVC или, лучше сказать, MV*?
Эти современные библиотеки дают разработчикам простой путь к организации кода, используя вариации паттерна проектирования, известного как MVC (Model-View-Controller). MVC разделяет задачи в приложении на 3 части:
+54
Ближайшие события
Firebird Conf: конференция для разработчиков и администраторов СУБД Firebird
6 июня
09:00 – 20:00
Москва
Подмена XMLHttpRequest или как не трогая тонны готового js-кода изменить поведение всех ajax-запросов
7 мин
21KЗдравствуйте, в этой маленькой заметке расскажу немного про ООП в JS, объект XMLHttpRequest, паттерн прокси, и дружелюбие джаваскрипта в этом плане.
Была у меня сегодня такая задача — есть проект, который довольно активно использует ajax-запросы, но вот проблема — бекенд у нас так устроен, что разаутентифицирует пользователя, если тот не активен в течение, скажем, получаса. В итоге случалось такое, что пользователь, пытаясь совершить какое-то действие, которое использует аякс, не мог его совершить (уж извините за тавтологию), нужно было решить эту проблему.
Была у меня сегодня такая задача — есть проект, который довольно активно использует ajax-запросы, но вот проблема — бекенд у нас так устроен, что разаутентифицирует пользователя, если тот не активен в течение, скажем, получаса. В итоге случалось такое, что пользователь, пытаясь совершить какое-то действие, которое использует аякс, не мог его совершить (уж извините за тавтологию), нужно было решить эту проблему.
+36
Индикаторы ключевой информации на сайтах для Firefox на скорую руку
21 мин
1.8KУ многих из нас есть на примете набор сайтов, которые мы периодически открываем не для внимательного чтения, а чтобы бегло ознакомиться с каким-то небольшим участком информации, посмотреть, нет ли новых статей или комментариев, проверить, не сменился ли какой-нибудь параметр и так далее. Сайты часто предоставляют для таких нужд rss или почтовую рассылку, но так бывает далеко не всегда. Попробую описать один из способов автоматизации подобной рутины.
+7
История одного расследования о странном поведении XMLHttpRequest в новых версиях Firefox
8 мин
5.3KI. Суть проблемы.
В список основных предназначений XMLHttpRequest, конечно, не входит запрос HTML, чаще этот инструмент взаимодействует с XML, JSON или простым текстом.
Однако связка XMLHttpRequest + HTML хорошо работает при создании расширений к браузеру, которые в фоновом режиме опрашивают на предмет новостей сайты, не предоставляющие для этого почтовую подписку, RSS или другие экономные API или предоставляющие эти сервисы с какими-то ограничениями.
При создании нескольких расширений для Firefox я сталкивался с такой необходимостью. Работать с полученным от XMLHttpRequest кодом HTML при помощи регулярных выражений — способ очень ненадёжный и громоздкий. Получить DOM от XMLHttpRequest можно было лишь для правильного XML. Поэтому приходилось следовать хитрым советам на сайте разработчиков. Однако начиная с Firefox 11 появилась возможность непосредственного получения DOM от XMLHttpRequest, а в Firefox 12 была добавлена обработка таймаутов.
Я испытал новую возможность на создании мини-индикаторов новых топиков для двух небольших форумов, и это оказалось очень удобным (50 строчек кода плюс расширение CustomButtons — вот и готовый индикатор за пять минут, с опросами по таймеру и четырьмя состояниями: нет новостей, есть новости, ошибка и таймаут; подробнее можно почитать здесь). Всё работало как часы.
Поэтому я попытался убрать из кода своих расширений все прежние костыли и ввести туда новый удобный парсинг. Однако при работе с сайтом rutracker.org возникла странная проблема (тестирование проходит на последней ночной сборке под Windows XP; очень прошу прощения за все косяки в коде и формулировках: у меня нет программистского образования и опыт мой в этой сфере, к сожалению, очень невелик.).
+74
AJAX в Joomla 2.5
3 мин
22KВ статье рассмотрены вопросы использования AJAX в компонентах, модулях и плагинах Joomla.
-5
Защита ajax-приложения от Cross Site Request атак (CSRF)
2 мин
35KСовсем недавно у меня появилась задача защитить web-приложение полностью построенное на ajax от CSRF-атак.
Каков же механизм такой атаки? Суть заключается в выполнении запроса с другого сайта под авторизационными данными пользователя. Например, у нас есть действие удаления своего аккаунта example.com/login/dropme. Если защиты от CSRF атаки нет, мы можем на нужном нам сайте разместить тег:
Сразу после того как пользователь зайдет на приготовленную нами страницу и подгрузит содержимое img, его аккаунт на example.com будет удален. О защите от этого я расскажу под катом.
Каков же механизм такой атаки? Суть заключается в выполнении запроса с другого сайта под авторизационными данными пользователя. Например, у нас есть действие удаления своего аккаунта example.com/login/dropme. Если защиты от CSRF атаки нет, мы можем на нужном нам сайте разместить тег:
<img src="http://example.com/login/dropme">
Сразу после того как пользователь зайдет на приготовленную нами страницу и подгрузит содержимое img, его аккаунт на example.com будет удален. О защите от этого я расскажу под катом.
+6
Кармавьюер как слабо связанный модуль к HabrAjax
1 мин
608Модуль — это независимый плагин, который может работать без основного скрипта. История данного Кармавьюера начинается с 23 марта 2010 — автор Atilla написал скрипт показа кармы по наведению мыши на имя пользователя. К этому времени существовали другие 2-3 реализации показа кармы и одна — даже с изменением без захода на страницу. Скачать кармавьюер.
HabrAjax
HabrAjax
-6
Вкладка «Всё» от 23 апреля — просмотр вопросов и ответов без перезагрузки страниц
1 мин
732Обновление. Как известно, раньше потоки статей и вопросов-ответов существовали раздельно, а теперь авторизованные пользователи могут использовать вкладку «Всё» для просмотра смеси заголовков тех и других потоков. С юзерскриптом HabrAjax новой версии 0.85, от 25 апреля возможно смотреть не только заголовки, но и содержание без перезагрузки страниц. Достаточно кликнуть по заголовку или по кнопке ответов. Просмотрев статью, вопрос или комментарии к ним, по широкой кнопке «Свернуть» сворачиваем просмотренное.
Необходимые переделки затронули и ZenComment — юзерстили для Хабра.
Необходимые переделки затронули и ZenComment — юзерстили для Хабра.
+2