Comenzando con AJAX

JuanKa · #1 (**permalink**) 26/06/2006, 12:00

Hola a todos.

Quizas sea un poquito extendo pero creo que valga la pena para que me puedan ayudar.

Actualmente he realizado una mini gestion de prendas de vestir y ustedes como saben estan involucrados varios cosas , como por ejemplo, prendas, colores, tallas y precios.

Esta mini gestion esta ya operativa en internet, en la cual envio a la cesta, la la prenda con su respectivos datos (id_prenda,id_talla,id_color,cantidad), es decir que tengo una pagina de nombre prenda_puntual.php en la cual me muestra sus datos, entonces el cliente puede escoger su color y su talla y la cantidad y debajo de estas caracterisiticas tengo un boton de tipo submit que cuando presiono lo envio a una pagina de nombre cesta.php.

Hasta aca me lo realiza todo muy bien

Pero porque explico esto, porque me gustaria trabajar con AJAX por que le permitira al cliente enviar el mismo articulo pero mandaria por ejemplo del color Azul la Talla X y presionar sobre el boton enviar a cesta, pero que NO me lo envie a cesta.php sino que se quede en esa misma pagina(pero que en segundo plano me lo grabe en su tabla cestita), es decir en prenda_puntual.php y poder seleccionar nuevamente de la misma prenda del Color Azul la talla XXL, es decir que en la Base de Datos en la Tabla cestita haya :

Prenda.....................Color...............Tal la
Camisa cuello cisne....Azul.................X
Camisa cuello cisne....Azul.................XXL
etc
etc
etc

Como puedo Hacer esto con AJAX
************************************************
CODIGO NORMAL EN INTERNET

prenda_puntual.php

<form action="cesta.php?action=add_item&id_prenda=<?php echo $param_id_prenda; ?>" method="post" name="form1" class="Formulario_Envio">
<BR>
<table width="500" height="30" border="0" align="center" cellpadding="2" cellspacing="2" class="Bordeado_Tabla">
<tr>
<td scope="col"><div align="center" class="Estilo6"><? echo $var_descripcion; ?></div></td>
</tr>
</table>
<BR>
<BR>
<table width="500" border="0" align="center" cellpadding="2" cellspacing="2" class="Bordeado_Tabla">
<tr>
<td width="162" scope="col"><div align="center" class="Estilo4">
<div align="right">Referencia</div>
</div></td>
<td width="24" scope="col"><div align="center" class="Estilo6"><strong>:</strong></div></td>
<td colspan="2" class="Estilo6" scope="col"><? echo $var_referencia; ?></td>
</tr>
<tr>
<td scope="col"><div align="right" class="Estilo4">Precio por Unidad </div></td>
<td scope="col"><div align="center" class="Estilo6"><strong>:</strong></div></td>
<td colspan="2" class="Estilo2" scope="col"><? echo $var_precio; ?> <span class="Estilo6">€</span> </td>
</tr>
<tr>
<td scope="col"><div align="right" class="Estilo4">Colores Disponibles </div></td>
<td scope="col"><div align="center" class="Estilo6"><strong>:</strong></div></td>
<td colspan="2" class="Estilo2" scope="col">
<?
$registros_color=mysql_num_rows($consulta_color_re gistradas);
$c=1;
while($lineas_color=mysql_fetch_array($consulta_co lor_registradas))
{
if ($c == $registros_color)
{ echo $lineas_color['des_color']; }
else
{ echo $lineas_color['des_color']." - "; }
$c++;
}
?>
</td>
</tr>
<tr>
<td scope="col"><div align="right" class="Estilo4">Tallas Disponibles </div></td>
<td scope="col"><div align="center" class="Estilo6"><strong>:</strong></div></td>
<td colspan="2" class="Estilo2" scope="col">
<?
$registros_tallas=mysql_num_rows($consulta_tallas_ registradas);
$t=1;
while($lineas_tallas=mysql_fetch_array($consulta_t allas_registradas))
{
if ($t == $registros_tallas)
{ echo $lineas_tallas['cod_talla']; }
else
{ echo $lineas_tallas['cod_talla']." - "; }
$t++;
}
?>
</td>
</tr>
<tr>
<td scope="col"><div align="right" class="Estilo8">Seleccionar Talla </div></td>
<td scope="col"><div align="center"><span class="Estilo6"><img src="../../Imagenes/Web/flechas_seleccionar.gif" width="7" height="6"></span></div></td>
<td colspan="2" class="Estilo2" scope="col">
<select name="txt_talla" class="Seleccion_Lista" id="txt_talla">
<?
while ($var_talla=mysql_fetch_array($consulta_tallas_sel eccionar))
{
echo"<option value=\"$var_talla[id_talla]\">$var_talla[cod_talla]</option>";
}

?>
</select>
</td>
</tr>
<tr>
<td scope="col"><div align="right" class="Estilo8">Enviar a cesta </div></td>
<td scope="col"><div align="center"><span class="Estilo6"><img src="../../Imagenes/Web/flechas_seleccionar.gif" width="7" height="6"></span></div></td>
<td width="25" class="Estilo2" scope="col">
<input name="txt_cantidad" type="text" class="Caja_Cantidad" id="txt_cantidad" style="text-align:center" onKeyUp="CuentaChar(this.value)" value="2" size="2" maxlength="2">
</td>
<td width="261" class="Estilo2" scope="col">prendas</td>
</tr>
</table>
<BR>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" scope="col"><div align="center">
<input name="btn_enviar" type="submit" class="Boton_Cesta" value="Añadir a Cesta" >
</div></td>
</tr>
</table>
<BR>
</form>

