Ajax *

Когда вокруг так много новых технологий, непросто понять, на изучение какой стоит потратить время.
(Karl Seguin)

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



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

AJAX-вызовы вывели работу web на новый уровень. Уже не нужно перезагружать страницу в ответ на каждый ввод информации пользователем. Теперь возможно отправлять вызовы на сервер и обновлять страницу на основании полученных ответов. Это ускоряет работу интерактивного интерфейса.

А вот что AJAX не обеспечивает – так это обновления с сервера, которые необходимы для работы приложения в реальном времени. Это могут быть приложения, в которых пользователи одновременно редактируют один документ, или уведомления, рассылаемые миллионам читателей новостей. Необходим ещё один шаблон для рассылки сообщений, в дополнение к запросам AJAX, который бы работал в разных масштабах. Для этого традиционно используется шаблон PubSub («publish and subscribe», «публикация и подписка»).

Какую задачу решил AJAX

До появления AJAX интерактивные взаимодействия со страницей были тяжеловесными. Каждое из них требовало перезагрузки страницы, которая создавалась на сервере. В этой модели основной единицей взаимодействия была страница. Неважно, какой объём информации отправлялся из браузера на сервер – результатом была полностью обновлённая страница. Это была трата как трафика, так и серверных ресурсов. И это было медленно и неудобно для пользователей.

AJAX решил проблему, разбивая всё на части: стало возможным отправить данные, получить конкретный результат и обновить лишь часть страницы, имеющую к этому отношение. От вызова «дай мне новую страницу» мы перешли к конкретным запросам данных. У нас появилась возможность делать вызовы удалённых процедур (RPC).

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

В этой статье я расскажу о различных приемах разработки SOAP веб-сервисов по технологии ASMX, а также об этой технологии в целом. Кроме SOAP, также будет рассмотрена реализация AJAX. Статья будет полезна как тем, кто уже знаком с ней, так и тем, кто только собирается создать свой первый веб-сервис.

Введение

Никого уже не удивишь концепцией динамического HTML, почти все сайты давно в той или иной мере используют javascript для того, чтобы сделать страницы интерактивными. А с появлением технологии AJAX стало возможным асинхронно генерировать запросы к серверу, чтобы изменять старые данные на сервере или получать новые. Но как именно обновлять структуру страницы? Кто должен генерировать новый html — сервер или javascript? А может, все вместе?

Посмотрим, как можно ответить на эти вопросы.

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

К примеру, мне потребовалось решить эту задачу при реализации JavaScript API к Comet сервису. Эта задача встречается достаточно часто и её уже рассматривали на хабре раньше здесь и здесь, но я решил написать своё решение задачи исходя из следующих требований к коду:

• Кросбраузерность
• Отсутствие зависимостей
• Минимальный размер кода
• Простота и удобство

Любая миграция должна начинаться с оценки того, что нужно мигрировать. Каким образом это делать — мнения разнятся. Кто-то делает это в Excel, кто-то рисует схемы, а некоторые используют утилиты. Одна из таких утилит — Microsoft Assessment and Planning Toolkit - конечно, не серебряная пуля, которая решит все за вас, но процесс инвентаризации упростит значительно. Просто запустить ее в AD либо дать ей список IP-адресов (да, и не только для Windows) — и она соберет не только данные о ресурсах виртуальной или физической машины, но и проведет анализ загруженности в течении определенного вами времени, чтобы вы могли увидеть, что большой сервер, купленный за большие деньги, на самом деле загружен на 25%. По результатам будет сгенерирован Excel-отчет, который можно показать как аргумент. Полезно, учитывая периодические EOS. :)
Под катом мы инвентаризуем тестовую виртуальную инфраструктуру. Все посты из серии «Гибридная история» помечены соответствующим тегом hybrid story.

 

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

Предлагаю на суд сообщества свой велосипед. На написание данного текста вдохновил Способ №5 из материала Делаем красивый input[type=file] для адаптивного сайта… И да — все работает в IE, начиная с 9 версии.

Демо на dropbox:

Цель: создать свою кнопку/элемент управления по нажатию которой происходит загрузка файла на сервер (либо иные, предусмотренные разработчиком, файловые операции).
Инструменты: CSS, PHP, JavaScript.
Используемые технологии: Ajax, через скрытый iframe.

Эта статья основана на моей презентации с конференции BrazilJS в августе 2014 года. Она базируется на идеях, о которых я писал в блоге недавно, в основном, в связи с UX и производительностью.

Я хочу представить 7 действенных принципов для веб-сайтов, которые хотят применить JavaScript для управления UI. Эти принципы являются результатом моей работы как веб-дизайнера, но также как давнего пользователя WWW.

JavaScript бесспорно стал незаменимым инструментом для разработчиков фронтенда. Сейчас сфера его применения расширяется на другие области, такие как серверы и микроконтроллеры. Этот язык программирования выбрали престижные университеты, чтобы обучать студентов основам информатики.

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

• Должен ли JavaScript использоваться как замена функциям браузера: история, навигация, рендеринг?
• Умирает ли бэкенд? Нужно ли вообще рендерить HTML?
• Правда ли, что будущее за приложениями на одной странице (Single Page Applications, SPA)?
• Должен ли JS генерировать страницы на веб-сайте и рендерить страницы в веб-приложениях?
• Нужно ли использовать техники вроде PJAX или TurboLinks?
• Каково точное отличие между веб-сайтом и веб-приложением? Должно ли остаться что-то одно?

Добрый день, уважаемые Хабрачитатели.

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

Итак, для начала, чтобы понять, каким образом это все реализовано, нужно познакомится (для тех, кто не знаком) с расширением HMVC для Codeigniter. Сделать это можно тут.

Я попытаюсь сделать все очень наглядно, поэтому начну с файловой структуры проекта:

Сам я только новичок в изучении RoR, но при разработке собственного проекта возникло желание вместо классической пагинации с помощью гема will_paginate сделать ее более удобной при помощи javascript. Это должна быть классическая кнопка, при нажатии на которую загружаются следующие n-записей. Решение проблемы на русском языке я не нашел, на английском есть, но я нашел только громоздкие и неудобные варианты. Как говорится, хочешь сделать что-то хорошо — сделай это сам. Вот что получилось.

Разбиение на страницы будем производить с помощью все того же гема will_paginate, также мы будем его использовать если javascript у пользователя отключен.

Итак сначала устанавливаем гем:

gem 'will_paginate'

bundle install

Небольшая предыстория.

У меня есть хобби-проект трекер.ру
Алгоритм такой: пользователь вводит поисковый запрос, этот запрос «на лету» ищет торренты на сторонних трекерах (рутор, рутрекер, tfile и тд).
Для параллельного поиска идет одновременно несколько аякс запросов, которые должны обработаться асинхронно.
Однако, запросы выполнялись синхронно. Если какой-то трекер долго не отдавал ответ, то остальные запросы подвисали и ждали ответа от подвисшего трекера. Общее время выполнение запросов равнялось сумме всех запросов. Хотя, по моим планам общее время должно было равняться самому долгому запросу.
Долго ломал голову, почему так. Грешил на HTTP pipelining. Но, причина оказалась намного банальней. Все дело в сессиях. Дело в том, что сессии в php консистентны и php не даст обратиться другому процессу к уже занятой сессии.

Задача

Сталкивались ли вы с такой задачей, когда на простом-простом сайте (Drupal 7) необходимо сделать простое-простое ajax-меню? У вас есть блог, вы быстро собрали его из модулей, но вот, осталось ajax-меню. И вот мы создаём кастомный модуль, вот так, привязываем к ссылкам меню обработчики событий, отправляем ajax-запрос, формируем на стороне сервера ответ, и опять вручную обрабатываем получение этого ответа. Или мы используем замечательный модуль товарища Ника Денри, вот этот, но и здесь автор пишет в последнем комментарии — «В настоящее время модулем поддерживается только тип Basic Page, модуль ограничен в своем применении. Планы по доработке модуля есть, но пока нет времени на их осуществление, к сожалению».

А возможно ли сделать на drupal 7 такой модуль, с помощью которого можно было бы настроить обычное ajax-меню, написав минимум кода?

