Ejemplo de comprobación de enlaces internos con Ajax
Comentarios: 0Tags: AJAX, TUTORIALES, TIPS
Fecha: 20/09/2006
Este ejemplo sirve para comprobar los enlaces internos del propio sitio. El ejemplo hace uso de AJAX y del objeto XMLHttpRequest, que tiene ciertas limitaciones como es la imposibilidad de hacer llamadas a otros dominios. He estado leyendo algún que otro artículo sobre cómo saltarse esta limitación pero lo cierto es que no he sacado nada en claro. Sería muy interesante poder saltarse la limitación para poder crear una aplicación en AJAX que testease todos los links, tanto internos como externos, de un sitio. De momento, como ya he dicho, éste ejemplo testea los links internos.
El ejemplo se sustenta en tutoriales anteriores de Ajax y en algunos ejemplos ya expuestos de Javascript.
Ver ejemplo en funcionamiento » »
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript">
var i=0;
function getreq()
{
if(window.XMLHttpRequest)
return new XMLHttpRequest();
else if(window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
}
function cargarEnlace() {
var links=document.getElementsByTagName("a");
peticion = getreq();
if(peticion.readyState == 4 || peticion.readyState == 0) {
if (i< links.length){
var url = document.links[i].href;
peticion.onreadystatechange = imagexists;
peticion.open("get", url, true);
peticion.send(null);
}
}
}
function imagexists(){
if(peticion.readyState == 4) {
if(peticion.status == 200)
{
document.links[i].style.color = "#438811";
i++;
cargarEnlace();
}
else
{
document.links[i].style.color = "#F5601E";
i++;
cargarEnlace();
}
}
}
window.onload=cargarEnlace;
</script>
<style type="text/css">
<!--
body { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #333;}
a { font: 12px Verdana, Arial, Helvetica, sans-serif; color: #CCC; text-decoration:none}
ul { list-style: none;}
-->
</style>
</head>
<body>
<p>Comprobación de los enlaces de las secciones del blog:</p>
<ul>
<li>
<a href="http://www.webintenta.com/category/ajax/">
AJAX</a>
</li><li>
<a href="http://www.webintenta.com/category/ASP/">
ASP</a>
</li><li>
<a href="http://www.webintenta.com/category/PHP/">
PHP</a>
</li><li>
<a href="http://www.webintenta.com/category/CSS/">
CSS</a>
</li><li>
<a href="http://www.webintenta.com/category/diseno/">
Diseño</a>
</li><li>
<a href="http://www.webintenta.com/noexiste/">
No existe</a>
</li><li>
<a href="http://www.webintenta.com/category/javascript/">
Javascript</a>
</li><li>
<a href="http://www.webintenta.com/category/fotografia/">
FotografÃÂa</a>
</li>
</ul>
</body>
Algunas entradas relacionadas:
- Ajax con jQuery: el método load()
- DOMTool: Crea código DOM a partir de HTML
- Combos dependientes II
- Ajax II: Un primer vistazo al DOM
- Comprobar si existe un usuario con AJAX
Construyendo un verdadero triple click con jQuery
arturo Romo en 16 acciones de Photoshop para dar profesionalidad a tus imágenes
