RELACION DEL COMPORTAMIENTO PLUVIMETRICO CON LOS EVENTOS DE

5. DISCUSION Y ANALISIS DEL ORIGEN DE LOS FLUJOS TORRENCIALES

5.5 RELACION DEL COMPORTAMIENTO PLUVIMETRICO CON LOS EVENTOS DE

When a user clicks a link on a web site, they expect something to happen. That something might be a loader appearing in the status bar, or the page going blank and then refreshing. Or perhaps a pop-up message appears. In any case, users are quite accus- tomed to some sort of action occurring when they click something—if nothing happens, they tend to get antsy and continue pressing the link, or eventually leave the site entirely.

It is not very good, then, that Ajax requests can frequently lead to some serious response time concerns. Let’s face it, when you put forth a request to a server, there is going to be some time involved with sending the request, processing it, and then sending

it back the browser. Now, with basic web-based navigation, the browser has a lot of built- in features to handle said latency—features that users are quite used to. Unfortunately, those features do not apply when putting forward an Ajax-based request.

When a user clicks an Ajax-enabled link, unless the developer has coded it in them- selves, nothing will occur onscreen for the user to understand that something is indeed happening. This can lead to repeated clicking and overall frustration, and it is up to us developers to take care of the situation. A decent way of handling this issue is by placing a loading image into the element toward which a request is heading. If you want to get fancy, an animated GIF loading image is even more user-friendly, as it truly gives the user the impression that something is happening.

Consider Figures 11-2 and 11-3, which show an example of loading an image into the screen for the user to view while a request is being processed.

Figure 11-2.If you display a loading image, users will understand that something is

happening.

Figure 11-3.They will therefore stick around until it is done.

Following is a very simple way to handle the dynamic loading button and subse- quent Ajax insertion. Listings 11-3 and 11-4 show the framework for setting up the trick.

Listing 11-3.The Basic Page Layout That Will Benefit from the Ajax Functionality

(sample11_3.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Sample 11_3</title> </head>

<body>

<h1>Ajax Response Workaround</h1>

<p><a href="#" onclick="loadajax ('test.html','loadpanel')">Click Me!</a></p> <div class="hidden" id="loadpanel"></div>

</body> </html>

Listing 11-4.The JavaScript Code That Will Process the Ajax-Based Request and Response

(functions.js)

//Function to process an XMLHttpRequest. function loadajax (serverPage, obj){

showLoadMsg ('Loading...');

document.getElementById(obj).style.visibility = "visible"; xmlhttp = getxmlhttp();

xmlhttp.open("GET", serverPage, true); xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

document.getElementById(obj).innerHTML = xmlhttp.responseText; }

}

xmlhttp.send(null); }

//Function to output a loading message. function showLoadMsg (msg){

hidden = document.getElementById('loadpanel');

hidden.innerHTML = '<img src="indicator.gif" alt="" /> ' + msg; }

Now, the key to this example is the hiddenclass designated by the id loadpanel. This

divhas its visibilitystyle set to hidden. When the loadajaxfunction is triggered, first the

showLoadMsgfunction is called. This function allows you to assign a message to the loading spinner image to let your users know what is happening. The visibilitystyle of the

loadpanelelement is then set to visible, and then an Ajax request is made. When the Ajax request finishes executing, it puts the results of the request into the loadpanelelement, thus overwriting the loading image and text. This way, the user knows what is going on at all times.

Degrading JavaScript Gracefully

While the user base that has JavaScript disabled in their web browser is reasonably small (less than 10 percent of users), it is slightly on the rise. Why is it on the rise? JavaScript has a bit of a bad rap, and more and more users are savvying up to securing their system. A good amount of users these days have been victims of a virus or two, and have learned that not all browsers are completely secure. How can they fight back? Why, by disabling JavaScript (as some would lead you to believe). We as developers know better, but the concept of degrading JavaScript is something you should certainly not take too lightly.

There are several notions to take into consideration when going about degrading your JavaScript. A few of them have actually been used in this very book, but I will go into a little bit more detail here on why it works and why you should go about doing it. It should be noted, however, that building a site that degrades nicely for both JavaScript- enabled and JavaScript-disabled users will take longer than one that does not—but you can be more certain that the majority of web users will be able to view and use your web project.

Perhaps an even more important note revolves around search engine spiders. While users with JavaScript enabled are able to follow Ajax-enabled linking structures, search engine spiders are not. Therefore, if you place a good portion of your content behind Ajax-enabled linking structures, you may be missing out on the benefits of having your web content indexed by a search engine. On a similar note, many sites also implement their navigation using JavaScript—meaning that search engines are unable to find these sites’ pages even if they’re notusing Ajax.

What can you do, then, to degrade your JavaScript so that all can partake of the good- ness? Well, it is really quite simple. Consider the following block of code, which would work fine if JavaScript were enabled and fail spectacularly if it were disabled:

<a href="#" onclick="processAjax ('myfile.html')">My Ajax Enabled Link</a>

Now, the problem with this example is that if the processAjaxfunction were to fail, nothing would happen. Not only that, search engines would find only the #character, thereby leading them to believe nothing else existed. Naturally, doing something like this is just as bad:

<a href="javascript:processAjax ('myfile.html')">My Ajax Enabled Link</a>

Now, this would also work if JavaScript were enabled, because it invokes the JavaScript protocol to call the processAjaxfunction. Once again, search engines and those who have JavaScript disabled will not be able to follow the link.

How do you get around this, then? Well, the most common way of getting the browser to do what you want in both cases involves using a return falsestatement (mentioned earlier) that will fire if JavaScript is enabled. The following code will work in all cases:

In document Origen y características de los flujos torrenciales, del río Mulato del municipio de Mocoa Departamento del Putumayo (página 171-176)