Logo    
Деловая газета CitCity.ru CITKIT.ru - все об Open Source Форумы Все публикации Учебный центр Курилка
CitForum    CITForum на CD    Подписка на новости портала Море(!) аналитической информации! :: CITFORUM.RU
IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware

15.06.2017

Google
WWW CITForum.ru
С Новым годом!
2006 г.

Как заставить AJAX читать между строк

Дмитрий Шейко, ведущий программист Red Graphic Systems

На страницах вашего сайта содержится множество специализированных терминов. Когда пользователь просматривает сайт, у него могут возникать вопросы касательно этих терминов. Как сделать так, чтобы посетитель сайта по мере возникновения вопросов мог незамедлительно получать на них ответы? Раньше термины на страницах сайта оформлялись как ссылки и пользователь при желании мог кликать по ним и получать окно с контекстной подсказкой. Это подход достаточно неуклюжий, он отнимает у пользователя слишком много времени - на то, чтобы кликнуть по ссылке, дождаться загрузки окна и затем закрыть окно. В эпоху AJAX мы можем быть ближе к пожеланиям пользователей. Мы можем сделать так, чтобы уже при наведении мыши на термин незамедлительно появлялось сообщение с подсказкой и как только курсор мыши сдвинут с термина, сообщение исчезало. Наличие этого сервиса не отразится на объеме страниц сайта. При запросе контекстной подсказки Java Script будет обращаться к внешнему словарю, получать содержание и отображать его.

Метод получения информации по неявному запросу может найти применение не только в словаре терминов. Обращали ли вы внимание на ссылки с двойным подчеркиванием в таких проектах как hotscripts.com и devarticles.com? Это контекстная реклама на основе движка IntelliTXT компании Vibrant Media. При наведении курсора мыши на подобную ссылку появляется окно с рекламным предложением на соответствующую тему. Эта технология уже получила название in-text advertising.

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

Давайте теперь рассмотрим, каким образом реализуется контекстная подсказка с помощью AJAX. Программисту, освоившему этот метод, не составит труда заставить портал комментировать новости по запросу или же написать модуль in-text advertising.

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


<div id="InstantMessage" class="instant_message">&nbsp;</div>

Для простоты эксперимента мы можем оформить его в стиле системных сообщений MS Windows.

