Ejemplo de comprobación de enlaces internos con Ajax
0 COMENTARIOS - Publicado hace 42 meses - Clasificado en: AJAX, TUTORIALES, TIPSEste 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:
- Combos dependientes II
- Comprobar si existe un usuario con AJAX
- Ajax con jQuery: el método load()
- DOMTool: Crea código DOM a partir de HTML
- Ajax II: Un primer vistazo al DOM
También te puede interesar:
| How to build a website for free? (Seriously!!!) | Construyendo mejores formularios: Resaltar el contexto utilizando jQuery | Gamershood.com | 10 plugins jQuery para realizar tooltips | Fennec: Firefox para móviles |





















Andres en Arte vs Diseño




