c
c es un framework desarrollado en  de código abierto que permite crear fácilmente aplicaciones

Web que requieran de AJAX y sin necesidad de conocer JavaScript.

Esta entrada es para mostrarte un ejemplo del uso de la librería, un formulario en este caso que requiere
de ciertas validaciones antes de ser procesado. Para entenderlo necesitas conocimientos básicos en PHP
y CSS.

Si quieres ver como quedará nuestro formulario con validaciones c
c al final, haz clic aquí

Te recomiendo que leas la entrada de presentación de XAJAX, en ella encontraras un ejemplo básico del
uso de la librería debidamente comentada.

Ya deberías haber descargado la librería y tenerla lista para usar, si no lo has hecho, sigue los siguientes
pasos:

1.- descarga el  desde la Web oficial.

2.- descomprime el zip en la carpeta del proyecto.
3.- cambia el nombre de la carpeta que se acaba de crear luego de la descompresión a " "

La carpeta del proyecto no es mas que un directorio con el nombre "

   " que tendremos en
nuestro directorio Web, por ejemplo:
- suponiendo que nuestro directorio Web es "
" (recordar que ese directorio es el que asigna el
servidor Web cuando lo instalamos), nos quedaría así --> 

   .

Son varios los archivos que usaremos aparte de la librería, te dejo el cómo quedara el árbol de directorio
al final.

—



 

 



 
  



  




—


—

 
—— 
— —
 
 


—


 
———— 


— —


Para éste ejemplo dispondremos de un formulario el cual necesita de una serie de validaciones antes de
que los datos puedan ser procesados. Se han seleccionado las validaciones comunes, tales como:

 
 : este campo solo acepta letras de la a la  sea mayúscula o minúscula, espacios y
guiones.
 solo acepta números y está comprendido por una longitud que va de uno a ocho
dígitos.
! la dirección de correo electrónico debe cumplir el formato: Id_cuenta [arroba] dominio [punto]
algo.
""
 el password o contraseña debe ser mayor a cinco (5) caracteres y menor que veinticinco (25).
#
 $ ""
 estos dos campos son solicitados nuevamente para asegurarnos
de que el usuario no se equivoca al escribirlos anteriormente mientras se completa el formulario.

Ahora pasemos al código del ejemplo.

