Sunday, June 10, 2007

Ajax - To begin

To begin ...

The pages of your site contains many specialized terms. When a user browses the site, it may raise questions regarding these terms. How do I get a visitor to a site where there are questions to delay answering questions? Previously, the terms of pages processed as a reference and the user can choose to click on them and get a window with contextual cues. This approach is quite awkward, it takes the user too much time to click on the link to await loading window, and then close the window. In an era of AJAX we can be closer to the wishes of users. We can make sure that when you have a mouse on the word immediately appear communication with the display and once with the mouse cursor extended term, the message disappeared. The presence of this service will not affect the volume of pages. When requesting contextual cues Java Script will apply to foreign vocabulary, receive and display its contents.

The method of obtaining information on the implicit request can be applied not only in the dictionary of terms. Foundation you look for the link with a double emphasis in such projects as hotscripts.com and devarticles.com? This contextual advertising based on the engine IntelliTXT company Vibrant Media. When you move your mouse over the link that appears in the window advertising the offer on the subject. This technology has already been dubbed in-text advertising.

Increasingly, the method applies to news portals. Visitors see on the front page of the portal only headlines. But when you move your mouse over the headline news they get their brief description. Thus, on the front page of the portal can accommodate as much more news. A visitor sees the headlines and the portal to get news announcements, it will be enough probezhatsya mouse cursor to the title.

Let us now look at how the contextual help is implemented using AJAX. Programmer, mastered this technique can be worked out to make news portal comment on the request or write module in-text advertising.

So, obviously we need to take care of the message ever, which will appear every time a visitor makes cursor to the term. To window appeared and disappeared overnight, it should be placed in hidden DIV. For a simple experiment, we can make it in the style of MS Windows system messages. The window should appear when the visitor checked your cursor over the term and disappear when the mouse cursor will be outside of the term. But at the moment the window should no longer gap, and the text of the definition of the term. Thus, we need to put the terms in the text and in inline tag, supporting events onMouseOver and onMouseOut. The first event should appoint the JavaScript, which would be the definition of the term, puts it in the window and displays a message box. The second event is to appoint a feature that simply leaving the message box. The parameter function, depicting window (getDefenition) Communications must identify the term. This term is used to query text of the definition by AJAX. Since your windows, we need his position under the mouse cursor to support Gecko-bazirovanyh browsers in this function should also be referred parameter event. The function to hide window (hideMessage) does not require any parameters. Now our task is to make the function call getDefinition JavaScript position reporting window. So, we have a window of communication, raportuyuschee of downloading data. Now, you request to the controller for the definition of the term. You can write your own functions for AJAX requests. But if you are just starting to work with AJAX, I suggest you ready library of Yahoo. The inquiry will be : If we ask controller, it is clear we have to write it. In general, this is the easiest part. The controller-back description of the term, according to POST. However language we use when writing controller, we simply follow a few simple operations. connect to a database with SQL query for the definition of a display on the console, as follows : This data structure, known as JSON. She perceived JavaScript explicitly, as <native>. If AJAX-biblioteki YAHOO response service next controller design We have only describe as showMessage (), which puts the text in the message box definition As you can imagine, to conceal the message will only change the attribute of When you try this example, it is unlikely that you will face problems with MS IE browser, but in FireFox you will find blinking the message. This is because FireFox unique event serves onMouseOver / onMouseOut. However, this problem can be overcome by placing flags delays in service functions of these events.

Scripts are given examples can be downloaded here.

No comments: