Professional Documents
Culture Documents
JavaScript + XML)
I.
Concepto de AJAX
AJAX, es el acrnimo para Asynchronous JavaScript+CSS+DOM+XMLHttpRequest. Esta metodologa para generar
contenido, una vez cargada y procesada una pgina, enva mediante eventos scripts y rutinas que van al servidor buscando
en background los datos en porciones especficas, donde estos datos son usados para actualizar la pgina solo regenerando
porciones de la misma, sin recargar todo el contenido del documento en el navegador.
II.
Entendiendo AJAX
Ajax no es un script, no es un servidor, no es un archivo, no es un programa, no es un mdulo de apache, no es una
extensin de PHP, NO ES UNA TECNOLOGIA.
Por ejemplo en un proceso normal una aplicacion web recarga o va de una pgina a otra porque debe enviar una peticin a
algun servidor web esta debe procesarla y mandar el resultado final y el resultado final es la pgina a la cual nos dirige la
aplicacion o la recarga de la pgina misma. En todo esto AJAX hace lo mismo con la diferencia que lo hace en background
osea que realiza todo el proceso de comunicacion con algun servidor web sin que el usuario pueda verlo y una vez terminada
con xito solo aadir el resultado del proceso a la pgina en curso de esta manera evitar la recarga o una pgina
receptora de los resultados del proceso.
Entiendase que AJAX no se refiere a usar el objeto XMLHttpRequest de manera indispensable porque en realidad AJAX no
es una tecnologa, sino la unin de varias tecnologas que juntas pueden lograr cosas realmente impresionantes como
GoogleMaps, Gmail,etc.
A continuacin algunas formas similares a lo que es AJAX
Javascript Remote Scripting (JSRS) Un cliente javascript que ejecuta procesos en background escondiendo
elementos, iframes,etc no usa el objeto XMLhttprequest
Microsoft's Remote Scripting (MSRS): solves this problem by embedding a Java applet in the page to
communicate with the server. It provides synchronous and asynchronous remote procedure calls, and works with
Netscape 4.x and IE 4+ only on Windows platforms. Because it requires Java, it only works with Windows XP if the
optional JVM is loaded. It is designed to work with IIS/ASP on the server side. MSRS is in wide use, mostly on
corporate intranets where the client base is predictable. Microsoft has made MSRS freely available.
Internet Explorer:download Behavior: Ofrece una implementacin muy similar de lo que hace JSRS. Si van a
trabajar exclusivamente con Internet Explorer y no quieren complicarse la vida con XML y esas cosas, pueden
echarle una miradita.
Webservice Behaviour: Si se quieren complicar un poco ms la vida, si les piden que se contacten con un
servicio web en SOAP desde IE, pueden usar el comportamiento Webservice.
XML-RPC: Una especificacin para usar XML y HTTP para hacer RPC. Si bien tiene una impresionante lista de
implementaciones en distintos lenguajes, lo verboso del XML hace que la ms simple llamada ocupe un monto alto
de ancho de banda y el control de errores que posee es bastante malo. Lo utilice para hacer RPC entre dos
servidores con PHP y funcion, de todos modos, relativamente bien. No lo recomendara si del lado del cliente
utilizan slo Js.
RSLite is an extremely lightweight implementation of remote scripting which uses cookies. It is very widely
browser-compatible (Opera!) but limited to single calls and small amounts of data. It is also free.
o
o
o
III.
IV.
El objeto XMLHttpRequest
Como vamos a trabajar con este objeto nativo es indispensable crearlo caso contrario ni se podr comenzar las aplicaciones,
partiremos con el objeto desde la creacin, Mtodos y propiedades.
function objetus() {
try {
objetus
= new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try {
objetus= new
ActiveXObject("Microsoft.XMLHTTP");
} catch
(E) {
objetus= false;
}
}
if
(!objetus &&
typeof XMLHttpRequest!='undefined') {
objetus
= new XMLHttpRequest();
}
return objetus
}
solo llamamos a
function objetus() {
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript
gives us Conditional compilation, we can cope with old IE versions.
// and
security blocked creation of the objects.
try {
xmlhttp = new
ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp =
false;
}
}
@end @*/
if
(!xmlhttp &&
typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
}
Te aconsejo usar la primera manera.
Mtodos
A continuacin los mtodos del objeto.
esa URL mediante el mtodo (GET,POST,HEAD,POST o DELETE), tiene 5 parmetros de entrada, las 2
primeras (mtodo, URL) son obligatorios:
mtodo - El mtodo que se usar para la conexin (GET,POST,HEAD,POST o DELETE).
URL - La URL que se llamar para el proceso.
Las 3 restantes (asncrona, usuario, password) son opcionales:
asncrona - Valor booleano, true indica que el proceso se ejecutar sin parar la aplicacion en curso
(Background) false indica que se detendr el proceso hasta que se termine el proceso de manera
correcta.
send(contenido) : Enva el contenido al servidor.
setRequestHeader(etiqueta,valor) : Establece el valor de una etiqueta de las
cabeceras de peticin.
Propiedades
A continuacin las propiedades del objeto.
onreadystatechange : Contiene el nombre de la funcin que se ejecuta cada vez que el estado de la
conexin cambie.
readyState : Estado de la conexin.
Cdigo
Estado
Cargando
Carga completada
V.
valor
200
404
No se encontr URL
414
statusText ; Mensaje de texto enviado por el servidor junto al cdigo (status), para el caso de cdigo
200 contendr "OK".
0. <?php
1.
2. if(isset($_GET['valor']))
3.
4. {
5.
6.
$_valor=$_GET['valor'];
7.
8.
if($_valor==1)
9.
10.
{
11.
12.
echo "Enviaste el
13.
14.
}
15.
16.
elseif ($_valor==2)
17.
18.
{
19.
20.
echo "Enviaste el
21.
22.
}
23.
24.
else
25.
26.
{
27.
28.
echo "No enviaste
29.
30.
}
31.
32.
}
33.
34.
else
35.
36.
{
37.
38.
echo "No se a enviado
39.
40.
}
41.
42.
?>
PHP [fin]
Enviaste el valor 1
Enviaste el valor 2
valor 1";
valor 2";
Entonces lo que debemos hacer es que nuestros archivos Cliente entiendan la lnea y la manera de procesas las peticiones
que tendr nuestro servidor.
Eso s, al realizar la peticin al servidor se pueden crear variables de sesion, cookies, consultas SQL, etc etc.
VI.
VII.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
function primer_tope()
{
//creamos el objeto
_objetus=objetus()
//cargamos una varible con las variables que vamos a
enviar
49.
50.
51.
52.
53.
54.
55.
56.
_values_send="funcion=pt"
_URL_="proceso.php?"
_objetus.open("GET",_URL_+"&"+_values_send,true);
//una vez enviado los valores inmediatamente
llamamos a la propiedad
57.
58.
59.
60.
61.
62.
//onreadystatechange
_objetus.onreadystatechange=function() {
//dentro de la funcion comprobamos el
estado del proceso
63.
64.
65.
66.
67.
68.
69.
70.
if (_objetus.readyState==4)
{
//usamos la propiedad responseText para
recibir en una cadena
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
PHP [fin]
Nuestro procesador trabajar segun la variable funcion que reciba por el mtodo GET
PHP [inicio]
95.
<?php
96.
97.
if(isset($_GET['funcion']))
98.
99.
{
100.
101.
$_valor=$_GET['funcion'];
102.
103.
if($_valor=="pt")
104.
105.
{
106.
107.
$_pt="Tu ip:
".htmlspecialchars($_SERVER['REMOTE_ADDR'])."\n";
108.
109.
$_pt.="request_uri:
".htmlspecialchars($_SERVER['REQUEST_URI'])."\n";
110.
111.
$_pt.="date(): ".htmlspecialchars(date("d-m-Y
: H-i-s"))."\n";
112.
113.
echo $_pt;
114.
115.
}
116.
117.
118.
119.
else
120.
121.
{
122.
123.
echo "No enviaste ningun valor ACEPTABLE";
124.
125.
}
126.
127.
}
128.
129.
else
130.
131.
{
132.
133.
echo "No se a enviado valor alguno de peticion";
134.
135.
}
136.
137.
?>
PHP [fin]
Ejecutar ejemplo1:
_objetus=objetus()
Invocamos al objeto XMLHttpRequest
_values_send="funcion=pt"
Cargamos todas las variables que se van a enviar
_URL_="proceso.php?"
La URL donde nos comunicaremos (Ntese el ? al final del archivo)
_objetus.open("GET",_URL_+"&"+_values_send,true);
La parte ms importante, aqui abrimos la URL con los valores cargados osea proceso.php?funcion=pt
_objetus.onreadystatechange=function() {
Invocamos la propiedad onreadystatechange, entonces cuando el objeto llegue a este punto se llamar a una
funcion que gestionar el resto del proceso.
if (_objetus.readyState==4)
{
Llamamos ahora a la propiedad readyState que nos indicar en que estado se encuentra el proceso, entonces
cuando el estado sea 4 (Terminado) hacemos LO QUE SE NOS OCURRA.
if(_objetus.status==200)
{
Si el estado del proceso arroja un status 200 significa que a terminado con xito.
window.alert(_objetus.responseText);
En este caso llamamos a la propiedad responseText que tiene lo que el procesador solt y lo mostramos
mediante un alert.
}
}
}
_objetus.send(null);
}
Y por ultimo enviamos null porque hemos enviado todas las variables que nos interasaban automticamente al
abrir
proceso.php?funcion=pt
_objetus.send(null) : Es obligatorio, si no se envia algo el proceso no funciona.
VIII.
IX.
X.
XI.
XII.
function algo()
{
_objetus=objetus() //crear objeto
_values_send="variable=valor&otrovar=otvalor" //variables
_URL_="algo.php?" //URL
_objetus.open("GET",_URL_+"&"+_values_send,true); //abrir
procesador
_objetus.onreadystatechange=function() { //funcion
controlador
if (_objetus.readyState==4) //control de estados del proceso
{
//si se da
un status 200 (TERMINADO CON EXITO)
if(_objetus.status==200)
{
//procesos que se realizaran con los datos
obtenidos
}
}
}
XIV.
XV.
XVI.
XVII.
XVIII.
XIX.
function algo()
{
_objetus=objetus() //crear objeto
_values_send="variable=valor&otrovar=otvalor" //variables
_URL_="algo.php?" //URL
_objetus.open("POST",_URL_,true); //abrir
procesador
_objetus.setRequestHeader('Content-Type','application/x-www-formurlencoded'); //cabeceras
POST
_objetus.send('&'+_values_send); //enviar
variables
_objetus.onreadystatechange=function() { //funcion
controlador
if (_objetus.readyState==4) //control de estados del proceso
{
//si se da
un status 200 (TERMINADO CON EXITO)
if(_objetus.status==200)
{
//procesos que se realizaran con los datos
obtenidos
}
}
}
}
Ntense las diferencias con el mtodo GET
XX.
responseText: Con esta propiedad se reciben los datos de la siguiente manera. Cuando el estado del proceso est
en el nivel 4
vari=objetus.responseText
Entonces aqui la variable vari contendr el resultado del procesador.
Ejemplo:
window.alert(vari)
Esto es lo que usamos en nuestro primer ejemplo, aqui cuando el proceso llega a nivel 4 creamos un alert con los
datos que nos a enviado el procesador.
responseXML:
Con esta propiedad el procesador nos devuelve los datos como XML y debemos recorrerlo mediante las funciones
del DOM (getEementsByTagName, etc).
vari=objetus.responseXML
Guardamos el documento devuelto en la variable vari para luego recorrerla,en el caso para nuestro ejemplo el
documento XML del procesador tendr la siguente estructura:
<serv>
<ip>ip</ip>
<uri>uri </uri>
<date>date</date>
</serv>
window.alert(_ip+"\n"+_uri+"\n"+_date)
PHP [inicio]
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<script language="javascript"
type="text/javascript">
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
} catch (E) {
objetus= false;
}
}
if (!objetus && typeof XMLHttpRequest!='undefined')
{
26.
27.
objetus = new XMLHttpRequest();
28.
29.
}
30.
31.
return objetus
32.
33. }
34.
35. //la funcion que har el trabajo sucio
36.
37. //esta funcion es la que llamamos en el evento ONCLICK de
nuestro boton
38.
39. function primer_tope()
40.
41. {
42.
43.
44.
45.
//creamos el objeto
46.
47.
_objetus=objetus()
48.
49.
//cargamos una varible con las variables que vamos a
enviar
50.
51.
_values_send="funcion=pt"
52.
53.
_URL_="proceso.php?"
54.
55.
_objetus.open("GET",_URL_+"&"+_values_send,true);
56.
57.
//una vez enviado los valores inmediatamente
llamamos a la propiedad
58.
59.
//onreadystatechange
60.
61.
_objetus.onreadystatechange=function() {
62.
63.
//dentro de la funcion comprobamos el
estado del proceso
64.
65.
//si es 4 (terminado) pedimos lo que nos
han mandado
66.
67.
if (_objetus.readyState==4)
68.
69.
{
70.
71.
//si se da un status 200 (TERMINADO CON
EXITO)
72.
73.
if(_objetus.status==200)
74.
75.
{
76.
77.
//usamos la propiedad responseText para
recibir en una cadena
78.
79.
//lo que nos mandaron
80.
81.
window.alert(_objetus.responseText);
82.
83.
}
84.
85.
}
86.
87.
}
88.
89.
//obligatorio .... luego explicar el porque
90.
91.
_objetus.send(null);
92.
93. }
94.
95. function primer_topeXML()
96.
97. {
98.
99.
_objetus=monitor_get_xmlhttp()
100.
101.
_values_send="funcion=ptxml"
102.
103.
_URL_="ajax_tut.php?"
104.
105.
_objetus.open("GET",_URL_+"&"+_values_send,true);
106.
107.
//_objetus.overrideMimeType("text/xml");
108.
109.
_objetus.onreadystatechange=function() {
110.
111.
if (_objetus.readyState==4)
112.
113.
{
114.
115.
if(_objetus.status==200)
116.
117.
{
118.
119.
var vari=_objetus.responseXML;
120.
121.
var _ip =
vari.getElementsByTagName('ip').item(0).firstChild.data;
122.
123.
var _uri =
vari.getElementsByTagName('uri').item(0).firstChild.data;
124.
125.
var _date =
vari.getElementsByTagName('date').item(0).firstChild.data;
126.
127.
window.alert(_ip+"\n"+_uri+"\n"+_date);
128.
129.
}
130.
131.
}
132.
133.
}
134.
135.
_objetus.send(null);
136.
137.
return
138.
139. }
140.
141. </script>
142.
143. <input type="button" name="visual" value="Pedir datos con
rexponseText" class="boton" onclick="primer_tope();">-------144.
145. <input type="button" name="visual" value="Pedir datos con
rexponseXML" class="boton" onclick="primer_topeXML();">
146.
147.
148.
149.
150.
151. <!-- mas documento HTML -->
PHP [fin]
procesador
PHP [inicio]
152. <?php
153.
154. if(isset($_GET['funcion']))
155.
156. {
157.
158.
$_valor=$_GET['funcion'];
159.
160.
if($_valor=="pt")
161.
162.
{
163.
164.
$_pt="Tu ip:
".htmlspecialchars($_SERVER['REMOTE_ADDR'])."\n";
165.
166.
$_pt.="request_uri:
".htmlspecialchars($_SERVER['REQUEST_URI'])."\n";
167.
168.
$_pt.="date(): ".htmlspecialchars(date("d-m-Y
: H-i-s"))."\n";
169.
170.
echo $_pt;
171.
172.
}
173.
174.
elseif ($_valor=="ptxml")
175.
176.
{
177.
178.
$_xml="<?xml version=\"1.0\"
standalone=\"yes\"?>\n";
179.
180.
$_xml.="<serv>\n";
181.
182.
$_xml.="<ip>Tu ip:
".htmlspecialchars($_SERVER['REMOTE_ADDR'])."</ip>\n";
183.
184.
$_xml.="<uri>request_uri:
".htmlspecialchars($_SERVER['REQUEST_URI'])."</uri>\n"
;
185.
186.
$_xml.="<date>date():
".htmlspecialchars(date("d-m-Y : H-i-s"))."</date>\n";
187.
188.
$_xml.="</serv>\n";
189.
190.
//mandamemos cabeceras identificando al
documento
191.
192.
//como un documento XML
193.
194.
header('Content-Type: text/xml');
195.
196.
echo $_xml;
197.
198.
}
199.
200.
else
201.
202.
{
203.
204.
echo "No enviaste ningun valor ACEPTABLE";
205.
206.
}
207.
208. }
209.
210. else
211.
212. {
213.
214.
echo "No se a enviado valor alguno de peticion";
215.
216. }
217.
218. ?>
PHP [fin]
XXI.
Re-renderizando elementos
Hasta ahora hemos manejado los datos que nos llegaban del procesador viendolos con un alert
(window.alert(respuesta)) pues bien ahora vamos a "embeder" los resultados en nuestras pginas, tenemos 2
maneras de llamar al elemento donde se pondr el nuevo contenido:
target="nombreid";
document.getElementById(target).innerHTML = _objetus.responseText;
Ejemplo 2
Solo cambiar nuestro cliente.
PHP [inicio]
<script language="javascript"
type="text/javascript">
PHP [fin]
function primer_tope()
{
_objetus=monitor_get_xmlhttp()
_values_send="funcion=pt"
_URL_="ajax_tut.php?"
_objetus.open("GET",_URL_+"&"+_values_send,true);
_objetus.onreadystatechange=function() {
if (_objetus.readyState==4)
{
if(_objetus.status==200)
{
target="nuestrodiv_id"
document.getElementById(target).innerHTML=_objetus.
responseText;
}
}
}
_objetus.send(null);
return
}
</script>
<input type="button" name="visual" value="Pedir"
onclick="primer_tope();">
<!-- aqui se carga el resultado -->
<div id="nuestrodiv_id"></div>
Ejecutar ejemplo 2: :
XXII.
Ejemplos
Bueno es hora de realizar algunos ejemplos tiles, si quieres algn ejemplo especfico comentalo y tratar de realizarlo.
Verificando la existencia de una URL: Bueno en este ejemplo verificaremos si existe o no una URL.
NOTA
Hice una primera prueba ejemplo 3 Que NO FUNCIONA porque devuelve un error javascript:
Error:
uncaught exception:
Permiso denegado al llamar al mtodo XMLHttpRequest.open
Averiguar sobre el mismo, este ejemplo funciona si las URL`S que vamos a comprobar se encuentran en el
servidor, pero si estan fuera del mismo no funciona...... bueno es de una utilidad NULA el ejemplo 3 pero no usaba
un procesador para verificar la existencia de una URL.
En el ejemplo 4 ya se una usa un cliente y un procesador y funciona en sus totalidad.
Esto es sencillo, al abrir una URL verificaremos el _objetus.status, si el mismo devuelve 200 existe si devuelve
404 no existe.
Ejemplo 3
cliente:
PHP [inicio]
<script language="javascript"
type="text/javascript">
xmlhttp = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp
}
function TA_comp_url()
{
try {
_objetus=objetus()
_URL_=document.getElementById('TA_comp_url').value
//id URL
_target=document.getElementById('TA_comp_url_result
ado') //id resultado
_objetus.open("GET",_URL_,true);
_objetus.onreadystatechange=function() {
if (_objetus.readyState==1)
{
_target.innerHTML="Comprobando.......";
}
else if(_objetus.readyState==4)
{
if(_objetus.status==200)
{
_target.innerHTML = "La URL <b>SI</b>
existe";
PHP [fin]
URL:
}
else if(_objetus.status==404)
{
_target.innerHTML = "La URL <b>NO</b>
existe";
}
else
{
_target.innerHTML = "Error:
"._objetus.status;
}
}
}
_objetus.send(null);
}
catch (e) {
_target.innerHTML =
(e.message)?e.message:e.description;
}
return
}
</script>
URL:
<input id="TA_comp_url" type="text" class="text" size="50">
<input class=boton type="button" value="Verificar URL"
onclick="TA_comp_url();">
<!-- aqui se carga el resultado -->
<div id="TA_comp_url_resultado"></div>
Ejemplo 4
cliente
PHP [inicio]
<script language="javascript"
type="text/javascript">
function TA_comp_url2()
{
_objetus=objetus()
_uri=document.getElementById('TA_comp_url2').value //id
URL
_target=document.getElementById('TA_comp_url_resultado2
') //id resultado
_values_send="funcion=TA_comp_url2&uri="+_uri
_URL_="procesador.php?"
_objetus.open("GET",_URL_+"&"+_values_send,true);
_objetus.onreadystatechange=function() {
PHP [fin]
procesador
PHP [inicio]
if (_objetus.readyState==1)
{
_target.innerHTML="Comprobando.......";
}
else if(_objetus.readyState==4)
{
if(_objetus.status==200)
{
_target.innerHTML = _objetus.responseText;
}
else
{
_target.innerHTML = "Error:
"._objetus.status;
}
}
}
_objetus.send(null);
return
}
</script>
URL:<input id="TA_comp_url2" type="text" size="50">
<input type="button" value="Verificar URL"
onclick="TA_comp_url2();">
<!-- aqui se carga el resultado -->
<div id="TA_comp_url_resultado2"></div>
if(isset($_GET['funcion']))
{
$_valor=$_GET['funcion'];
if ($_valor=="TA_comp_url2")
{
$_r=(!isset($_GET['uri']))?false:(!@fopen($_GET['ur
i'],"r"))?false:true;
$_res=($_r==true)?"La URL existe":"La URL no
existe";
echo $_res;
}
else
{
echo "No enviaste ningun valor ACEPTABLE";
}
}
else
{
echo "No se a enviado valor alguno de peticion";
}
PHP [fin]
URL:
Ejemplo 5
cliente
PHP [inicio]
<script language="javascript"
type="text/javascript">
/**********************************************************
*********
* Funciones ejemplo-5 AJAX - BEGIN
***********************************************************
********/
function objetus() {
try {
xmlhttp = new
ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined')
{
_target.style.display=''
_values_send="funcion=ejemplo5&opcion=padre"
_URL_="procesador.php?"
_objetus.open("GET",_URL_+"&"+_values_send,true);
_objetus.onreadystatechange=function() {
if (_objetus.readyState==1)
{
(_target.innerHTML=='')?(_target.in
nerHTML="Cargando Ciudades"):null;
}
else if(_objetus.readyState==4)
{
if(_objetus.status==200)
{
_target.innerHTML =
_objetus.responseText;
document.getElementById('ej
5_td_H').style.display=''
ej5_H(document.getElementBy
Id('ej5_P').value);
document.getElementById('ej
5_td_submit').style.display=''
document.getElementById('ej
5_add_P').style.display=''
document.getElementById('ej
5_add_H').style.display=''
}
}
}
_objetus.send(null);
}
function ej5_H(idena)
{
_objetus=objetus()
_target=document.getElementById('ej5_td_H')
_loader=document.getElementById('ej5_loader')
_values_send="funcion=ejemplo5&opcion=hijo&id="+ide
na
_URL_="procesador.php?"
_loader.style.display=''
_objetus.open("GET",_URL_+"&"+_values_send,true);
_objetus.onreadystatechange=function() {
if(_objetus.readyState==4)
{
if(_objetus.status==200)
{
_target.innerHTML =
_objetus.responseText;
_loader.style.display='none
'
}
}
}
_objetus.send(null);
}
function ej5_procesar()
{
if(document.getElementById('ej5_P').value==0)
{
_values_send="funcion=ejemplo5&opcion=procesar&id="
+_padre+","+_hijo
_URL_="procesador.php?"
_loader.style.display=''
_objetus.open("GET",_URL_+"&"+_values_send,true);
_objetus.onreadystatechange=function() {
if(_objetus.readyState==4)
{
if(_objetus.status==200)
{
document.getElementById('ej
5_mensajes').innerHTML = _objetus.responseText;
_loader.style.display='none
'
}
}
}
_objetus.send(null);
}
function ej5_add_P()
{
_objetus=objetus()
_loader=document.getElementById('ej5_loader')
_name_P=document.getElementById('ej5_add_P_nombre')
_add_P_submit=document.getElementById('ej5_add_P_su
bmit')
_add_P_submit.disabled=true
_values_send="funcion=ejemplo5&opcion=add_P&nombre=
"+encodeURIComponent(_name_P.value)
_URL_="procesador.php?"
_loader.style.display=''
_objetus.open("GET",_URL_+"&"+_values_send,true);
_objetus.onreadystatechange=function() {
if(_objetus.readyState==4)
{
if(_objetus.status==200)
{
resp_mensaje=_objetus.respo
nseText;
ej5_P();
document.getElementById('ej
5_mensajes').innerHTML = resp_mensaje
_loader.style.display='none
'
_name_P.value=''
_add_P_submit.disabled=fals
e
}
}
}
_objetus.send(null);
}
function ej5_del_P()
{
if(document.getElementById('ej5_P').value==0)
{
_URL_="procesador.php?"
_loader.style.display=''
_objetus.open("GET",_URL_+"&"+_values_send,true);
_objetus.onreadystatechange=function() {
if(_objetus.readyState==4)
{
if(_objetus.status==200)
{
resp_mensaje=_objetus.respo
nseText;
ej5_P();
document.getElementById('ej
5_mensajes').innerHTML = resp_mensaje
_loader.style.display='none
'
_del_P_submit.disabled=fals
e
}
}
}
_objetus.send(null);
}
function ej5_add_H()
{
if(document.getElementById('ej5_P').value==0)
{
_add_H_submit=document.getElementById('ej5_add_H_su
bmit')
_add_H_submit.disabled=true
_values_send="funcion=ejemplo5&opcion=add_H&id="+do
cument.getElementById('ej5_P').value+"&nombre="+encodeURICom
ponent(_name_H.value)
_URL_="procesador.php?"
_loader.style.display=''
_objetus.open("GET",_URL_+"&"+_values_send,true);
_objetus.onreadystatechange=function() {
if(_objetus.readyState==4)
{
if(_objetus.status==200)
{
resp_mensaje=_objetus.respo
nseText;
ej5_H(document.getElementBy
Id('ej5_P').value);
document.getElementById('ej
5_mensajes').innerHTML = resp_mensaje
_loader.style.display='none
'
_name_H.value=''
_add_H_submit.disabled=fals
e
}
}
}
_objetus.send(null);
}
function ej5_del_H()
{
if(document.getElementById('ej5_H').value==0)
{
return
}
_objetus=objetus()
_loader=document.getElementById('ej5_loader')
_del_H_submit=document.getElementById('ej5_del_H_su
bmit')
_del_H_submit.disabled=true
_values_send="funcion=ejemplo5&opcion=del_H&id="+do
cument.getElementById('ej5_P').value+","+document.getElement
ById('ej5_H').value
_URL_="procesador.php?"
_loader.style.display=''
_objetus.open("GET",_URL_+"&"+_values_send,true);
_objetus.onreadystatechange=function() {
if(_objetus.readyState==4)
{
if(_objetus.status==200)
{
resp_mensaje=_objetus.respo
nseText;
ej5_H(document.getElementBy
Id('ej5_P').value);
document.getElementById('ej
5_mensajes').innerHTML = resp_mensaje
_loader.style.display='none
'
_del_H_submit.disabled=fals
e
}
}
}
_objetus.send(null);
}
/**********************************************************
*********************
* ejemplo 5 END
***********************************************************
********************/
/**********************************************************
*********
* Funciones ejemplo1 AJAX - END
***********************************************************
********/
</script>
<input type="button" value="Ejecutar ejemplo-5"
class="boton" onclick="ej5_P();">
<br>
<br>
<div id='ej5_mensajes'></div>
<br>
<table id=tabla-clase-A cellpadding="5">
<tr>
<td class="articulo_body" id="ej5_td_P"
style='display:none;'></td>
<td class="articulo_body" id="ej5_td_H"
style='display:none;'></td>
<td class="articulo_body" id="ej5_td_submit"
style='display:none;'>
<input type="button" class="boton" value="Procesar"
onclick='ej5_procesar();'>
</td>
</tr>
<tr><td id='ej5_loader' class='articulo' colspan=3
style='display:none;text-align:center;'>
Procesando.........
</td></tr>
<tr><td id='ej5_add_P' class='articulo'
style='display:none;text-align:center;'>
<input type="text" class="text" id="ej5_add_P_nombre">
<br><br>
<input type="button" class="boton" id="ej5_add_P_submit"
value="add" onclick="ej5_add_P();">
PHP [fin]
procesador
PHP [inicio]
<?php
if(isset($_GET['funcion']))
{
$_valor=$_GET['funcion'];
if ($_valor=="ejemplo5")
{
$_opt=(isset($_GET['opcion']) and
!empty($_GET['opcion']))?$_GET['opcion']:"none";
if($_opt=='none')
{
$_body="none";
}
else
{
$bdconex =
mysql_connect("166.144.10.50", "free", "");
mysql_select_db("leimnud2",
$bdconex);
function ej5_padre($x=0)
{
$_body="<select
id='ej5_P' onchange='ej5_H(this.value);'>";
$a=mysql_query("SELEC
T * FROM leimnud_tut1_ciudad");
if
(mysql_num_rows($a)==0) {
$_body.="<opt
ion value=0>No hay Ciudades</option>";
}
else
{
$_body.="<opt
ion value=0>Seleccione una ciudad</option>";
while
($b=mysql_fetch_array($a)) {
$_bod
y.="<option value=".$b['id']."
".(($b['id']==$x)?"selected":"").">".htmlspecialchars(
$b['nombre'])."</option>";
}
$_body.="</se
lect>";
}
return $_body;
}
if($_opt=='padre')
{
if
(isset($_SESSION['ej5_last_P'])) {
$sel=$_SESSIO
N['ej5_last_P'];
unset($_SESSI
ON['ej5_last_P']);
}
else
{
$sel=0;
}
$_body=ej5_padre($sel
);
}
elseif($_opt=='hijo')
{
if
(isset($_GET['id']) and is_numeric($_GET['id']))
{
function
ej5_hijo($_xxx)
{
$_bod
y="<select id='ej5_H'>";
$a=my
sql_query("SELECT * FROM leimnud_tut1_zona WHERE
id_ciudad=".$_GET['id']);
if
(mysql_num_rows($a)==0) {
$_body.=($_GET['id']==0)?
"<option value=0>Esta ciudad no tiene
zonas</option>";
$_body.="</select>";
}
else
{
$_body.="</select>";
}
retur
n $_body;
}
if
(isset($_SESSION['ej5_last_H'])) {
$sel=
$_SESSION['ej5_last_H'];
unset
($_SESSION['ej5_last_H']);
}
else
{
$sel=
0;
}
$_body=ej5_hi
jo($sel);
}
else
{
$_body="none"
;
}
}
elseif($_opt=='procesar')
{
if
(isset($_GET['id']))
{
if
(strstr($_GET['id'],",") and
count(explode(",",$_GET['id']))==2)
{
$_a=e
xplode(",",$_GET['id']);
if
(is_numeric($_a[0]) and is_numeric($_a[1])) {
$x=mysql_query("SELECT * FROM leimnud_tut1_ciudad
where id=".$_a[0]);
$_x=mysql_fetch_object($x);
$ciudad=$_x->nombre;
$x=mysql_query("SELECT * FROM leimnud_tut1_zona
where id=".$_a[1]);
if (mysql_num_rows($x)==0) {
$zona="ninguna"
}
else
{
$_x=mysql_fetch_object($x);
$zona=$_x->nombre;
}
$_body="Procesado, <b>Ciudad:</b>
".htmlspecialchars(stripslashes($ciudad))."
<b>Zona:</b> ".htmlspecialchars(stripslashes($zona));
}
}
}
else
{
$_body="none"
;
}
}
elseif($_opt=='add_P')
{
if
(isset($_GET['nombre'])) {
$name=trim($_
GET['nombre']);
if
(empty($name)) {
$_bod
y="Y el nombre?.....";
}
else
{
$ad=m
ysql_query("INSERT INTO leimnud_tut1_ciudad (nombre)
VALUES ('".$name."')");
$_bod
y="Se a creado la ciudad:
<b>".htmlspecialchars(stripslashes($name))."</b>";
$_SES
SION['ej5_last_P']=mysql_insert_id();
}
}
}
elseif($_opt=='del_P')
{
if
(isset($_GET['id']))
{
$_id=$_GET['i
d'];
if
(is_numeric($_id)) {
$x=my
sql_query("SELECT * FROM leimnud_tut1_ciudad where
id=".$_id);
$_x=m
ysql_fetch_object($x);
$ciud
ad=$_x->nombre;
mysql
_query("DELETE FROM leimnud_tut1_ciudad where
id=".$_id);
mysql
_query("DELETE FROM leimnud_tut1_zona where
id_ciudad=".$_id);
$_bod
y="Se a borrado la ciudad:
<b>".htmlspecialchars($ciudad)."</b>";
}
}
else
{
$_body="none"
;
}
}
elseif($_opt=='add_H')
{
if
(isset($_GET['id']) and isset($_GET['nombre']))
{
$_id=$_GET['i
d'];
$name=trim($_
GET['nombre']);
if
(is_numeric($_id) and !empty($name))
{
$x=my
sql_query("SELECT * FROM leimnud_tut1_ciudad where
id=".$_id);
$_x=m
ysql_fetch_object($x);
$ciud
ad=$_x->nombre;
$ad=m
ysql_query("INSERT INTO leimnud_tut1_zona
(nombre,id_ciudad) VALUES ('".$name."',".$_id.")");
$_bod
y="Se a creado la zona:
<b>".stripslashes(htmlspecialchars($name))."</b> en la
ciudad: <b>".htmlspecialchars($ciudad)."</b>";
$_SES
SION['ej5_last_H']=mysql_insert_id();
}
else
{
$_bod
y="Y el nombre de la zona?......";
}
}
else
{
$_body="none"
;
}
}
elseif($_opt=='del_H')
{
if
(isset($_GET['id']))
{
if
(strstr($_GET['id'],",") and
count(explode(",",$_GET['id']))==2)
{
$_a=e
xplode(",",$_GET['id']);
if
(is_numeric($_a[0]) and is_numeric($_a[1])) {
$x=mysql_query("SELECT * FROM leimnud_tut1_ciudad
where id=".$_a[0]);
$_x=mysql_fetch_object($x);
$ciudad=$_x->nombre;
$x=mysql_query("SELECT * FROM leimnud_tut1_zona
where id=".$_a[1]);
$_x=mysql_fetch_object($x);
$zona=$_x->nombre;
mysql_query("DELETE FROM leimnud_tut1_zona where
id=".$_a[1]);
$_body="Se a eliminado la zona
<b>".htmlspecialchars($zona)."</b> de la ciudad
<b>".htmlspecialchars(stripslashes($ciudad));
}
}
else
{
$_body="none"
;
}
}
else
{
$_body="none";
}
}
echo isset($_body)?$_body:"none";
}
else
{
echo "No enviaste ningun valor
ACEPTABLE";
PHP [fin]
}
}
else
{
echo "No se a enviado valor alguno de
peticion";
}
?>
XXIII.
Despedida
Eso fu una parte de AJAX gracias por leer este artculo y disculpen los errores que sin darme cuenta comet, espero sus
sugerencias para este artculo y me ayuden a desarrollarlo de forma extensa. Sus sugerencias o cualquier cosa a
davidordinola@yahoo.es
Articulos similares:
Remote Scripting
RPC va HTTP o Como recoger informacin desde el servidor sin recargar la pgina.
El objeto XMLHttpRequest
Tutorial bsico del mtodo AJAX con PHP y MySQL
AJAX un nuevo acercamiento a Aplicaciones Web
Using the XML HTTP Request object
Recarga de pgina controlada