Trabajo con Ajax en PHP utilizando Xajax

Una serie de artículos prácticos para aprender a programar con Ajax en páginas PHP, utilizando una clase llamada Xajax para simplificar sensiblemente el trabajo.

Listado de los capítulos
1.- Introducción a Xajax
Notas iniciales sobre Xajax, el framework para trabajo con PHP y Ajax. Entrar

2.- Xajax: Ajax para PHP
Una librería PHP que contiene la clase xajax, que permite ejecutar Ajax de una manera sencilla. Entrar

3.- Enviar y procesar formulario con Ajax y PHP
Utilizamos xajax para enviar por Ajax un formulario, así como enviar y procesarlo con PHP sin tener que actualizar o recargar la página donde estaba el formulario. Entrar

4.- Recibir formulario con Ajax e insertar información en base de datos
Artículo en el que se realiza un envío de formulario con Ajax y PHP y se inserta la información en una base de datos MySQL. Entrar

5.- Procesar formulario con Ajax y PHP con validación
Complicamos un poco el envío y procesamiento de un formulario con Ajax y PHP, para realizar validaciones en el servidor y mostrar mensajes de error si la validación falló. Entrar

6.- Selects combinados con Ajax y PHP
Usando la librería xajax veremos como construir fácilmente un sistema de select combinados con PHP y Ajax. Entrar

7.- Comprobar si un usuario es válido con Ajax y PHP
Script para comprobar la validez de un nombre de usuario escrito en un formulario, con PHP y Ajax, sin necesidad de recargar la página. Entrar

8.- Mostrar un formulario al pulsar un enlace, con Ajax y PHP
Un ejercicio con Ajax y PHP, utilizando la clase xajax, para mostrar un formulario al pulsar un enlace y luego enviar y procesar el formulario, todo en la misma página sin necesidad de recargarla. Entrar

9.- Manejo de sesión con PHP y Ajax
Hacemos un juego del ahorcado para ilustrar el trabajo con variables de sesión $_SESSION en aplicaciones web PHP y Ajax. Entrar

10.- Comprobar la validez de una URL con Ajax
Ejercicio de Ajax y PHP para la comprobación de una URL escrita en un campo de texto: comprobar si está escrita correctamente y hay algo en esa dirección. Entrar

11.- Validación previa de un campo de texto con Ajax y PHP
Hacemos un nuevo ejercicio con Ajax y PHP usando la librería Xajax, en el que validamos el nombre de un país antes de enviar el formulario. Entrar

12.- Script para detección de soporte a Ajax, Cookies y ActiveX
Unos scripts del lado del cliente para saber si tu navegador es compatible con Ajax, Cookies y ActiveX. Entrar

13.- Interfaz de navegación por pestañas con Ajax y PHP
Creamos un interfaz de usuario para navegación por pestañas o solapas, con el framework Xajax, programado con PHP y Ajax. Entrar

14.- Sistema de votación con Xajax
Implementamos un sistema de votación para la web utilizando las librerías de Xajax para darle un aspecto mucho más dinámico y elegante. Entrar

15.- Sistema de votación con XAJAX mejorado
Pasamos a mejorar el sistema de votación con xajax dado en el artículo anterior. Entrar

16.- Incluir un archivo de texto o HTML a través de una llamada a xajax
Vamos a crear una función xajax que nos muestre el contenido de un archivo de texto o HTML en nuestro archivo .php. Entrar

17.- Mensaje de carga con ajax usando xajax
Como mostrar un mensaje de carga mientras de procesa una solicitud ajax, usando el framework xajax. Entrar

18.- Sistema de ordenación de elementos con Ajax y PHP
Ordenador de elementos PHP: Como ordenar los registros de una tabla con funciones Ajax y PHP, usando Xajax. Entrar

19.- Actualizar Xajax 0.2 a Xajax 0.5
Indicaciones para actualizar tus scripts de Ajax y PHP con las librerías Xajax, de Xajax 0.2 a Xajax 0.5. Entrar

20.- Aviso de cargando para Ajax con Xajax 0.5
Vemos cómo hacer un aviso cargando típico de Ajax, utilizando el framework Xajax en su versión 0.5. Entrar

21.- Procesar formularios múltiples con Ajax y PHP
Un ejercicio de envío y procesado de datos de formularios, con múltiples formularios por página, realizado por Ajax y con PHP usando la librería Xajax. Entrar