<style>
.instant_message { padding: 5px; font-size: 12px; font-family: Arial; visibility: hidden;
position: absolute; width: 240px; border: outset 2px #FFFFFF; background: #D4D0C8} .instant_message a { width: 240px; padding: 2px 17px; color: black; text-decoration: none;
cursor: default} .instant_message a:hover {color: #ffffff; background: #0A246A} </style>

Окно должно появиться в тот момент, когда посетитель навел курсор мыши на термин и исчезнуть, когда курсор мыши будет за пределами термина. Причем, в тот самый момент окно должно содержать уже не пробел, а текст определения термина. Таким образом, мы должны поместить термины в тексте документа в inline тег, поддерживающий события onMouseOver и onMouseOut. Первому событию следует назначить функцию JavaScript, которая получит определение термина, поместит его в окно сообщения и покажет окно. Второму событию требуется назначить функцию, которая просто скроет окно сообщения.

<a onmouseover="getDefinition('термин', event);"
onmouseout="hideMessage();">термин</a>

В параметре функции, отображающей окно (getDefenition) сообщения надо указать термин. Этот термин будет использован для запроса текста определения посредством AJAX. Так как при показе окна нам потребуется его позиционировать под курсором мыши для поддержки Gecko-базированых браузеров, в эту функцию также следует передать параметр event. Функция для сокрытия окна (hideMessage) не требует каких-либо параметров.

Теперь наша задача - при вызове функции getDefinition заставить JavaScript позиционировать окно сообщения.

function adjustMessage(evt) {
	MessageObj = document.getElementById('InstantMessage');
	if (isThisMozilla) event=evt;

	var rightedge = document.body.clientWidth-event.clientX;
	var bottomedge = document.body.clientHeight-event.clientY;
	if (rightedge < MessageObj.offsetWidth)
		MessageObj.style.left = document.body.scrollLeft + event.clientX - MessageObj.offsetWidth;
	else
		MessageObj.style.left = document.body.scrollLeft + event.clientX;
	if (bottomedge < MessageObj.offsetHeight)
		MessageObj.style.top = document.body.scrollTop + event.clientY - MessageObj.offsetHeight;
	else
		MessageObj.style.top = document.body.scrollTop + event.clientY;

	MessageObj.innerHTML = 'Loading...';	
	MessageObj.style.visibility = "visible";
}

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

function getDefinition(term,evt){
	adjustMessage(evt);
	var request = YAHOO.util.Connect.asyncRequest('POST',
'http://àäðåñ_êîíòðîëëåðà', callback, 'term='+term); }

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

  1. соединиться с базой данных
  2. выполнить SQL запрос для получения определения термина
  3. отобразить на консоль результат в следующем виде:
{
"errormsg" : "в случае ошибки ее код",
"content" : "текст определения"
}

Это структура данных, известная как JSON. Она воспринимается JavaScript в явном виде, как «родная». В случае использования AJAX-библиотеки YAHOO ответ контроллера обслуживается следующей конструкцией

var handleSuccess = function(o){
	if(o.responseText !== undefined){
		showMessage(o.responseText);
	}
};

var handleFailure = function(o){
	if(o.responseText !== undefined){
		showMessage("Connection Error");
	}
};

var callback =
{
  success:handleSuccess,
  failure:handleFailure,
  argument:['foo','bar']
};

Нам осталось лишь описать функцию showMessage(), которая помещает принятый текст определения в окно сообщения

function showMessage(json) {
	var respondStructure = eval( '(' + json + ')' ); 
	MessageObj.innerHTML = respondStructure.content;
	return false;
}

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

function hideMessage(){
	var MessageObj=document.getElementById('InstantMessage');
	MessageObj.style.visibility="hidden";
}

Когда вы будете опробовать этот пример, едва ли вы встретитесь с проблемами под браузером MS IE, однако, в FireFox вы можете обнаружить мерцание окна сообщения. Это связано с тем, что FireFox своеобразно обслуживает события onMouseOver/onMouseOut. Впрочем, эту проблему можно решить путем расстановки флагов задержки в функциях обслуживания этих событий.

Скрипты приведенного здесь примера можно загрузить здесь

Работу примера можно увидеть здесь


Информация об авторе.

Дмитрий Шейко
www.cmsdevelopment.com

Ведущий программист Red Graphic Systems

Занят разработкой программного обеспечения с 1987 года. Начиная с 1998 года опубликовал более 50 технических статей в специализированных изданиях. С 2001 года разрабатывает архитектурные решения и инструментальные средства для управления содержанием (Content Management, CMF, ECM). В 2004 году разработал и опубликовал спецификацию универсального языка для разработчиков CMS XML Sapiens

Подписка на новости IT-портала CITForum.ru
(библиотека, CITKIT.ru, CitCity)

Новые публикации:

24 декабря

CITKIT.ru:

  • Новогодние поздравления
  • Сергей Кузнецов. Цикл Операционные системы: Ностальгия по будущему:

  • Алексей Федорчук. OpenSolaris 2008.11 Release

  • Сергей Голубев:

  • Евгений Чайкин aka StraNNik (Блогометки):

    17 декабря

  • С.Д.Кузнецов. Базы данных. Вводный курс

    10 декабря

    CITKIT.ru:

  • OpenSolaris 2008.11 Release

  • Альтернативные ОС: две грустные истории (С.Кузнецов)
  • Nokia N810 — доведение до ума
  • CitCity:

  • Платформа 2009: заоблачные перспективы Microsoft

    4 декабря

  • Лекция С.Д.Кузнецова Понятие модели данных. Обзор разновидностей моделей данных

    CITKIT.ru:

  • OpenSolaris 2008.11 Release. Первые впечатления

  • Linux vs FreeBSD: продолжим "Священные войны"?

  • Nokia N810 as is

  • Индульгенция для FOSS

  • Друзья СПО'2008

    26 ноября

  • Нечеткое сравнение коллекций: семантический и алгоритмический аспекты

    CitCity:

    CITKIT.ru:

  • Глава из книги А.Федорчука
    Сага о FreeBSD:
  • 19 ноября

  • Проблемы экономики производства крупных программных продуктов

  • Язык модификации данных формата XML функциональными методами

    CITKIT.ru:

  • Главы из книги А.Федорчука
    Сага о FreeBSD:

    Заметки к книге:

  • FreeBSD: монтирование сменных устройств и механизм HAL
  • Текстовый редактор ee

    12 ноября

  • Правило пяти минут двадцать лет спустя, и как флэш-память изменяет правила (Гоц Грейф, перевод: Сергей Кузнецов)

    CITKIT.ru:

  • Главы из книги А.Федорчука
    Сага о FreeBSD:
  • OSS в России: взгляд правоведа (В.Житомирский)

  • Новая статья из цикла С.Голубева "Железный марш":

    29 октября

  • О некоторых задачах обратной инженерии

  • Веб-сервисы и Ruby

  • Тестирование web-приложений с помощью Ruby

    CITKIT.ru:

  • Главы из книги А.Федорчука
    Сага о FreeBSD:

  • PuppyRus Linux - беседа с разработчиком (С.Голубев)

  • Сергей Кузнецов. Заметка не про Linux

    22 октября

  • Обзор методов описания встраиваемой аппаратуры и построения инструментария кросс-разработки

    CITKIT.ru:

  • Сергей Кузнецов. Почему я равнодушен к Linux

  • Глава из книги А.Федорчука
    Сага о FreeBSD:
  • Что надо иметь
    3. Базовые познания

    CitCity:

  • Управление IT-инфраструктурой на основе продуктов Microsoft

    15 октября

  • Методы бикластеризации для анализа интернет-данных

    CitCity:

  • Разъемы на ноутбуках: что они дают и зачем их так много?
  • AMD Puma и Intel Centrino 2: кто лучше?

    CITKIT.ru:

  • Новый цикл статей С.Голубева
    Железный марш:

  • Главы из книги А.Федорчука
    Сага о FreeBSD:

    8 октября

  • Автоматизация тестирования web-приложений, основанных на скриптовых языках
  • Опыт применения технологии Azov для тестирования библиотеки Qt3

    Обзоры журнала Computer:

  • SOA с гарантией качества
  • Пикоджоуль ватт бережет
  • ICT и всемирное развитие

    CitCity:

  • Пиррова победа корпорации Microsoft

    CITKIT.ru:

  • Главы из книги А.Федорчука
    Сага о FreeBSD:

    Статья из архива:

  • Я живу в FreeBSD (Вадим Колонцов)

    Новые Блогометки:

  • Перекройка шаблона Blogger или N шагов к настоящему
  • Blogger. Comment style
  • Screenie или глянцевый снимок экрана

    2 октября

    CITKIT.ru:

  • Сага о FreeBSD (А. Федорчук)

    Zenwalk: пакет недели

  • Банинг — интеллектуальное развлечение (С.Голубев)

    CitCity:

    25 сентября

  • Клермонтский отчет об исследованиях в области баз данных

    CITKIT.ru:

  • Пользователям просьба не беспокоиться... (В.Попов)

  • Снова про ZFS: диск хорошо, а два лучше
  • Командная оболочка tcsh (А.Федорчук)

    Zenwalk: пакет недели

    17 сентября

  • T2C: технология автоматизированной разработки тестов базовой функциональности программных интерфейсов
  • Технология Azov автоматизации массового создания тестов работоспособности

    CITKIT.ru:

  • FreeBSD: ZFS vs UFS, и обе-две — против всех (А.Федорчук)

    Zenwalk: пакет недели

  • Дачнет — практика без теории (С.Голубев)

    10 сентября

  • За чем следить и чем управлять при работе приложений с Oracle
  • Планировщик заданий в Oracle
    (В.Пржиялковский)

    CITKIT.ru:

  • Microsoft: ответный "боян" (С.Голубев)

  • Причуды симбиоза, или снова "сделай сам" (В.Попов)

  • Файловые системы современного Linux'а: последнее тестирование
  • Zsh. Введение и обзор возможностей
    (А.Федорчук)

    Описания пакетов Zenwalk: Zsh, Thunar, Thunar-bulk-rename, Xfce4-places-plugin, Xfce4-fsguard-plugin

    Блогометки:

  • Google Chrome
  • Лончер для ASUS Eee PC 701

    3 сентября

    CITKIT.ru:

  • Заметки о ядре (А.Федорчук):

    Добавлены описания пакетов Zenwalk: Galculator, Screenshot, Gnumeric, Pidgin

    В дискуссинном клубе:

  • И еще о Википедии и Google Knol

  • Лекция для начинающего линуксоида (С.Голубев)

    26 августа

  • Транзакционная память (Пересказ: С. Кузнецов)

    CITKIT.ru:

  • Открыт новый проект Zenwalk: пакет недели

  • Статья Текстовые процессоры и их быстродействие: конец еще одной легенды?

    21 августа

    CITKIT.ru:

  • Почему школам следует использовать только свободные программы (Ричард Столлман)
  • Беседа Сергея Голубева с учителем В.В.Михайловым

  • Википедия или Гуглезнание? Приглашение к обсуждению (Алексей Федорчук)
  • Народная энциклопедия от Google (StraNNik)

  • Обзор Mandriva 2009.0 Beta 1 Thornicrofti
  • Новичок в Линукс: Оптимизируем Mandriva 2008.1

  • Книга Zenwalk. Приобщение к Linux:

    13 августа

    CitCity:

  • Мирный Atom на службе человеку. Обзор платы Intel D945GCLF с интегрированным процессором
  • Обзор процессоров Intel Atom 230 на ядре Diamondville

  • iPhone - год спустя. Скоро и в России?

    CITKIT.ru:

  • Интермедия 3.4. GRUB: установка и настройка (из книги Zenwalk. Приобщение к Linux)

    6 августа

  • СУБД с хранением данных по столбцами и по строкам: насколько они отличаются в действительности? (Пересказ: С. Кузнецов)

    CITKIT.ru:

  • Интермедия 2.2. Что неплохо знать для начала (из книги Zenwalk. Приобщение к Linux)

  • И снова про шрифты в Иксах (А.Федорчук)

  • 20 самых быстрых и простых оконных менеджеров для Linux

  • Дело о трех миллиардах (С.Голубев)

    30 июля

  • OLTP в Зазеркалье (Пересказ: С. Кузнецов)

    CitCity:

  • Будущее BI в облаках?
  • Тиражные приложения и заказная разработка. Преимущества для заказчика
  • Дискуссия со сторонниками заказной разработки

    CITKIT.ru:

  • Новые главы книги Zenwalk. Приобщение к Linux:
  • Глава 8. Пакеты: средства установки, системы управления, системы построения
  • Глава 9. Zenwalk: репозитории, пакеты, методы установки

    23 июля

    CITKIT.ru:

  • Все против всех. 64 vs 32, Intel vs AMD, tmpfs vs ext3
  • Две головы от Intel

  • Zenwalk: обзор штатных приложений (глава из книги "Zenwalk. Приобщение к Linux")

  • Нормально, Григорий...

    16 июля

    Обзоры журнала Computer:

  • Перспективы и проблемы программной инженерии в XXI веке
  • Большие хлопоты с большими объемами данных
  • Перспективы наноэлектроники

    CITKIT.ru:

  • Интермедия о лицензиях (А.Федорчук. "Zenwalk. Приобщение к Linux")

  • Есть ли будущее у KDE?

  • Linux в школе: альтернативный вариант в задачах

  • Шифр (приключения агента Никодима)

    10 июля

    CITKIT.ru:

  • Новые разделы книги А. Федорчука Zenwalk. Приобщение к Linux:
  • Интермедия вступительная. Linux или GNU/Linux? Как вас теперь называть?
  • Глава 5. Среда Xfce
  • Глава 6. Xfce: приложения и плагины

  • ZUR (Zenwalk User Repository) FAQ

    2 июля

  • Персистентность данных в объектно-ориентированных приложениях (С. Кузнецов)

    CITKIT.ru:

  • Новые разделы книги А. Федорчука Zenwalk. Приобщение к Linux:
  • Интермедия 1.2. Дорога к Zenwalk'у. Период бури и натиска
  • Интермедия 3.3. Немного о Linux'е и "железе"
  • Глава 4. Настройка: инструментами и руками
  • Интермедия 4.1. Zenpanel и конфиги: поиски корреляции

  • Интервью с Жан-Филиппом Гийоменом, создателем дистрибутива Zenwalk

  • Linux в школе: первые итоги (С. Голубев)

    25 июня

    CITKIT.ru:

  • Zenwalk. Приобщение к Linux (А. Федорчук)

  • Логика и риторика (С.Голубев)

  • Технология Tru64 AdvFS

  • Ханс Райзер предлагает отвести полицейских к телу Нины

    18 июня

  • Проекты по управлению данными в Google (Пересказ: С. Кузнецов)

    CITKIT.ru:

  • ОС и поддержка "железа": мифы и реальность (А. Федорчук)

  • Linux в школе: другие дистрибутивы

  • Пинок (С. Голубев)

    4 июня

  • Ландшафт области управления данными: аналитический обзор (С. Кузнецов)

    CITKIT.ru:

  • Linux в школе: слово заинтересованным лицам

  • SlackBuild: пакеты своими руками

  • Linux от компании Novell. Установка и обзор openSUSE Linux

    Все публикации >>>




  • IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware

    Информация для рекламодателей Пресс-релизы — pr@citcity.ru
    Послать комментарий
    Информация для авторов
    Rambler's Top100 This Web server launched on February 24, 1997
    Copyright © 1997-2017 CIT, © 2001-2017 CIT Forum
    Внимание! Любой из материалов, опубликованных на этом сервере, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Подробнее...