- Comencemos con el archivo que contiene el estilo de los campos y los elementos div, su nombre es
""% """ (recuerda que este va dentro de la capeta 
   ).

 &'
"

 
 $(
?
1  

2 !
3

" #
4
5  "$—
#
6 —"$—
#
ù 
 
—"$—

 %&'(#
8 
 

"$—

 %&'(#
9 

" #
10
)"(*—
#
11+
 

"%,(#
12
-
13
14.
15!
16
" #
1ù "
#
18
 "$—

 %&&&#
19/"0&&—
#
20+
 

"%1#
21-
222

23
!
24
25
 "
#
26

" #
2ù
)"($—
#
28-
293—

30!
31

"+#

)"($—
#

/"
#
-

No hay mucho que explicar, solo acotar que usaremos un elemento  para detallar los errores de
manera global y otros que indicaran el campo exacto afectado.

Para incluir el "% "" en el proyecto solo pega la siguiente linea entre la etiqueta ) *+) *+ de
nuestro %, (el código de este archivo lo veremos mas adelante).
?
1ƒ+  45
5 455 6

- El siguiente archivo es el que contiene las funciones generales, cabe acotar que la decisión de usar
funciones se toma cuando es necesario usar el mismo proceso una y otra vez, de esta manera se
simplifica código y se reusa otro ;)

El nombre del archivo es "%," y las funciones son las siguientes:
 &'
"

 
 $(
?
1 ƒ ——
2 
3 667
4 
 8
97:3
5 !
6
ù 66— 


 

8   :3ƒ;
 :3 (&& 
9    <2 =ƒ 7 ƒ6  



10;   
11

(&&<#
12
13!
14   >—  56?@  )AB&,CDEFGG@ )AB&,
15CDEFHIF@  )AB&,
16EFGGH@)AB&,E!$J(&&-GG@)ABE!$JK-:65J:3 
1ù
<7



ƒ 7 ƒ6 
18
19ƒ
9@
E

@—
E
ƒ6
J 
20"ƒ
 I
ƒ6
<" #
21-
22-
23
2466
—
8
 A—
 
 
25 

26
 8
93
:3J:3—

2ù!
28
 >—  56?@A B
29
30) DLMNOPQRSTUCV=WXYZ[\ G<GEH:65J:3
31   57—
ƒ :3—
ƒ6 

—  
32 
J—
J 
33—=
JV J5#
34  :3ƒ$
 :3 *&
35   57ƒ :3—
ƒ6  

—

36 
3ù 

 *&  5#
38
39
   #
40
41-
42
4366—
39  


  

44
 8
939:39
45!
46 >— :39
4ù   <7—
ƒ 3V9ƒ6 

—
48W
<#
49  :39J&J(44&
50   <2ƒ 3V9ƒ6 
—
) —

51

&<#
52
53  :39 ;
54   <2ƒ 3V9ƒ6  


55

;<#
56
5ù   #
58-
59
6066—/
 
K

$&   
61
 8
9]/
:3
62
!
63
64 >— :3
65   <^

—   ƒ  V 
ƒ6 
 6W
 
—
 —/
<#
  :3ƒ4'
 :3 $'
   <7—
]/
 
'  

 


$'  <#

   #
-

66
— —

 


 8
97:_3—
(J:_3—
$J:3—
8
!
   :_3—
( >4:_3—
$ 
57
ƒ :3—
8ƒ6 





— 

`—  5"#
-

Explicare que hace cada función:

 " -. recibe como parámetro una dirección de E-mail que se compara luego haciendo uso de
expresiones regulares para descartar caracteres no válidos.

 "

 -. recibe como parámetro la cadena a validar y el nombre del campo al cual pertenece, a
parte de restringir la longitud del nombre o apellido, se usan tambien expresiones regulares para exigir
que solo se usen caracteres alfabéticos, guiones y espacios.

 "-. la cédula de identidad es un código único compuesto por una cadena de números con longitud
de 1 a 8. El número de CI. no puede ser o comenzar por cero (0). Se hace uso de la función (
para restringir a dígitos la cadena a tratar.

 """
-. se valida solo la longitud del password el cual debe estar entre 6 y 25 caracteres
(recordar que esto es un ejemplo y que el limite lo colocas tú).

 " &-. recibe como parámetro tres argumentos y dos de ellas son cadenas la cual compara, si son
iguales devuelve false, si son diferentes devuelve true.

- Se ha preferido que cada función devuelva un mensaje de advertencia si los datos son incorrectos y
#" si es lo contrario.

- Es como cuando te preguntan ¿la mesa es cuadrada? tu respondes SI afirmando que SI lo es.
- Si te preguntaran ¿La mesa NO es cuadrada? si respondes SI estas afirmando que NO es cuadrada.

El siguiente archivo es quien contiene lo mas interesante para este caso, la interacción con el objeto
c
c. El archivo se llama "%," y el código es el siguiente:

/%! Lo primero es incluir la clase XAJAX y el archivo que contiene las funciones generales:
?
166

2  
5

6


6

——5#
3
4669

 
5  
5
————5#

4%! Creamos una instancia al objeto XAJAX:

?
1:

4/

#

K%! Creamos las funciones que asociaremos con el objeto, para el ejemplo se han creado dos, una que
gestiona el formulario (validando y mostrando los mensajes de error según sea el caso) y otro que se
encarga de procesarlo (verificar que todo va bien y almacenar los supuestos datos):

Comenzaremos con la función 0

