Як змусити AJAX читати між рядків

На сторінках вашого сайту міститься безліч спеціалізованих термінів. Коли користувач переглядає сайт, у нього можуть виникати питання щодо цих термінів. Як зробити так, щоб відвідувач сайту в міру виникнення питань міг негайно отримувати на них відповіді? Раніше терміни на сторінках сайту оформлялися як посилання і користувач при бажанні міг клікати по них і отримувати вікно з контекстної підказкою. Це підхід досить незграбний, він забирає у користувача занадто багато часу – на те, щоб клікнути по посиланню, дочекатися завантаження вікна і потім закрити вікно. В епоху AJAX ми можемо бути ближче до побажань користувачів. Ми можемо зробити так, щоб вже при наведенні миші на термін негайно з'являлося повідомлення з підказкою і як тільки курсор миші зрушать з терміну, повідомлення зникало. Наявність цього сервісу не відіб'ється на обсязі сторінок сайту. При запиті контекстної підказки Java Script буде звертатися до зовнішнього словника, отримувати зміст і відображати його.

Метод отримання інформації з неявному запиту може знайти застосування не тільки в словнику термінів. Чи звертали ви увагу на посилання з подвійним підкресленням в таких проектах як hotscripts.com і devarticles.com? Це контекстна реклама на основі движка IntelliTXT компанії Vibrant Media. При наведенні курсору миші на подібну посилання з'являється вікно з рекламною пропозицією на відповідну тему. Ця технологія вже отримала назву in-text advertising.

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

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

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


<div id="InstantMessage" class="instant_message"> </ 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. Яким би мовою програмування ми не користувалися при написанні контролера, нам достатньо виконати кілька простих операцій.

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

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

Роботу приклад можна побачити тут

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*