22.- Cambiar estilos CSS de una página con Ajax y PHP
Un script para cambiar el estilo CSS de la página web, usando Ajax y PHP, con las librerías Xajax. Entrar

23.- Generar eventos a elementos por medio de llamadas Ajax y PHP
Como asignar eventos y manejadores de eventos a elementos de la página web desde PHP, por medio de Ajax y utilizando el framework Xajax. Entrar

24.- Comet en PHP con Xajax
Explicamos el plugin de Comet para Xajax, para hacer scripts que hacen uso de Comet en PHP. Entrar

25.- Enviar formularios desde mapas de Google con Ajax
Cómo enviar un formulario con Ajax desde una ventana de información de un mapa de Google. Entrar

26.- Navegación por Pestañas con Esquinas Redondeadas: Xajax + NiftyCube
Presento una bonita simbiosis entre Xajax y NiftyCube, para lograr un menú de pestañas que se activan del lado del cliente, con una apariencia redondeada sin usar imágenes. Entrar

Descargas
 Si eres usuario de DesarrolloWeb:
Archivo de descarga Trabajo con Ajax en PHP utilizando Xajax
Texto completo en PDF, listo para imprimir, del manual de DesarrolloWeb.com Trabajo con Ajax en PHP utilizando Xajax. Descarga compilada y actualizada el día 10/02/09.
Tamaño: 398631

Comentarios
Envie un comentario u opinión sobre este manual.
Comentar el manual
Ver comentarios (17)

Compartir

Comentarios
Enviar un comentario al manual
Fueron enviados 17 comentarios al manual
3 comentarios no revisados
14 comentarios revisados:
Como integrar Xajax y jQuery
Por: uziel
13/5/2009
Hola desarrolladores, recientemente he estado trabajando con Xajax para hacer mis proyectos, pero descubri jQuery, esta libreria me gusto mucho por la facilidad de uso y las cosas que se pueden hacer, pero no he podido integrarla con Xajax para hacer algunos efectos. He utilizado el metodo script del objeto xajaxResponse para generar el codigo de jQuery al vuelo, pero no he podido hacer que funcione.

Hice un ejemplo de un accordion:

Lo que deberia hacer este script es:
Al hacer click sobre el div que dice "Ver Acordeon" hago el script para que se configure el div "accordion" y despues muestro el codigo html que sera transformado en el acordeon.

Si muestra el codigo del acordeon, pero la funcionalidad no esta presente, solo aparece como HTML comun y corriente.
Espero que puedan ayudarme, muchas gracias.

<code>
<?php
require_once("CreaXajax.php");

$xajax = CreaXajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->configure('decodeUTF8Input', true);

$xajax->register(XAJAX_FUNCTION, "muestraTabla");

function muestraTabla()
{
$objRespuesta = new xajaxResponse();

$x = " <h3><a href="#">Section 1</a></h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>";

$objRespuesta->call("$(function() {
$('#accordion').accordion({
icons: {
header: 'ui-icon-circle-arrow-e',
headerSelected: 'ui-icon-circle-arrow-s'
}
});
});");

$objRespuesta->assign('accordion', "innerHTML", $x);

return $objRespuesta;
}


$xajax->processRequest();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<?php $xajax->printJavascript("../xajax"); ?>

<script type="text/javascript" src="jquery-ui-171/development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui-171/development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src="jquery-ui-171/development-bundle/ui/ui.accordion.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#accordion").accordion({
icons: {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
}
});
});
</script>
</head>

<body>
<div onclick="xajax_muestraTabla();">Ver acordeon</div>

<div id="accordion"></div>

</body>
</html>

</code>
Estupendo este manual
Por: Vicente
29/7/2009
Bueno excelente el trabjo que hacen este manual me sirvio para realizar un sistema en internet donde valido varios formularios. Lo que me tranco en mi avance del conocimiento de xajax es que no encuentro el comando o la manera de registrar datos y enviar un email al mismo tiempo con xajax si saben como por favor publiquenlo pronto gracias!.....
Como actualizar un div?
Por: javier
31/8/2009
El manual esta de lujo! Mi pregunta nace de lo siguiente. Tengo un Div de notificaciones algo parecido a las notificaciones en facebook y me gustaria que el estuviese haciendo peticiones permanentemente o por lo menos cada cierto tiempo.