************************************************
cesta.php
$param_id_prenda=$_GET["id_prenda"];
$var_cantidad=$_POST["txt_cantidad"];
$var_id_color=$_POST["txt_color"];
$var_id_talla=$_POST["txt_talla"];

switch($_GET["action"])
{
case "add_item":
{
$consulta_cesta=mysql_result(mysql_query("SELECT COUNT(*) FROM cesta WHERE codi_artic='$param_id_prenda' AND
cookieId='".GetCartId()."' AND
id_color=$var_id_color AND
id_talla = $var_id_talla "
,$conectar),0);
if ($consulta_cesta==0)
{ AddItem($_GET["id_prenda"], $var_cantidad, $var_id_color, $var_id_talla, $var_id_cliente );
ShowCart();
break;
}
else
{
include ('verifica_cabecera.php');
echo "Ya EXISTE esta Prenda, con el mismo Color y Talla en su Pedido";
include ('verifica_pie_pagina.php');
break;
}
}

Leyendo manuales por alli tengo un JS donde guardo los siguiente:

function creaAjax(){
var objetoAjax=false;
try {
/*Para navegadores distintos a internet explorer*/
objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
/*Para explorer*/
objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E) {
objetoAjax = false;
}
}

if (!objetoAjax && typeof XMLHttpRequest!='undefined') {
objetoAjax = new XMLHttpRequest();
}
return objetoAjax;
}

function FAjax (url,capa,valores,metodo)
{
var ajax=creaAjax();
var capaContenedora = document.getElementById(capa);

/*Creamos y ejecutamos la instancia si el metodo elegido es POST*/
if(metodo.toUpperCase()=='POST')
{
ajax.open ('POST', url, true);
ajax.onreadystatechange = function() {
if (ajax.readyState==1) {
capaContenedora.innerHTML="Cargando.......";
}
else if (ajax.readyState==4){
if(ajax.status==200)
{
document.getElementById(capa).innerHTML=ajax.respo nseText;
}
else if(ajax.status==404)
{
capaContenedora.innerHTML = "La direccion existe";
}
else
{
capaContenedora.innerHTML = "Error: ".ajax.status;
}
}
}
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(valores);
return;
}

QUISIERA SABER COMO IMPLEMENTARIA ESTO CON AJAX YA QUE ME GUSTARIA NO RECARGAR LA PAGINA ES DECIR NO IR A CESTA.PHP Y QUE SE QUEDE EN PRENDA_PUNTUAL.PHP PARA INGRESAR TODO LO QUE EL CLIENTE NECESITE Y DESPUES HACER UN BOTON QUE ME PERMITA VER LO QUE HE INGRESADO EN LA CESTA Y QUE LUEGO EL CLIENTE TOME DECISIONES PARA QUE PUEDA REALIZAR EL PEDIDO. ES DECIR DARLE AL CLIENTE LO MAS OPTIMO POSIBLE Y NO TENGA PROBLEMAS DE IR DE UNA PAGINA A OTRA.

EL PROBLEMA ES QUE DESCONOZCO COMO DEBO ENVIAR LOS PARAMETROS DE UNA PAGINA A OTRA EN SEGUNDO PLANO

Gracias a todos y reciban un cordial saludo.

stock · #2 (**permalink**) 26/06/2006, 16:29

mira, te explico rapidamente como lo hago yo!

primero tengo una funcion que me crea la instancia para usar AJAX

Código:

function initRequest() {
	   	// code for Mozilla, etc.
       if (window.XMLHttpRequest) {
           return new XMLHttpRequest();
       } else if (window.ActiveXObject) {
       		// code for IE
           isIE = true;
           return new ActiveXObject("Microsoft.XMLHTTP");
       }
   }

ok, eso es todo, lo unico que hace es darme una instancia, para IE o Mozilla.

ok, ahora te pongo un ejemplo de como mando informacion al servidor:

Código:

	function guardarAlgoEnServer (){
		var palabra = "esto es lo que le voy a mandar al servidor";
		var hello = "hello world!";
		var url = "myServlet?palabra="+palabra+"&hello="+hello;
		
           var req = initRequest();
           req.onreadystatechange = function() {
	           // if xmlhttp shows "loaded"
               if (req.readyState == 4) {
               		// if "OK"
                   if (req.status == 200) {
                       manejarRespuesta(req.responseXML);
                   } else if (req.status == 204){
                       alert("error al solicitar informacion al servidor");
                   }
               }
           }
           req.open("GET", url, true);
           req.send(null);
	}

ok, aqui unicamente creo dos variables palabra, hello, tienen un texto cada una, lo siguiente es hacer la URL de mi servlet en este caso, aqui puedes poner un PHP, ASP, en mi caso JAVA

y le pasas parametros en la URL.
despues creo el objeto req, con la primera funcion que te puse, inmediatamente de esto, le digo que en el evento onreadystatechange se dispare una funcion, la cual primero verifico si se cargo bien, luego el estatus, estas lineas se ejecutan despues de que el servidor me respondio.
ok, las ultimas dos lineas req.open, aqui nadamas le especifico el metodo de envio, en este caso GET, la URL, y el ultimo parametro es para indicarle que sera asincrono.
por ultimo ejecuto el metodo req.send(null)

si te diste cuenta hay una funcion que se llama manejarRespuesta(req.responseXML);, esta es la encargada de "traducir" el XML regresado por el servidor. aqui parsearias la informacion y haces con ella lo que quieras, mostrarsela al cliente, hacer algunas operaciones, etc....

bueno, espero te sirva para comenzar!

have funnnnn