Principal › Forums › Creando Sitios Web › AJAX

AJAX Mejorado a Objetos

Febrero 23, 2006 - 2:24pm — EliasBG

Despues de varios dias de trabajo sin parar, puedo entrar al foro para contarles que estuve viendo algo de [b:518fbf40d8]AJAX[/b:518fbf40d8] y bueno le metí mano e hice [b:518fbf40d8]unas mejoras para su uso[/b:518fbf40d8], tales como, convertirlo todo en un [b:518fbf40d8]objeto AJAXConn[/b:518fbf40d8] y con la instacia del objeto que he creado y setear algunas propiedades esta listo para operar

No dejen de darme sus observaciones para mis nuevos trabajo que estoy culminando como es
[list:518fbf40d8]
[*:518fbf40d8]www.100porcientoperu.com/indeBETA.php
[*:518fbf40d8]www.llamagas.com.pe
[/list:u:518fbf40d8]

Bueno a continuación les presento mi pequeña mejora y como se utiliza, como veran pueden usar tanto los dos métodos GET y POST con este objeto e incluso pueden setear la imagen que aparecerá cuando se esté cargando la información.

Esta solución consiste en cuatro archivos.

[list:518fbf40d8]
[*:518fbf40d8][b:518fbf40d8]index.php [/b:518fbf40d8]- El cual va ser la página principal que va ver el usuario
[*:518fbf40d8][b:518fbf40d8]conf.php [/b:518fbf40d8]- Configuración de conexión de datos
[*:518fbf40d8][b:518fbf40d8]buscar.php [/b:518fbf40d8]- que contiene la rutina de búsqueda y paginación y que va devolver el AJAX a index.php
[*:518fbf40d8][b:518fbf40d8]AjaxConn.js [/b:518fbf40d8]- Libreria JavaScript que contiene la definición del objeto AJAXConn
[/list:u:518fbf40d8]

[b:518fbf40d8][color=red:518fbf40d8]PROVECHO !!!!![/color:518fbf40d8][/b:518fbf40d8] :mrgreen:

[b:518fbf40d8]conf.php[/b:518fbf40d8]
[code:1:518fbf40d8]
<?
$host = "localhost";
$usr = "consulta";
$pwd = "seguro";
$bdatos = "bd_sistema";

$TAMANO_PAGINA = 10;
$busqueda = "select * from cliente";

?>
[/code:1:518fbf40d8]

[b:518fbf40d8]index.php[/b:518fbf40d8]

[code:1:518fbf40d8]
<?
include_once ("conf.php");

$kon = mysql_connect ($host, $usr, $pwd) or die ("Error de Conexion");
mysql_select_db ($bdatos, $kon) or ("Error al conectar a la bdatos");

$sql = mysql_query($busqueda, $kon) or die("Error de busqueda");
$total_registros = mysql_affected_rows();
$total_paginas = ceil($total_registros / $TAMANO_PAGINA);

?><html>
<head>
<meta name='Author' content="ElíasBG (eliasbg@gmail.com)" />
<meta content="no-cache" http-equiv="Pragma" />
<meta content="no-cache" http-equiv="Cache-Control" />
<meta http-equiv="Expires" Content="0" />

<script type="text/javascript" language="javascript" src="AjaxConn.js"></script>
<script>
var myAjax = new AJAXConn("resultado","< img src='loading.gif'/>");
if (!myAjax) alert("XMLHTTP no está disponible. Actualiza tu navegador Internet.");

function paginar(pag)
{
myAjax.connect("buscar.php", "GET", "pagina="+pag);
}
</script>
<link href="style.css" rel="stylesheet" />
</head>

<h1>Paginación con AJAX</h1>
<p class="link">Hola amigos por ahi encontr&eacute; una rutina de conexi&oacute;n a AJAX y bueno trat&eacute; de mejorarlo, ahora lo he hecho con la capacidad que pueda usarse tanto con el m&eacute;todo GET y POST y que sea de uso gen&eacute;rico, ademas la capacidad de usarlo como un objeto y parametrizarlo.



Saludos... EliasBG </p>

<?
if ($total_paginas > 1){
for ($i=1;$i<=$total_paginas;$i++){
echo "<span class=\"link\" onClick=\"paginar('$i')\">$i</span> ";
}
}else{
echo "$i ";
}
?>