Es decir si una persona ha agregado a otra y las 2 estan en linea a la otra persona le deberia llegar la notificacion en tiempo real o por lo menos cuando se actualice el Div.

No se si me explique bien pero espero y puedas ayudarme!

De igual forma mi mail es javiertroya@gmail.com y mi web es http://dynlearning.com.ve

De antemano gracias!

lucho1
NUEVAS UTILIDADES XAJAX
21/5/2010
he leido el manual de xajax hace un par de meses y la verdad es que me pareció excelente. El tema es que no ha salido ninguna otra nueva información sobre esta excelente herramienta.

un saludo grande y espero su respuesta

MariaCa...
Manual de Xajax
18/7/2010
No logro descargar el manual, tiene problemas el pdf.

raisseN
provincia cargar
23/8/2010
Hola,

Si no me equivoco no te carga la provincia porque estas cogiendo un valor del array que no contiene datos envez de [1] coge [0].

Igualmente para ver mejor lo que te devuelve el array de la consulta puedes hacer un print_r($array); para saber exactamente como estan los datos en el array

Suerte.

ita_sal...
Con Plantilla
28/9/2010
el manual esta buenazo.
estoy aprendiendo y esta de pelos.
mi problema surge cuando tengo una plantilla y esa plantilla tengo un formulario para validar usuarios o en su caso paises, cuando envio a validar me aparece una caja de texto con todo loq ue tiene la plantilla y me envia el siguiente mensaje. algo asi:
Error: the XML response that was returned from the server is invalid.
Received:


<html><!-- InstanceBegin template="/Templates/admiin.dwt.php" codeOutsideHTMLIsLocked="false" -->

<head>

<!-- InstanceBeginEditable name="doctitle" -->

<title>Documento sin título</title>



<!-- InstanceEndEditable -->

<style type="text/css">

