Заставляем AJAX читать между строк

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

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

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

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

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

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

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

В параметре функции, отображающей окно (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. Каким бы языком программирования все мы никак не пользовались при написании контроллера, нам очень выполнить немножко простейших операций.
соединиться вместе с базой данных
выполнить SQL запрос ради получения определения термина
отобразить на консоль итог в очередном виде:

"errormsg" : "в случае ошибки ее код",
"content" : "текст определения"

Это структура данных, известная как будто JSON. Она воспринимается JavaScript в явном виде, как будто <родная>. В случае приминения AJAX-библиотеки YAHOO ответ контроллера обслуживается следующей конструкцией
var handleSuccess = function(o)
if(o.responseText !== undefined){
showMessage(o.responseText);

showMessage(o.responseText);

};

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

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