Javascript no intrusivo, scripts remotos

  • May
  • 26

escribe tu comentario! 233 palabras - 1 hits

mejorar la accesibilidad de un sitio web, no es cuestion de tecnologia, es cuestion de actitud

Cuando me decido a incluir algún tipo de script que dependa del soporte del navegador, siempre me gusta ofrecer una opción alternativa intentando que el funcionamiento resulte lo mas similar posible en todos los escenarios.

De nuevo, la librería prototype hace que esto sea sumamente sencillo, supongamos el siguiente ejemplo, tenemos un bloque de texto que contiene un enlace, nuestra intención es que el enlace apunte a una url real, en el caso de que el usuario soporte JavaScript, el contenido se actualizara sin necesidad de que el navegador refresque la ventana, en caso contrario el enlace actuara de forma normal.

Como siempre, para facilitarnos las cosas, le asignaremos una id al enlace, lo que nos permitirá acceder a el de una forma limpia, recordad, con prototype acceder a un elemento por su id es tan sencillo como $('id-del-objeto');.

El truco para que todo esto funcione se basa en que prototype pasa una cabecera propia con cada llamada remota, característica que se puede aprovechar en nuestro script para que responda de forma diferente según el tipo de petición.

  1.  
  2.     <?php
  3.     function isAjax() {
  4.         return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER ['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
  5.     }
  6.     if (isAjax()) {
  7.     ?>
  8.     <p>respuesta a una llamada remota</p>
  9.     <?php
  10.     } else {
  11.     ?>
  12.     ...
  13.     <p>respuesta normal</p>
  14.     ...
  15.     <?php } ?>
  16.  

Creo que se entenderá mejor si veis el ejemplo que he preparado, todas las lineas de la función JavaScript están comentadas, con lo que estoy seguro de que no quedaran dudas, aunque como siempre, tenéis el formulario para hacer vuestros comentarios.

ningún comentario por el momento

Escribe tu comentario

Puedes utilizar este formulario para escribir tu opinion sobre esta entrada, no existe ningun tipo de limitacion a la hora de enviar opiniones, tan solo sigue unas reglas basicas de cortesia y todos estaremos mas contentos.

Puedes identificarte utilizando OpenID, solo tienes que introducir tu URL OpenID en el siguiente campo y pulsar el boton de validar.





Instrucciones para los comentarios

El simbolo * indica que se trata de un campo obligatorio.

Este sitio usa Markdown junto con Smartypants para educar los textos, tambien esta disponible para los comentarios.

A continuación os muestro algunas de las equivalencias:

  • [enlace de ejemplo](http://example.com/) resulta enlace de ejemplo.
  • **Texto en Negrita**
  • _Italica_
  • > blockquote
  • > > nested blockquote
  • * Esto es un elemento de una lista desordenada (ul)
  • 1. Esto es un elemento de una lista ordenada (ol)

MC Puedes seguir las respuestas a tus comentarios con MyComments.