Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Lun29May2006

AJAX paso a paso: validar enlaces

13:00 H (CET)| Temas: AJAX · Especiales

En ocasiones en nuestros blogs o páginas ponemos una referencia a otro sitio, que cuando el visitante intenta acceder, se encuentra con que la página ya no está disponible. Vamos a hacer una pequeña función que una vez cargada la página vaya comprobando mediante AJAX si el enlace es correcto y si no lo es, lo modificaremos para que cuando se pulse en él, aparezca un mensaje indicando que ya no es un enlace válido.

El script PHP necesario para comprobar si existe un enlace es muy sencillo, aunque claro, se le podría incluir funcionalidades y hacerlo más completo, pero para comprender cómo funciona este ejemplo, nos es suficiente, para ello supondremos que el enlace tiene la ruta absoluta y no relativa.

<?php
    // Elimino los mensajes de warning para 
    // que no salgan en la respuesta
    error_reporting(E_ERROR);
    $url = $_GET["url"];

    $res = 0;
    // Miro si existe la URL
    $f = fopen($url, "r");
    if ($f===false) {
        // No existe
        $res = 0;
    } else {
        // Existe
        $res = 1;
    }
    fclose($f); 

    $xml  = '<?xml version="1.0" standalone="yes"?>';
    $xml .= '<datos>';
    // Devuelvo el id del objeto para poder referenciarlo
    $xml .= '<id>'.$_GET["id"].'</id>'; 
    $xml .= '<ok>'.$res.'</ok>';
    $xml .= '</datos>';
    header('Content-type: text/xml');
    echo $xml;        
?>

Como podemos ver, el script abre la url, y si existe, devuelve un 1 y si no un 0. Deshabilitamos los mensajes de errores para que no nos salgan los warning y nos estropeen la salida del XML.

En la página web tendremos dos métodos: uno que recorre los enlaces y si no tiene id se lo añadimos para que se posible acceder al él más tarde; y otro que comprueba para cada enlace si existe, y si no es así modifica el href para que salga un mensaje de aviso, después de procesar ese enlace llama al siguiente enlace.

// Comprueba si el enlace es válido o no
function compruebaEnlace (_id, href) {
    ajax = ajaxobj();
    ajax.open("GET", "enlaces.php?url="+
      escape(href)+"&id="+_id, true); 
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            var res = ajax.responseXML;
            // Si no existe la URL cambio 
            // el enlace a un alert
            var ok = res.getElementsByTagName("ok");
            if (ok.item(0).firstChild.data != "1") {
                var idElem = res.getElementsByTagName("id");
                var obj = document.getElementById(
                  idElem.item(0).firstChild.data);
                obj.href="javascript:alert('Enlace no operativo')"; 
            }
            // Llamo al siguiente link
            enlaces();
        }
    }
    ajax.send(null);
}

// Comprueba el enlace en la posición guardada en ind
function enlaces() { 
    var objs = document.getElementsByTagName("A");
    
    // Si no estoy fuera de rango
    if (ind+1<objs.length) {
        var href=objs[ind].getAttribute("href");
        // Si no es una llamada a Javascript o a mailto 
        if (href.indexOf("javascript:") != 0 && href.indexOf("mailto:") != 0) {
            // Si no tiene ID se lo pongo para poder referenciarlo luego
            if (!objs[ind].id) { 
                objs[ind].id = "enlace"+ind;
            }
            compruebaEnlace(objs[ind].id, objs[ind].getAttribute("href"));
        }
        ind++;
    }
}

Relacionados

Feedback (3) » Formulario

1. cvander ~ Martes, 30 May 2006 | 06:02H:

Muy buen tutorial :)

2. Luis ~ Martes, 30 May 2006 | 09:13H:

Gracias, Christian. Enhorabuena a vosotros por el rediseño de Maestros del Web.

Saludos.

3. thxeeronx ~ Viernes, 27 Abr 2007 | 18:09H:

gracias por el tuto

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)