Ejemplo de comprobación de enlaces internos con Ajax

0 COMENTARIOS - Publicado hace 42 meses - Clasificado en: AJAX, TUTORIALES, TIPS

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/">
	Fotografia</a>
	</li>
</ul>
</body>
</html>

Algunas entradas relacionadas: