Xajax - ejemplo paso a paso
- Detalles
- Categoría: Programación
- Última actualización el Viernes, 13 Mayo 2011 12:48
- Escrito por cybnet
- Visto: 5129
Para los novatos como yo implementar ajax en nuestras webs puede ser muy muy complicado y tedioso. La biblioteca php Xajax de código abierto facilita muchísimo el trabajo de implementar la tecnología ajax utilizando funciones que convertirán código php en funciones ajax.
Y aunque sea novato no me quiero perder el ajax para crear webs dinámicas pero atractivas. Por supuesto se pueden crear webs dinámicas sin ajax con la consiguiente recarga y lentitud.
¿Qué es Xajax?
Xajax es una biblioteca php open source que nos va a facilitar, y mucho, el desarrollo de aplicaciones web con tecnología ajax. Además necesitará un poco de html, un poco de css y un poco de Javascript. Así el usuario va a poder solicitar información al servidor y obtenerla de forma dinámica y atractiva sin tener que recargar páginas enteras.
Todo el proceso el manejado por el objeto Xajax(). Creamos nuestras funciones php, las registramos usando el método register(XAJAX_FUNCTION,'mifuncion') (tantas como queramos) y finalmente procesamos la información con xajax->processRequest(). Más adelante veremos los 7 pasos básicos.
Igual os preguntáis por qué xajax y no otras de los tantos frameworks y bibliotecas de ajax que hay disponibles. Bien, para mí me resulta mucho mejor xajax por estar centrada en php. Las demás suelen usar mucho más javascript y no es mi fuerte. Con ajax las sentencias de javascript a escribir son bastantes simples. Además de ser compatible con la mayoría de navegadores y poder utilizarse para actualización de cualquier atributo de un elemento y poder registrar distintas funciones cada una con sus propias peticiones.
Los 7 pasos básicos para implementar Xajax
1.- Por supuesto el primer paso es incluir la biblioteca Xajax en nuestro php, las descargamos la ponemos en nuestro y servidor e cinluimos la biblioteca xajax en nuestro código. (no olvides añadir la ruta de este archivo si lo tienes en lugar diferente)
require_once("xajax.inc.hp");
2.- Crear una nueva instancia del objeto xajax que controlará el proceso.
$xajax = new xajax();
3.- Registramos en el objeto xajax las funciones que vamos a usar en la aplicación.
$xajax->register(XAJAX_FUNCTION,"miFuncion");
O también:
$xajax->registerFunction("miFuncion");
4. -Escribir nuestras funciones php que vayamos a usar en la aplicación ajax. Imprescindible: Esta función ha de devolver el XML. Pero tranqui, que esto lo hará Xajax.
function miFuncion($argumentos) {
// realiza el proceso que necesites con la variable $argumentos
// pon el resultado en otra variable, por ejemplo $respuesta
// Crea una nueva instancia del objeto xajaxResponse
$objResponse = new xajaxResponse();
// escribe la respuesta en algún elemento html definido con una id
//para que cambie su contenido por el de la variable $respuesta
$objResponse->assign("ElementId","innerHTML", $respuesta);
//debuelve el XML generado por xajaxResponse
//a veces no es necesario usar getXML() y devolver $objResponse es suficiente
return $objResponse->getXML();
}
5.- Llamamos a xajax para que procese los pedidos
$xajax->processRequest();
6.- Incluir el javascript axjax generado desde xajax
$xajax->printJavascript();
7.- Ahora nos queda llamar la función desde un evento que realice el usuario en la web, por ejemplo el clic en un botón de un formulario.
onclick="xajax_myFunction(SomeArgument);"
Ya que tenemos los 7 pasos vamos a aplicarlo a un ejemplo xajax concreto, bueno podéis verlo si os registráis y enviáis una web al directorio, pero para que no lo tengáis que hacer aquí hago otro muy sencillito: vamos a mostrar un formulario de registro diferente para usuarios y para empresas (nota que el envío del formulario no va estar activo).
Puedes ver un ejemplo en vivo aquí. Aunque el ejemplo es muy sencillo y básico creo que puede ser muy ilustrativo. Descargar código usado
registerFunction('doform');
function doform($aFormValues)
{
if ($aFormValues==1) {
$form = '';
}
if ($aFormValues==2) {
$form = '';
}
$response = new xajaxResponse();
if($form != '') {
if ($aFormValues == 1) {
$usertype = 'Formulario para usuarios';
} else { $usertype = 'Formulario para empresas'; }
$response->assign('contenido', 'innerHTML', $usertype);
$response->assign('contenido2', 'innerHTML', $form);
$response->assign('contenido2', 'style.display', 'block');
$response->assign('submitButton','style.display','none');
$response->assign('submitButton','disable',false);
}
if($form == '') {
$aviso='algo mal';
$response->assign('contenido2', 'innerHTML', $aviso);
$response->assign('contenido2', 'style.display', 'block');
$response->assign('submitButton','disabled',false);
$response->assign('submitButton','value','Continuar');
}
return $response;
}
$xajax->processRequest();
?>
Ejemplo formulario ajax creado con xajax en php
RSS
Jorge, eso del captcha que tiene que ver con este post...jeje, no te lo tomes a mal. Te puedes pasar por este otro post sobre implementación de captcha y recaptcha con php
hola quisiera insertar el codigo captcha en mi web, que pasos hicistes, graciasesta genial
[quote name="Raul"]Deprecated: Assigning the return value of new by reference is deprecated in C:\wamp\www\ASTROdidactico\xaj ax\xajax_core\xajax.inc.php on line 360Deprecated: Assigning the return value of new by reference is deprecated in C:\wamp\www\ASTROdidactico\xaj ax\xajax_core\xajax.inc.php on line 1305
Esos errores son de la libreria xajax cuándo se usa en php 5.3. Me imagino que los desarrolladores de la librería xajax lo actualizarán en futuras versiones para hacerlo compatible con las últimas versiones de php.
La solución es que te vayas a las líneas de los archivos que indica el error y elimines el símbolo '&' que veas en esas líneas.
De todas formas, esos mensajes son avisos pero no errores propiamente dichos y no hacen que dejen de funcionar el script. Para no ver esos mensajes hay configurar las opciones "display_errors" o "error_reporting" en el archivo php.ini.
Hola, gracias por el ejemplo y la explicacion. Estoy comenzando con xajax pero al intentar ejecutar tu script en mi servidor local me aparece los siguientes errores:Deprecated: Assigning the return value of new by reference is deprecated in C:\wamp\www\ASTROdidactico\xaj ax\xajax_core\xajax.inc.php on line 360
Deprecated: Assigning the return value of new by reference is deprecated in C:\wamp\www\ASTROdidactico\xaj ax\xajax_core\xajax.inc.php on line 1305
si tienen alguna sugerencia o ayuda se agradece.
saludos
Gracias @Next, tambien puedes hacer otro cambio:if($form == 0) {
$aviso='No has elegido una opcion valida';
$response->assign('contenido2', 'innerHTML', $aviso);
$response->assign('contenido2', 'style.display', 'block');
$response->assign('submitButton','disabled',false);
$response->assign('submitButton','value','Continuar');
}
O algo así para mostrar un mensaje adecuado :)
Muy buenas!primero de todo muchas gracias por este aporte, ahora bien, hay un pequeño error en el código del ejemplo. Si se selecciona la opción del desplegable "Seleccione" cuyo valor es 0 (valor=0).
Simplemente substituyendo esta parte de código:
if($form != '') {
if ($aFormValues == 1) { $usertype = 'Formulario para usuarios'; } else { $usertype = 'Formulario para empresas'; }
por:
if($form != '') {
if ($aFormValues == 1) { $usertype = 'Formulario para usuarios'; } elseif ($aFormValues == 2) { $usertype = 'Formulario para empresas'; } else { $usertype = 'Selecciona una opción'; }
ya no deberá dar ningún error.
Gracias de nuevo por este ejemplo tan detallado.
Un saludo!
Next
@Pierce siento que el enlace al archivo de texto con el código del ejemplo estuviera mal, ya está corregido y puedes descargarlo. Mira el último párrafo del post.
hola quisiera saber donde podria conseguir el codigo que se muestra en el ejemplo. me lo podrian enviar al correo se los agradeceria
Perfil
Artículos
RSS
Google +1