Código fuente JavaScript | Pixabay
Que tal:
Este es mi primer post en Publish0x y espero no sea el único ni el último.
Mi nombre es Juan Manuel, soy programador de sistemas y quiero compartirles el código fuente de una rutina en JavaScript para recuperar el contenido de un archivo mediante AJAX en la modalidad GET, es decir podemos pasarle parámetros al archivo a descargar directamente en la ruta del mismo.
El significado de AJAX es Asynchronous JavaScript And XML (JavaScript asíncrono y XML), mediante esta tecnología podemos recuperar el contenido de un archivo desde el mismo servidor donde estemos trabajando o desde un servidor externo. Esta rutina solo funciona para recuperar archivos locales y está probada unicamente con archivos de texto (páginas web, documentos de texto propiamente, etc); del mismo modo funciona solo para recuperar archivos desde el mismo servidor donde estemos trabajando (posteriormente veré la manera de que funcione tanto para archivos locales como para los que esten alojados en servidores externos, pero eso será pronto - espero).
Empecemos por ver la rutina de recuperación de archivos usando JavaScript:
//thanks to http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-re
//thanks to https://www.christianheilmann.com/2010/01/10/loading-external-content-with-ajax-using-jquery-and-yql/
function getFileFromAJAXGETMethod(url, timeout)
{
var html = "";
jQuery.ajax({
url: url,
type: "get",
success: function(data)
{
html = data;
},
async: false,
timeout: timeout
});
return html;
}
Como pueden ver se trata de una rutina muy sencillita, sin embargo es necesario previamente incluir la librería JQuery para que todo esto funcione, si la tenemos en la misma carpeta donde se encuentre este script entonces escribiremos previamente lo siguiente:
<script language="JavaScript">
document.write("<scr"+"ipt language='javascript' type='text/javascript' src='jquery.js'></scr"+"ipt>");
</script>
Si queremos incorporarla directamente desde Internet (necesitaremos estar conectados a la red todo el tiempo), entonces escribiremos lo siguiente:
<script language="JavaScript">
document.write("<scr"+"ipt language='javascript' type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js'></scr"+"ipt>");
</script>
Ahora solo restaría crear una rutina para mostrar el contenido de un archivo directamente en nuestra página web usando la rutina que hemos creado:
<div id="area"></div>
<input type="button" value="Obtener archivo" onClick="JavaScript:getfile('data.php?some=Hello%20world');">
Esta es la rutina que recupera el archivo y lo muestra (la insertaremos bajo la función getFileFromAJAXGETMethod, al final habrá un ejemplo completo):
function getfile(var path)
{
var file = getFileFromAJAXGETMethod(path, 60000);
if(file == "" || file == "undefined")
document.getElementById("area").innerHTML = "Error al recuperar el archivo";
else
document.getElementById("area").innerHTML = "Contenido del archivo<hr>" + file;
}
Y este es el archivo a recuperar (data.php), mediante getFileFromAJAXGETMethod podemos especificar parámetros en la ruta para ese archivo. La salida de este archivo será el parámetro que hemos enviado:
<?
if(isset($_GET["some"]))
echo "Parámetros: <b>".trim($_GET["some"])."</b>";
else
echo "Ningún parámetro enviado";
?>
Este es el resultado cuando presionamos el botón "Obtener archivo":
Como podemos ver hemos recuperado el contenido del archivo data.php y lo mostramos en el contenedor <DIV> de nuestro archivo de prueba, si hay éxito se mostrará el contenido del archivo, de lo contrario un mensaje de error, además podemos asignar un periodo de vida para esta solicitud, siendo en este caso 60000 milisegundos 8osea un minuto).
Ahora veamos el código fuente completo:
Archivo de prueba (index.html, pueden ponerle el nombre que gusten):
<html>
<head>
<title>Prueba AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script language="JavaScript">
<!--
//thanks to http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-re
//thanks to https://www.christianheilmann.com/2010/01/10/loading-external-content-with-ajax-using-jquery-and-yql/
function getFileFromAJAXGETMethod(url, timeout)
{
var html = "";
jQuery.ajax({
url: url,
type: "get",
success: function(data)
{
html = data;
},
async: false,
timeout: timeout
});
return html;
}
function getfile(path)
{
var file = getFileFromAJAXGETMethod(path, 60000);
if(file == "" || file == "undefined")
document.getElementById("area").innerHTML = "Error al recuperar el archivo";
else
document.getElementById("area").innerHTML = "Contenido del archivo<hr>" + file;
}
-->
</script>
</head>
<body>
<div id="area"></div>
<input type="button" value="Obtener archivo" onClick="JavaScript:getfile('data.php?some=Hello%20world');">
</body>
</html>
Contenido del archivo data.php (es necesario estar dentro de un servidor web, local o en internet para manejar archivos PHP).
<?
if(isset($_GET["some"]))
echo "Parámetros: <b>".trim($_GET["some"])."</b>";
else
echo "Ningún parámetro enviado";
?>
Conclusiones:
Es muy sencillo obtener el contenido de un archivo y mostrarlo en nuestra web, hoy en día el uso de AJAX está muy extendido y ahora hemos visto como poder incorporar esa funcionalidad a nuestra web de una manera muy simple, espero les sea de utilidad éste código fuente, los invito a leer los próximos posts que se estarán publicando.
Lecturas adicionales:
AJAX en Wikipedia
