How to make AJAX read between the lines

The pages on your site contain many specialized terms. When a user browses your site, they may have questions about these terms. How can you make sure that as questions arise, the user can get answers right away? Previously, the terms on the pages were linked and the user could click on them to get a context hint window if they wanted to. This approach was rather clumsy and took too much of the user’s time – to click on the link, wait for the window to load and then close the window. In the era of AJAX, we can be more responsive to user input. We can make it so that when you hover the mouse over the term, a tooltip message will appear immediately and as soon as the cursor is moved from the term, the message will disappear. The presence of this service will not affect the amount of pages on the site. When requesting a context hint, Java Script will refer to an external dictionary, retrieve the content and display it.

The method of retrieving information from an implicit query can be used for more than just a term dictionary. Have you noticed the double-underline links in projects like hotscripts.com and devarticles.com? These are contextual ads based on Vibrant Media’s IntelliTXT engine. When you hover your mouse over such a link, a window appears with an advertising offer on a relevant topic. This technology is already called in-text advertising.

This method is increasingly used on news portals as well. Visitors see only the news headlines on the main page of the portal. However, when they hover their mouse over the news title, they get a short description of the news. Thus, the main page of the portal can hold much more news. Visitors of the portal will see the headlines and in order to get the news announcements they just need to run the mouse cursor over the headlines.

Let’s now look at how the contextual cues implemented with AJAX. A programmer who mastered this method, it is not difficult to make the portal to comment on the news on demand, or write a module of in-text advertising.

So, obviously we need to take care of the message window, the one that will appear every time the visitor hovered over the term. To make the window appear and disappear instantly, we should put it on a hidden DIV.

For simplicity, we can design it in the style of MS Windows system messages.

<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: #ffffffff; background: #0A246A}

</style>.
Ajax for Java Developers: Part 2. Ways to serialize data for Ajax

The window should appear when the visitor hovers over the term and disappear when the mouse pointer is outside the term. At that moment, the window must contain the text of the term definition, not a space. So we have to put the terms in the text of the document into an inline tag that supports the onMouseOver and onMouseOut events. The first event needs to have a JavaScript function assigned to it that gets the definition of the term, puts it in the message window, and displays the window. The second event requires you to assign a function that simply hides the message window.