Conectados a Internet | Pixabay
En un artículo anterior había mostrado como recuperar el contenido de un archivo usando AJAX pero con el método GET, ahora continuando con el artículo veamos como podemos hacer lo mismo pero usando el método POST.
Como ya se mencionó anteriormente AJAX nos permite recuperar el contenido de archivos desde un servidor sin tener que salir de la web que estemos visitando. Para ello disponemos de dos maneras diferentes de recuperar los archivos: método GET y método POST.
La diferencia entre ambos es que GET anexa todos los parámetros a la línea de la dirección web mientras que POST los envia aparte, es decir no se ven en ningún momento en la ruta del documento, evitando con ello que alguien los pudiera manipular.
De nuevo, este script solo permite recuperar archivos locales, es decir en el mismo servidor, haré lo posible para que en el futuro se pueda recuperar también de servidores externos. 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 getFileFromAJAXPOSTMethod(url, valuepairstr, timeout)
{
var html = "";
jQuery.ajax({
url: url,
type: "post",
data: valuepairstr,
success: function(data, textStatus, jqXHR) {
html = data;
},
async: false,
timeout: timeout
});
return html;
}
Si tuvieron la oportunidad de leer el artículo anterior verán que es la función para recuperar el archivo es muy similar, e igualmente al artículo anterior debemos incorporar la librería JQuery para que todo esto funcione. Podemos cargarla desde nuestro propio servidor (en la misma carpeta donde tenemos este script) o directamente desde internet:
<script language="JavaScript">
document.write("<scr"+"ipt language='javascript' type='text/javascript' src='jquery.js'></scr"+"ipt>");
</script>
<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. Observación: En el ejemplo anterior la función getfile recibía solo un parámetro, mediante el proporcionabamos la ruta del documento seguido del signo "?" y luego el nombre del parámetro a enviar a nuestro documento por recuperar junto con el valor del parámetro. Mediante el método POST esto se separa quedando de la siguiente manera:
- El archivo a recuperar.
- El nombre del parámetro a enviar, seguido del signo "=" y a continuació el valor del parámetro.
Esto es así porque el método POST requiere otra estructura, no se envían dentro de la dirección web del documento a recuperar, sino en una conexión aparte y eso oculta sus valores como ya se mencionó antes, es por ello que se requiere este cambio en la función getfile.
<div id="area"></div>
<input type="button" value="Obtener archivo" onClick="JavaScript:getfile('data.php','some=Hello%20world');">
Y ahora veamos la nueva función getfile:
function getfile(path, var param)
{
var file = getFileFromAJAXPOSTMethod(path, param, 60000);
if(file == "" || file == "undefined")
document.getElementById("area").innerHTML = "Error al recuperar el archivo";
else
document.getElementById("area").innerHTML = "Contenido del archivo<hr>" + file;
}
Finalmente el archivo a recuperar (data.php) debe recuperar los parámetros enviados con la función $_POST en lugar de $_GET como se usó en la versión anterior.
<?
if(isset($_POST["some"]))
echo "Parámetros: <b>".trim($_POST["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 getFileFromAJAXPOSTMethod(url, valuepairstr, timeout)
{
var html = "";
jQuery.ajax({
url: url,
type: "post",
data: valuepairstr,
success: function(data, textStatus, jqXHR) {
html = data;
},
async: false,
timeout: timeout
});
return html;
}
function getfile(path, param)
{
var file = getFileFromAJAXPOSTMethod(path, param, 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($_POST["some"]))
echo "Parámetros: <b>".trim($_POST["some"])."</b>";
else
echo "Ningún parámetro enviado";
?>
Conclusiones:
Mediante los dos métodos analizados (GET y POST) es muy sencillo recuperar archivos desde el servidor donde estemos trabajando, cada método tiene sus pros y contras, pero usando este código fuente expuesto creo que no hay mayor problema al usar cualquiera de las dos modalidades. Espero les sea de utilidad.
Lecturas adicionales:
AJAX en Wikipedia
