Seguimos presentando artículos que ilustran el trabajo con PHP y Ajax, para nuestro manual Trabajo con Ajax en PHP utilizando Xajax. En este caso vamos a realizar una comprobación de la validez de una URL escrita por el usuario.

En este ejemplo tendremos un formulario donde el usuario podrá escribir la URL de un sitio web. Con Ajax comprobaremos su validez, desde el punto de vista sintáctico (tiene que empezar por http://) y luego haremos una pequeña utilidad para que el visitante pueda ver el sitio web que se proporciona dentro de un iframe. Si el sitio web se ve correctamente dentro del iframe es que la URL es correcta.

Podemos ver el ejemplo en funcionamiento para hacernos una idea más concreta del objetivo de este taller.

De nuevo comento que este ejercicio lo hemos creado ayudándonos de las librerías Xajax, por lo que no explicaré los detalles del uso de Xajax.

Vamos a empezar viendo el formulario HTML que hemos creado:

<form name="formulario">
URL: <input type="text" name="url">
<input type="button" name="comprobar_url" value="Comprobar URL" onclick="xajax_comprobar_url(document.formulario.url.value)">
<div id="comprobacion"></div>
<br>
Título: <input type="text" name="titulo">
</form>

Simplemente tiene un campo de texto de la URL y un botón, que al pulsarlo se lanza la comprobación. Luego encontramos un <div id="comprobacion">, donde mostraremos el resultado de la validación por medio de Ajax. El último campo de texto no lo utilizamos para nada.

Al pulsar el botón, evento onclick, se llama a una función que hace uso de Ajax. Esta función está escrita en PHP. Mediante xajax conseguimos que se pueda ejecutar con una llamada desde Javascript a esta función PHP.

function comprobar_url($miurl){
   if($miurl == ""){
      $texto_result = "Debes escribir una URL";
   }elseif(substr($miurl, 0, 7) != "http://"){
      $texto_result = "La URL debe comenzar por http://";
   }else{
      $texto_result = '<iframe width="600" height="200" src="' . $miurl . '"></iframe>
                  <br>
                  <a href="#" onclick="xajax_NO_comprobar_url()">Ocultar...</a>';
   }
   $respuesta = new xajaxResponse('ISO-8859-1');
   $respuesta->addAssign("comprobacion","innerHTML",$texto_result);
   return $respuesta;
}

La función recibe en el parámetro $miurl la URL que se desea validar. Primero realiza un par de validaciones simples, que generan mensajes de error si no la URL es un string vacío o si la URL no comienza por "http://".

Luego, para que el usuario valide visualmente que la dirección que ha escrito corresponde con la URL que quería enviar, se muestra un <iframe> con la URL de la página que ha escrito en el formulario. Si la URL estaba bien escrita el usuario podrá verla dentro del <iframe>. Además, para comodidad del usuario, hemos puesto debajo un enlace para ocultar el <iframe>. Ese enlace llama a otra función por medio de Ajax que borra de la página el <iframe>.

function NO_comprobar_url(){
   $texto_result = '';
   $respuesta = new xajaxResponse('ISO-8859-1');
   $respuesta->addAssign("comprobacion","innerHTML",$texto_result);
   return $respuesta;
}

En realidad, si hemos seguido el manual Trabajo con Ajax en PHP utilizando Xajax, no será muy difícil poner en marcha este ejercicio por nuestra cuenta.

Dejamos el código fuente completo de este taller de Ajax y PHP con Xajax.

<?
session_start();

//incluímos la clase ajax
require ('xajax/xajax.inc.php');

//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();

function comprobar_url($miurl){
   if($miurl == ""){
      $texto_result = "Debes escribir una URL";
   }elseif(substr($miurl, 0, 7) != "http://"){
      $texto_result = "La URL debe comenzar por http://";
   }else{
      $texto_result = '<iframe width="600" height="200" src="' . $miurl . '"></iframe>
                  <br>
                  <a href="#" onclick="xajax_NO_comprobar_url()">Ocultar...</a>';
   }
   $respuesta = new xajaxResponse('ISO-8859-1');
   $respuesta->addAssign("comprobacion","innerHTML",$texto_result);
   return $respuesta;
}

function NO_comprobar_url(){
   $texto_result = '';
   $respuesta = new xajaxResponse('ISO-8859-1');
   $respuesta->addAssign("comprobacion","innerHTML",$texto_result);
   return $respuesta;
}

$xajax->registerFunction("comprobar_url");
$xajax->registerFunction("NO_comprobar_url");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
?>
<html>
<head>
   <title>Comprobar URL por iframe y ajax</title>
   <?
   //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
   $xajax->printJavascript("xajax/");
   ?>
   
</head>

<body>

<form name="formulario">
URL: <input type="text" name="url">
<input type="button" name="comprobar_url" value="Comprobar URL" onclick="xajax_comprobar_url(document.formulario.url.value)">
<div id="comprobacion"></div>
<br>
Título: <input type="text" name="titulo">
</form>

</body>
</html>