Во многих компаниях, как и моей, есть много проектов и продуктов. И у продуктов бывают веб-интерфейсы, чтобы этими продуктами как-то манипулировать. В нашем случае это простенькие RESTful веб-сервисы, а поверх них ещё более простенькие веб-странички с формочками и кнопочками. Все эти веб-странички до того похожи друг на друга, что возникла мысль написать унифицированный продукт, который бы спрашивал сервер о поддерживаемых сервисах, и получал бы полное описание параметров к этим сервисам, так чтобы можно было нарисовать те самые простенькие формочки. То есть, веб-сервисы должны описывать себя, достаточно исчерпывающе, чтобы наш клиент мог построить GUI для них, и ничего не надо было бы делать руками. Как раз такая картинка гуглится по запросу «REST»:

Добрый день!
Хотелось бы продемонстрировать один из возможных подходов к решению проблемы работы с WCF сервисами с различных доменов. Найденная мной информация по данной теме была или неполной, или содержала избыточное количество информации, затрудняющей понимание. Хочу рассказать о нескольких способах взаимодействия WCF и AJAX POST запросов, включающих в себя информацию о Cookies и авторизации.

WebWorker+XMLHttpRequest

HTML5 уже никого не удивляет, но у многих новичков возникает много вопросов. Особенно вопросы связаные с параллельными потоками, а именно с WebWorker. Дальнейшее повествование требует знания JS и HTML — я не буду разжевывать основы html и js.
Сегодня мы рассмотрим как обернуть в WebWorker обычный XMLHttpRequest.

Статья о том, как прикрутить fancybox-авторизацию к проекту на yii в кодировке win-1251. Если вы оказались более счастливым разработчиком, и ваш проект в utf, можете просто пропускать пункты, относящиеся к encoding hell, остальное все так же. Хотя, возможно тогда вам и не понадобится эта статья.

В статье предполагается, что все классы, отвечающие за авторизацию пользователей, у вас уже есть, и нужно только заставить их работать через fancybox.

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

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

Правила организации высокоскоростного взаимодействия пользователя с приложением можно сформулировать следующим образом:

1. Вычисления не должны блокировать взаимодействие с интерфейсом и его рендеринг — пользователь всегда должен иметь возможность указать на фокус своих интересов.
2. Страница объекта, к которому обратился пользователь, должна отображаться мгновенно, не дожидаясь загрузки данных, в которых нуждается объект.
3. Запросы в сеть не должны уходить одной большой группой, не должны отправляться сразу; должны откладываться на небольшое время, складываться и приоритезироваться в случае необходимости.

Изложенная в этой заметке информация — это мой практический опыт проектирования и разработки интерфейса моего приложения для поиска и прослушивания музыки seesu.me. Приложения, в котором гармонично комбинируются огромные пласты данных из разрозненных сервисов, таких как last.fm, вконтакте, ex.fm, hypem.com, soundcloud.com, discogs.com, youtube.com

Всем привет! Сегодня задача у нас следующая: необходимо создать интерфейс для загрузки картинок, который бы генерировал перед загрузкой превьюшки небольшого формата. На данный момент HTML5 вовсю шествует по планете, и, казалось бы, как это реализовать должно быть предельно ясно. Есть несколько русскоязычных статей на эту тему (вот, например). Но тут есть одно но. В рассматриваемом там подходе не уделено никакого внимания расходу памяти браузером. А расход может доходить до гигантских размеров. Разумеется, если загружать одновременно не более 5-10 картинок небольшого формата, то все остается в пределах нормы; но наш интерфейс должен позволять загружать сразу много изображений формата не меньше, чем у современных фотоаппаратов-мыльниц. И вот тогда-то свободная память начинает таять на глазах.

Все мы знаем множество преимуществ использования AJAX: пользователям не нужно ждать загрузку новой страницы, действия выполняются в фоновом режиме, в результате чего можно обеспечить гораздо более динамичный user experience. Идеи вроде бы просты, но создать сложное AJAX веб приложение достаточно тяжело. Я создал свой блог на основе AJAX, у меня есть несколько советов и я хочу поделиться с вами своим опытом. Надеюсь я помогу вам избавиться от некоторых проблем в будущем!