<div id="resultado">
Escoje alguna página para mostrar los resultados
</div>



</html>
[/code:1:518fbf40d8]

[b:518fbf40d8]buscar.php[/b:518fbf40d8]
[code:1:518fbf40d8]<?
include_once ("conf.php");

$kon = mysql_connect ($host, $usr, $pwd) or die ("Error de Conexion");
mysql_select_db ($bdatos, $kon) or ("Error al conectar a la bdatos");

$pagina = $_GET["pagina"];
if (!$pagina) {
$inicio = 0;
$pagina=1;
}
else {
$inicio = ($pagina - 1) * $TAMANO_PAGINA;
}
$sql = mysql_query($busqueda, $kon) or die("Error de busqueda");
$total_registros = mysql_affected_rows();
$total_paginas = ceil($total_registros / $TAMANO_PAGINA);

$sql = mysql_query($busqueda . " LIMIT $inicio, $TAMANO_PAGINA;", $kon);
echo "<table cellpadding='1' cellspacing='1' width='100%' border=0>";
$color='#FFFFFF';
while ($row = mysql_fetch_array($sql)){
echo "<tr bgcolor=$color>";
echo "<td>".$row['CLIE_CODIGO'] . "</td>";
echo "<td>".$row['CLIE_NOMBRE1'] . "</td>";
echo "<td>".$row['CLIE_NOMBRE2'] . "</td>";
echo "<td>".$row['CLIE_APELLIDO1'] . "</td>";
echo "<td>".$row['CLIE_APELLIDO2'] . "</td>";
echo "</tr>";
$color=($color=="#99CCFF"?"#FFFFFF":"#99CCFF");
}
echo "</table>";
echo "Total Registros: " . $total_registros . "
";
echo $TAMANO_PAGINA . " registros cada una
";
echo "P&aacute;gina " . $pagina . " de " . $total_paginas . "
";

mysql_close ($kon);
?>[/code:1:518fbf40d8]

[b:518fbf40d8]AjaxConn.js[/b:518fbf40d8]
[code:1:518fbf40d8]
/** AjaxConn - Simple XMLHTTP Interface - eliasbg@gmail.com - 17/Feb/2006
** Código Liberado por: Elías Barrientos García
** página: eliasbg.dynalias.com/AJAX/paginacion
** weblog: eliasbg.blogspot.com
**/
function AJAXConn(sDestino, sCargando)
{
var xmlhttp, bCompleto = false;

try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (excepcion) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (excepcion) {
try {
xmlhttp = new XMLHttpRequest();
}
catch (excepcion) {
xmlhttp = false;
}
}
}
if (!xmlhttp) return null;

this.connect = function(sURL, sMetodo, sVars) {
if (!xmlhttp) return false;
bCompleto = false;
sMetodo = sMetodo.toUpperCase();

try {
if (sMetodo == "GET") {
xmlhttp.open(sMetodo, sURL+"?"+sVars, true);
sVars = "";
}
else {
xmlhttp.open(sMetodo, sURL, true);
xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}

xmlhttp.onreadystatechange = function(){
// Estado del Objeto: //
ST_UNINITIALIZED = 0;
ST_LOADING = 1;
ST_LOADED = 2;
ST_INTERACTIVE = 3;
ST_COMPLETE = 4;

if (xmlhttp.readyState == ST_LOADING) {
document.getElementById(sDestino).innerHTML = sCargando;
}

if (xmlhttp.readyState == ST_COMPLETE && !bCompleto) {
bCompleto = true;
document.getElementById(sDestino).innerHTML = xmlhttp.responseText;
}
};
xmlhttp.send(sVars);
}
catch(excepcion) {
return false;
}
return true;
};
return this;
}[/code:1:518fbf40d8]

[b:518fbf40d8][color=blue:518fbf40d8]Su funcionamiento pueden verlo aqui:[/color:518fbf40d8] http://eliasbg.dyndns.org/AJAX/paginacion[/b:518fbf40d8]

:-D :-D :-D
Saludos

EliasBG
Weblog: http://eliasbg.blogspot.com
Página Web: http://eliasbg.dyndns.org/AJAX/paginacion

‹ Compartiendo Enlaces Sobre AJAX
Drupal en 15 gotas