En este artículo quiero mostrar como realizar una petición AJAX mediante el método POST, de forma normal o tradicional y utilizando el framework de mootools, de esta manera pretendo mostrar la eficiencia a la hora del desarrollo, en artículos anteriores he venido hablando acerca de lo poderosa que es esta librería y de los motivos por los cuales deberías utilizarla, al leer este artículo verás por tus propios ojos a lo que me refiero.
El método tradicional
Por el método tradicional, me refiero sin utilizar ninguna librería o framework, para crear la petición harías algo como esto:
function getXMLHttpRequest(){
var aVersions = [ "MSXML2.XMLHttp.5.0",
"MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp","Microsoft.XMLHttp"
];
if (window.XMLHttpRequest){
// para IE7, Mozilla, Safari, etc: que usen el objeto nativo
return new XMLHttpRequest();
}else if (window.ActiveXObject){
// de lo contrario utilizar el control ActiveX para IE5.x y IE6.x
for (var i = 0; i < aVersions.length; i++) {
try {
var oXmlHttp = new ActiveXObject(aVersions[i]);
return oXmlHttp;
}catch (error) {
//no necesitamos hacer nada especial
}
}
}
}
He escrito un artículo dedicado a esta porción de código, el cual te sugiero que lo leas, para eso visita el primer link de las referencias.
Luego para hacer la petición es necesario, crear una instancia, abrir la conexión y mandar la información por el método post, en código esto quedaría así:
function enviar1(){
var par = "var1=hola&var2=mundo! a patín!";
var url = "server/post.php";
var ajax = getXMLHttpRequest();
ajax.open("POST",url,true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
ajax.onreadystatechange = respuesta;
ajax.send(par);
function respuesta(){
if (ajax.readyState==4){
if (ajax.status==200){
alert(ajax.responseText);
}else{
alert("Error al recibir la información!")
}
}
}
}
Utilizando mootools
Ahora voy hacer lo mismo, pero utilizando mootools, es muy sencillo hacerlo, para esto utilizamos la clase Ajax, en el constructor le pasamos dos parámetros únicamente, la url donde el servidor está escuchando, y un objeto con las propiedades que queramos, por ejemplo, aquí le agregamos los parámetros que queremos enviar, le asignamos una función que se disparará en cuanto el servidor responda, podemos agregar un cargador, cambiar el método POST a GET, y muchas otras funciones mas.
function enviar2(){
var par = "var1=hola&var2=mundo! con mootools";
var url = "server/post.php";
new Ajax(url, {postBody:par, onComplete:respuesta}).request();
function respuesta(response){
alert(response);
}
}
Ahora bien, se puede ver la clara diferencia, lo único que se hace, es crear una instancia de la clase Ajax, e invocar el método request, el cual se encarga de enviar la petición, por default el envío se hace por POST.
Ahora el servidor, para este ejemplo, únicamente voy a recuperar los parámetros y los voy a imprimir, claro esta que tu puedes ahcer cualquier otra cosa.
Para PHP este es el código
$var1 = $_POST['var1'];
$var2 = $_POST['var2'];
echo "Servidor recoje: '$var1', '$var2'";
En JAVA sería así
public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{
PrintWriter out = response.getWriter();
String var1 = request.getParameter("var1");
String var2 = request.getParameter("var2");
out.println("Servidor recoje: '"+var1+"', '"+var2+"'");
}
Puedes probar el ejemplo por ti mismo, aquí te pongo el código completo del archivo XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1;" />
<title>Crysfel Blog – Utilizando el método POST</title>
<script type="text/javascript" src="common/javascript/mootools.v1.00.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
function getXMLHttpRequest(){
var aVersions = [ "MSXML2.XMLHttp.5.0",
"MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp","Microsoft.XMLHttp"
];
if (window.XMLHttpRequest){
// para IE7, Mozilla, Safari, etc: que usen el objeto nativo
return new XMLHttpRequest();
}else if (window.ActiveXObject){
// de lo contrario utilizar el control ActiveX para IE5.x y IE6.x
for (var i = 0; i < aVersions.length; i++) {
try {
var oXmlHttp = new ActiveXObject(aVersions[i]);
return oXmlHttp;
}catch (error) {
//no necesitamos hacer nada especial
}
}
}
}
function enviar1(){
var par = "var1=hola&var2=mundo! a patín!";
var url = "server/post.php";
var ajax = getXMLHttpRequest();
ajax.open("POST",url,true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
ajax.onreadystatechange = respuesta;
ajax.send(par);
function respuesta(){
if (ajax.readyState==4){
if (ajax.status==200){
alert(ajax.responseText);
}else{
alert("Error al recibir la información!")
}
}
}
}
function enviar2(){
var par = "var1=hola&var2=mundo! con mootools";
var url = "server/post.php";
new Ajax(url, {postBody:par, onComplete:respuesta}).request();
function respuesta(response){
alert(response);
}
}
</script>
</head>
<body>
<p><input type="button" value="Peticion Normal" onclick="enviar1()" /> <input type="button" value="Peticion con mootools" onclick="enviar2()" /></p>
</body>
</html>
Para que funcione este código, es necesario descargar la librería de mootools, y crear un archivo en el servidor llamado post.php, o el nombre que tu desees asignarle, solo ten en cuenta cambiar la url en el codigo anterior para tener el funcionamiento adecuado.
Referencias
http://www.crysfel.com/index.php…crear-un-xmlhttprequest
http://mootools.net