A {color: #FA44CDE;}

A:Visited {color:#33F;}

A:Active {color: #FFFFFF;}

A:Hover {color: #000000;}



body {

font-family:verdana,arial;

font-size:10pt;

margin-top:15px;

background-color: #CCC;

y sigue y sigue...
si alguien me puede ayudar estare agradecido.

ras_cha...
funciones en desuso
08/10/2010
Hola, bueno me motive con XAJAX e imprimí y todo el manual. Lamentablemente me veo con que algunas funciones están en desuso. Me di cuenta al copiar y pegar el código del manual. Me gustaría saber que puedo hacer al respecto. Espero sus respuestas.
Saludos!

ita_sal...
con mas de un checkbox
14/10/2010
que tal el problema anteior ya lo solucione.
ahora tengo una duda , cunado corro el ejemplo para un solo chekbox no hay problema pero cunado cunado pongo dentro un de whioe o for no sale absolutamente nada es decir algo asi:

while($row=mysql_fetch_array($resu))
{?>
<input name="opcion" type="checkbox" value="1" onClick="xajax_si(document.form1.opcion.checked)" />
<?php echo $row[0];?>
<?php }
?>
</form>
NO pasa absolutamente nada, alguien me puede dar un mano

oliverc...
Excelente manual
21/6/2011
Hola amigos de desarrolloweb.com, me es grato nuevamente estar en la onda de los sitios web, porque hasta hace dos años estaba programandowebs desde cero con esta herramienta, y habia logrado hacer un chat pero ahora veo que hay mas herramientas como jquery que se pueden fusionar logrando resultado extraordinarios, espero algun momento poderles colaborar con aplicaciones ejemplos o demos interactivos...gracias

rcm5304...
problemas con sesiones con xajax
12/7/2011
Hola, antes que nada dar las gracias a este maravilloso foro que nos da este excelente manual.

Aqui solicitando de su valiciosa ayuda ya que no he podido hacer que mis sesiones se mantengan, que quiere decir esto, que tengo un formulario donde pide usuario y contraseña el cual una vez ingresado me direcciona a una pagina principal, el cual toma la sesion creada al momento de ingresar mi contraseña, todo funciona correcto hasta que cuando le doy F5 (ACTUALIZO) me saca de mi sesion y no se a que se deba pongo el codigo de la funcion que uso para conectarme a la base de datos, el codigo de los formularios, y el codigo de mis funciones xajax.

aqui el codigo de conexion el cual se llama
class.conexionDB.inc.php

<?php
class conexionBD
{
public $NombreBD = "";
public $Host = "";
public $NombreUsr = "";
public $PassWd = "";
public $id = "";

function __construct()
{



$this->NombreBD = "MIBASE";
$this->Host = "localhost";
$this->NombreUsr ="USUARIO";
$this->PassWd = "CONTRASEÑA";
$this->id = "";
$this->ConectarBD();
}

public function SeleccionBBDD($bbdd)
{
mysql_select_db($bbdd, $this->id);
$this->NombreBD = $bbdd;
}

public function ConectarBD()
{
$this->id = mysql_connect($this->Host, $this->NombreUsr, $this->PassWd);
mysql_select_db($this->NombreBD, $this->id);
}

public function EjecutarSQL($Str_SQL)
{
return mysql_query($Str_SQL, $this->id);
}

public function FetchArray($result)
{
return mysql_fetch_array($result);
}

public function FetchRow($result)
{
return mysql_fetch_row($result);
}

public function NumRows($result)
{
return mysql_num_rows($result);
}

public function ObtUltError(){
return mysql_error();
}
}
?>
#################################################

la parte del formulario el archivo se llama:

<?php
session_start();
session_destroy();
require_once('xajax/xajax.inc.php'); //incluimos la librelia xajax
include("lib/class.conexionDB.inc.php");
require_once("lib/class.functions.php");
?>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Pragma"content="no-cache">
<meta http-equiv="expires"content="0">
<head>
<?php $xajax->printJavascript("xajax"); //imprime el codigo javascript necesario para que funcione todo. ?>
<link href="CSS/style.css" rel="stylesheet" type="text/css">

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.funciones.action.js" type="text/javascript"></script>
<script src="js/md5-min.js"></script>

<script type="text/javascript">
function calcMD5(){
document.getElementById('md5string1').value = hex_md5(document.getElementById('string1').value);
}
</script>
</head>
<body>

<div class="centrado">
<table width="400" height="150" class="cuadro">
<tr>
<td class="titulofecha">Sistema Cotizador de Platillos</td>
</tr>
<tr>
<td>
<form name="logginn" id="loginexim" method="get" action="">
<div align="center">
<table width="235" class="cuadro" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="95" class="formato"> Usuario:</td>
<td width="132"><div align="right">
<input type="text" class="formato_form" name="usuario" id="usuario" size="30" maxlength="15" />
</div></td>
</tr>
<tr>
<td class="formato"> Contrase&ntilde;a:</td>
<td><div align="right">
<input type="password" class="formato_form" name="password1" id="string1" onChange="javascript:calcMD5();" size="30" maxlength="15"/>
<input type="hidden" name="pass" id="md5string1" value="" />
</div></td>
</tr>
<tr>
<td></td>
<td><div align="right">
<input type="button" name="logginn" onClick="xajax_acceso(xajax.getFormValues('loginexim'))" value="Acceder" />
</div></td>
</tr>
<tr>
<td colspan="2" class="imprime">
<div id="iderror"></div>
</td>
</tr>
</table>
</div>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>

########################################################################
Codigo xajax para que funcione.
<?php
session_start();
function acceso($acceder){
$respuesta = new xajaxResponse();
$conn = new conexionBD();
$us=$acceder["usuario"];
$contra=$acceder["pass"];
$MSG=utf8_decode("usuario o contrase&ntilde;a incorrecta");
if(trim($us)=="" or trim($contra)==""){
$respuesta->addAssign("iderror","innerHTML",$MSG);
}
else{
$Str_SQL="SELECT LOGIN,PASS,PERMISOS FROM USUARIOS WHERE LOGIN='$us'";
$result=$conn->EjecutarSQL($Str_SQL);
if($row=mysql_fetch_array($result)){
if(trim($contra)==$row[1]){
$_SESSION["BD_ERP"] = ($row[0]);
$respuesta->addRedirect("form_cotizar.php");
}
else{
$respuesta->addAssign("iderror","innerHTML",$MSG);
}
}
else{
$MSG="nunca entro a la consulta";
$respuesta->addAssign("iderror","innerHTML",$MSG);
}
}
return $respuesta;
}

######################################
Formulario principal

<?php
session_start();
if (!isset($_SESSION["BD_ERP"]))
{
header("Location: portal_loggin_exim.php");
exit();
session_destroy();
}
require_once('xajax/xajax.inc.php'); //incluimos la librelia xajax
include("lib/class.conexionDB.inc.php");
include("lib/class.functions.php");
?>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Pragma"content="no-cache">
<meta http-equiv="expires"content="0">
<head>
<?php $xajax->printJavascript("xajax"); //imprime el codigo javascript necesario para que funcione todo. ?>
<link href="CSS/style.css" rel="stylesheet" type="text/css">

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.funciones.action.js" type="text/javascript"></script>
</head>

<body>
<div id="conte" class="container"><!-- inicia contenedor -->
<form name="addcliente" id='agregar_cliente' method="post" action="">
<fieldset><!-- inicia fielset-->
<legend>Agregar Clientes</legend>
<div class="top"> <!-- inicia top-->
<label class="label">Cliente:</label>
<div class="div_texbox">
<input type="text" name="cliente" class=" textbox txtFec" />
</div>
<label class="label">Rfc:</label>
<div class="div_texbox">
<input type="text" name="rfc" class="textbox txtFec" />
</div>
</div> <!-- fin top-->
</fieldset> <!-- fin fieldset -->
<div id="btnes" class="button_div"> <!-- inicia div de orginzacion de botones -->
<input type="button" id="add_client" name="addcliente" class="buttons_aplicar" onClick="xajax_addclient(xajax.getFormValues('agregar_cliente')" value="Agregar Cliente" />
</div><!-- finaliza organizacion de bonotes-->
</form>
</div> <!-- fin contenedor-->
</body>
</html>

#####################################################

Pero cada vez que le doy actualizar a la pagina se regresa a la pagina de login para ingresar contraseña y ya me canse de buscarle por todos lados si alguien me
puede ayudar se lo agradeceria mucho.

Saludos

JOOZ
while dentro de funcion
25/12/2011
hola necesito de sus ayudas, estoy comenzando a programar y no se como hacer un while dentro de una funcion en xajax para mostrar un tabla segun la consulta que se hace a traves de un formulario...... parte del codigo

<?php
require ('../xajax/xajax_core/xajax.inc.php');
require ('conexion.php');

$xajax = new xajax();
function procesa_form($form_entrada)
{

$vclave = "".$form_entrada["vclave"]."";
//$Periodo = "".$form_entrada["Periodo"]."";
$busq = "".$form_entrada["Buscar"]."";
$opt = "".$form_entrada["opt"]."";
$sql= "Select * from Dpersonales where ".$vclave." ".$opt." ".$busq." ";

$Consulta=mysql_query($sql, $conex)

while ($MostrarFila=mysql_fetch_array($Consulta)){
echo "<tr> ";
echo " <td".estiloCampo($campo,'Cedula').">".$MostrarFila['Cedula']."</td> ";
echo " <td".estiloCampo($campo,'Apellidos').">".chao_tilde($MostrarFila['Apellidos'])."</td> ";
echo " <td".estiloCampo($campo,'Nombres').">".$MostrarFila['Nombres']."</td> ";
echo " <td".estiloCampo($campo,'Periodo').">".$MostrarFila['Periodo']."</td> ";
echo " <td".estiloCampo($campo,'Ambiente').">".$MostrarFila['Ambiente']."</td> ";
echo "</tr> ";
}


gracias por su ayuda y feliz navidad.......

chenteb
Excelente el manual.
25/4/2012
tengo una duda y estoy iniciando el uso de xajax, mi pregunta es esta?

tengo una lista de alumno que contiene su nombre genero y fecha de nacimiento

como se implementaria xajax para hacer una actualizacion en una fila de la tabla de datos de los alumnos?, gracias por todos sus aportes

jhons11...
pregunta sobre xjax
31/8/2012
buen dia. me gustaria saber como hago un paso de variables desde una funcion a otra, lo que sucede es que tengo una entrada de texto "input" y me pasa un valor a una variable, y lo procesa, y hasta ahii normal, tengo otra entrada de texto "input" y necesito que ese pasar lo que ahi escriba + el campo anterior y pasar a procesarlos, o simplemente, pasar una variable de una funcion a otra ejm:

function a ($a)
{
$salida= $a;
}
function sumar($a + $b)
{
$salida= $a + $b;
}
//para ser breve es algo mas o menos asiii
pero suponiendo de que $a y $b viene de campos de texto
Ver otros 3 comentarios pendientes de revisar
Enviar un comentario al manual

En este manual
Descargar manual 1

Categorías relacionadas:

Manuales relacionados
Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...