1(:
 &'
"

 
 $(
?
1 66—
—
—
— 

2 
 a
b:
J:3—

3 !
4 :3 4:
@5
:3—
5E#
5
6 :3—
$ 4 —
:3—
J<$< 
ù  :3—
J&J   :3—
 ("<<#
8 
9 66




10 —:3
11:b 
 4<7—
ƒ <>—:3—
$ 53
 
12:3—
$5 ":3—

13<ƒ6 


J
— 

<#
14
15!
16
 :3—
44<8
 < cc:3—
44<A—
<
1ù
18 :b 
 48
93
:3J:3—
#
19 :3—
44<39<
20:b 
 48
939:3#
21 :3—
44<7<
22:b 
 48
97:3#
23 :3—
44<]/
<
24:b 
 48
9]/
:3#
25 >—:3—
$
26
:b 
 4
2ù
288
97:3J:
@5
:3 —
$5EJ:3—
$#
29-
30
3166

  
32
  —
—

33:9 4>>:b 
 <

< "<

<#
34
3566


— 

36:d.b2b2
 45ƒ4<2
< ƒ
 4<&<
3ù
 4<6:9—< 6 
:9ƒ6 5#
38
39:d.b2b 
 45ƒ4< 
< ƒ
 4<&<
40 4<6/ —< 6 :b 
ƒ6 5#
41
4266 
 —    —


43

`—

44:
`— 4/

`—
#

66A)


:
`—  5:3—
5J< d.b2<J:d.b2b2
#
:
`—  <  
<J< d.b2<J
>>:b 
 :d.b2b 
 "<<#

66 




   :
`—#
-

Esta función recibe como parámetro un array con los valores de los campos y el nombre del campo
exacto a validar, puede ser llamada con cualquier evento (se explica mas adelante).

- Lo primero que hace es capturar el valor del campo y luego verificar si es un campo de confirmación.
- Luego se hace el llamado a las funciones que van a validar cada campo según sea el caso.
- En la variable "±"1" 2" vamos almacenando el retorno de las funciones, si esa variable tiene como
valor "#"" se le asigna a la variable "±"(" el valor "correcto", en caso contrario se asigna "incorrecto".
- Se arma el contenido que ira a los elementos Div.
- Se crea una nueva instancia para generar la respuesta con Ajax.

Nota:
1 ""( este método funciona igual que si aplicaras en
3
:
" %( 4-55.%
61789  
 
"9:"

""(-. recibe tres parámetros:

a- Id del elemento.
b- propiedad a usar, ejemplo: innerHTML, value, style.display, etc.
c- el valor que se asignará a el objeto dueño del Id.

Ejemplo: ± ;""!+""(-55<5

6175<5  
 
"5.:

- Asignamos a los elementos  los valores que corresponda, notar que al 2 se le asigna el valor
de la variable mensaje global si esta contiene un valor diferente de false, de lo contrario se asigna nada.
?
1:
`—  5:3—
5J< d.b2<J:d.b2b2
#
2:
`—  < 
<J< d.b2<J
3>>:b 
 :d.b2b 
  "<<#

- Por ultimo se retorna el objeto

?
1   :
`—#
La segunda función es 0

 "".
 &'
"

 
 $(
?
1
2
3
4 
 a
]
:

5 !
6 66 
—    —


ù :
`— 4/

`—
#
8 
9
66
—


 
1
0 
1 
1 8
93
:
@<
8
 <EJ<8
 <>4cc
1 8
93
:
@<
A—
<EJ<A—
<>4cc
2 8
939:
@<
39<E>4cc
1 8
97:
@<
7<E>4cc
3 8
9]/
:
@<
]/
<E>4cc
1 8
97:
@<
7< EJ:
@<
7$<EJ<7 <>4
4 cc
1
8
97:
@<
]/
<EJ:
@<
]/
$<EJ<]/

5
1 <>4
6 
1 :
`—   <e7
 
 — 
ù 
><#
1 
8 !
1 6H
9   —





2 
J
0
  

  
—
 
2
 —
1
2  —
2  —
2 H6
3 
2 6H






J
4 

 
 

2 —

 

9_
J f^ —
5 H6
2 :
`—   <e


><#
6

2
ù 66—

—

2 :A 3—
 4
8  <8
 <J<A—
<J<39<J<7<J<7$<J<]/
<J<]/

2 $<#
9 
:4&#:ƒ0#:FF
3 !
0 :
`—
3    5
:A 3—
@:E5J<< 66—

1 


3
  5:A 3—
@:E5J< d.b2<#66—

2
3


3 -
3 -
4    :
`—#
3 -
5
3
6
3
ù
3
8
3
9
4
0
4
1
4
2
4
3
4
4

En ella se recibe como argumento un arreglo con los valores de los campos.
- Luego de crear la instancia para generar la respuesta con xajax, se valida cada cambio llamando a las
funciones correspondientes.
- Si hay algún campo sin validar se muestra un mensaje usando el método 
, de lo contrario ya se
pueden almacenar datos, sea en una DB, archivo plano, etc.
- Se muestra un mensaje informando al usuario de que todo se ha realizado satisfactoriamente.
- Se limpian los campos: se ha usado el método 
para ello.

Nota:
1
 permite limpiar determinado elemento, recibe como argumento:
a- Id del elemento a limpiar.
b- propiedad involucrada.

Ejemplo: ± ;""!+ 

-55<55.:

Para este caso como son varios campos se ha decidido usar un ciclo/bucle for y el llamado al método se
hace uno detrás del otro:
?
1:
`—
2  <
<:A 3—
@:EJ<<
3  <<:A 3—
@:EJ< d.b2<#

Lo que es igual a:
?
1:
`—   <
<:A 3—
@:EJ<<#
2:
`—   <<:A 3—
@:EJ< d.b2<#

o%! Una vez has desarrollado las funciones a usar con el objeto XAJAX, hay que registrarlas:
?
:

   a
<a
b <#66


1
 

2:

   a
<a
]
<#66—




 

A%! Le indicamos al objeto xajax que procese la peticion / el pedido

?
1:

 —
`#

†%! Entre las etiquetas  * en el código 617 se agrega la linea

?
1:

 — f —5

65#

De esa manera se le dice que Incluya el JavaScript generado desde XAJAX

ù%! Por ultimo solo nos queda llamar a las funciones 0

1( y 0

 "" haciendo uso de
cualquier evento, en este caso => y 3:
?

+—4
1
5

a
b

a
_ <
(<J<
   —
 
  <5
?
1
45

a
]


a
_<
(<5

- Antes del nombre de la función se debe agregar el sufijo " ".

v
va
_<  
 
<

(0
?" este método recibe el identificador/Id del formulario del cual se desea obtener los datos
y devuelve un arreglo con los datos de dicho form.

Como podrás notar, 0

1( nos pide dos argumentos, el array del formulario y el nombre del
campo a validar, mientras que 0

 "" solo el arreglo .

@%! El resto es el código HTML, un form, campos y Div necesarios:

Código del %, (completo).
 &'
"

 
 $(
?
1 ƒ ——
2 
3 66

4  
5

6


6

——5#
5 
6 669

 
ù  
5
————5#
8
9

10 663 


gAfAg"
11 :

4/

#
12 
13 66—
—
—
— 

14 
 a
b:
J:3—

15 !
16 :3 4:
@5
:3—
5E#
1ù :3—
$ 4 —
:3—
J<$< 
18  :3—
J&J  :3—
 ("<<#
19

20
21 66




22  —:3
23 :b 
 4<7—
ƒ <>— :3—
$ 53
 
24 :3—
$5 ":3—

25  <ƒ6 


J
— 

<#
26 
2ù !
28  :3—
44<8
 < cc:3—
44<A—
<
29  :b 
 48
93
:3J:3—
#
30
 :3—
44<39<
31
32
 :b 
 48
939:3#
33  :3—
44<7<
34  :b 
 48
97:3#
35  :3—
44<]/
<
36  :b 
 48
9]/
:3#
3ù  >—:3—
$
38  :b 
 4
39 8
97:3J:
@5
:3—
$5EJ:3—
$#
40 -
41 
42
66

  
43
44 
  —
—

45 :9 4>>:b 
 <

< "<

<#
46 
4ù 66


— 

48 :d.b2b2
 45ƒ4<2
< ƒ
 4<&<
49  4<6:9—< 6 
:9ƒ6 5#
50 :d.b2b 
 45ƒ4< 
< ƒ
 4<&<
51  4<6/ —< 6 :b 
ƒ6 5#
52 
53 66 
—    —


54 

`—

55
:
`— 4/

`—
#
56
5ù 
58 66A)


59 :
`—  5:3—
5J< d.b2<J:d.b2b2
 #
60 :
`—  < 
<J< d.b2<J
61 >>:b 
 :d.b2b 
 "<<#
62 
63 66 




64    :
`—#
65 -
66

6ù
68 
 a
]
:

69 !
ù0 66 
—    —


ù1 :
`— 4/

`—
#
ù2 
ù3 66
—


 
ù4 
ù5 
ù6 8
93
:
@<
8
 <EJ<8
 <>4cc
ùù
8
93
:
@<
A—
<EJ<A—
<>4cc
ù8
ù9
8
939:
@<
39<E>4cc
80 8
97:
@<
7<E>4cc
81 8
9]/
:
@<
]/
<E>4cc
82 8
97:
@<
7< EJ:
@<
7$<EJ<7 <>4
83 cc
84 8
97:
@<
]/
<EJ:
@<
]/
$<EJ<]/

85 <>4
86 
8ù :
`—   <e7
 
 — 
88 
><#
89

90
91 !
92 6H
93   —





94 
J
95   

  
—
 
96   —
9ù   —
98   —
99 H6
10

0
10
6H




 

J
1  

 
 

10  —

 

9_
J 
2 f^ —
10 H6
3 :
`—   <e


><#
10 
4 66—

—

10 :A 3—
 4
5  <8
 <J<A—
<J<39<J<7<J<7$<J<]/
<J<
10
]/
$<# 
6
10 
:4&#:ƒ0#:FF
ù !
10  :
`—
8    5
:A 3—
@:E5J<< 66—




   5:A 3—
@:E5J< d.b2<#66—



-
-
   :
`—#
-

:

   a
<a
b<# 66



 

:

   a
<a
]
 <#66—




 


662




—
—
6—

:

 —
`#

?
1
ƒ>h3.i]7d.b2]j
293 566k1366.d.b2*&(66785
2
3
5—"66////1
6.`6*6  5 
4 ƒ 
5 ƒ 
6 ƒ _

gAfAgƒ6 
ù ƒ+  45
5 455 6 
8 ƒ ——
9 669f^ — 
gAfAg
1 :

 — f —<

6<# 
0  
1
ƒ6 
1
1 ƒ


45
7
9<
8
 <
#5 
2 ƒ
 4<
(< 4<
(< 
4< —"
#<
1 
45

a
]


a
_<
(<5 
3 ƒ 4<.< 
1 ƒ 
 4<&< 
4 ƒ ƒ 
—4<1< ƒ 4< 
< ƒ6 ƒ 6 ƒ6 ƒ6 
1 ƒ 
5  ƒ 4< < /4<$$&—
< 4<3—
< 8
 "ƒ6 
1  ƒ /4<$&&—
< 
6  ƒ— 
4<(< —4<
< 4<
8
 <
1
4<
8
 < )4<1&<
ù
1

4<*&<
8
+—45

a
b

a
_<
(<J<8
 <5 6 
1  ƒ6 
9  ƒ 4<< /4<1&&—
< ƒ
2 4<8
 < ƒ6 ƒ6 
0 ƒ6 
2 ƒ 
1  ƒ 4< < 4<3—
< A—
"ƒ6 
2  ƒ 4<< 
2  ƒ— 
4<$< —4<
< 4<
A—
<
2
4<
A—
< )4<1&<
3
2 
4<*&<
+—45

a
b

a
_<
(<J
4 <A—
<5 6 
2  ƒ6 
5  ƒ ƒ 4<A—
< ƒ6 ƒ6 
2 ƒ6 
6 ƒ 
2  ƒ 4< < /4<$$&—
< 4<3—
< 3l#
ù 9 "ƒ6 
2  ƒ 
8
 ƒ— 
4<1< —4<
< 4<
39< 4<
39<
2
9 )4<(&<
3 
4<;<
0
+—45

a
b

a
_<
(<J<39<5 6 
3  ƒ6 
1  ƒ 4<< /4<1&&—
< ƒ 4<39< ƒ 6 ƒ6 
3
ƒ6 
2
3 ƒ 
3  ƒ 4< < 4<3—
< 7 "ƒ6 
3  ƒ 4<< 
4  ƒ— 
4<*< —4
<4<
7<
3 4<
7< )4<1&<
5 
4<(&&<
3
+—45

a
b

 a
_<
(<J<7<5 6 
6  ƒ6 
3  ƒ ƒ 4<7< ƒ6 ƒ6 
ù
ƒ6 
3
8 ƒ 
3  ƒ 4< < 4<3—
< 3
 7"ƒ6 
9  ƒ 4<< 
4  ƒ— 
4<'< —4<
< 4<
7$<
0 4<
7$< )4<1&<
4 
4<(&&<
1
+—45

a
b

a
_<
(<J<7$<5 6 
4  ƒ6 
2  ƒ ƒ 4<7$< ƒ6 ƒ6 
4
ƒ6 
3
ƒ 
4
4  ƒ 4< < /4<$$&—
< 4<3—
< ]/
"ƒ6 
4  ƒ /4<$&&—
< 
5  ƒ— 
4<K< —4<—/
< 4<
]/
<
4 4<
]/
<
6 )4<$'< 
4<$'<
4
+—45

a
b

a
_<
(<J<]/
<5 6 
ù  ƒ6 
4  ƒ 4<< /4<1&&—
< ƒ
8 4<]/
< ƒ6 ƒ6 
4
ƒ6 
9
5 ƒ 
0  ƒ 4< < 4<3—
< 3
 ]/
"ƒ6 
5  ƒ 4<< 
1  ƒ— 
4<0< —4<—/
< 4<
]/
$<
5 4<
]/
$<
2 )4<$'< 
4<$'<
5
+—45

a
b

a
_<
(<J<]/
$<5
3 6 
5  ƒ6 
4
 ƒ ƒ 4<]/
$< ƒ6 ƒ6 
5
5
ƒ6 
5 ƒ ƒ 4< < 
—4<1< ƒ 6 ƒ— —4<<
6 
4<;<
5 4<   

< ƒ6 ƒ6 
ù ƒ6 
5 ƒ6 
8 
5 ƒ 4<
 " #< ƒ 
 4<&<
9  4<6

—
/ —< 6 ƒ6 
6 ƒ6
 
0
ƒ6
 
6
1 ƒ6
6
2
6
3
6
4
6
5
6
6
6
ù
6
8
6
9
ù
0
ù
1
ù
2
ù
3
ù
4
ù
5
ù
6
ù
ù
ù
8
ù
9
8
0
8
1
8
2
8
3

Fuente: Cassianet >> http://cassianinet.blogspot.com/2011/02/validacion-de-formulario-con-xajax-

ajax.html#ixzz1MpDCZN8G