Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

Tutorial de AJAX (Asynchronous JavaScript + XML)

I. Concepto de AJAX
AJAX, es el acrónimo para Asynchronous JavaScript+CSS+DOM+XMLHttpRequest.Esta metodologÃ-a para generar contenido, una vez cargada y procesada una página, envÃ-a mediante eventos scripts y rutinas
que van al servidor buscando en background los datos en porciones especÃ-ficas, donde estos datos son usados para actualizar la página 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 módulo de apache, no es una extensión de PHP, NO ES UNA TECNOLOGIA.

Por ejemplo en un proceso normal una aplicacion web recarga o va de una página a otra porque debe enviar una petición a algun servidor web esta debe procesarla y mandar el resultado final y el resultado final es la
página a la cual nos dirige la aplicacion o la recarga de la página 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 añadir el resultado del proceso a la página en curso de esta manera evitar la recarga o una página 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 tecnologÃ-a, sino la unión de varias tecnologÃ-as que juntas pueden lograr cosas
realmente impresionantes como GoogleMaps, Gmail,etc.

A continuación 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 implementación 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 más la vida, si les piden que se contacten con un servicio web en SOAP desde IE, pueden usar el comportamiento Webservice.
❍ XML-RPC: Una especificación 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 más 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
recomendarÃ-a si del lado del cliente utilizan sólo 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.

III. Nuestro material para este tutorial

Para este tutorial usaré el objeto XMLHttpRequest() porque..... es la única manera que sé de hacer AJAX ... lo siento.

Este objeto fué testeado en Internet Explorer >=6.0 Mozilla, Mozilla Firefox, Opera >=8 en opera anteriores a 8 no existe el objeto XMLHTtpRequest asi que sugiero bajarse alguna version ultima de este navegador.

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 creación, Métodos y propiedades.

■ Creando el objeto XMLHttpRequest

Muchos navegadores requieren una forma diferente de invocar al objeto XMLHttpRequest pero no nos vamos a hacer lios y usaremos uno estándar y que nunca me a fallado.

function objetus() {
try {
objetus = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
objetus= new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
objetus= false;
}
}
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (1 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

if (!objetus && typeof XMLHttpRequest!='undefined') {

objetus = new XMLHttpRequest();
}
return objetus
}

solo llamamos a ajax=objetus() y ya tenemos el objeto en la variable ajax.

Otra manera de invocar al objeto es esta.

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.

■ Métodos
A continuación los métodos del objeto.

■ abort(): Detiene la petición en curso.

■ getAllResponseHeaders() : Devuelve todas las cabeceras de la respuesta (etiquetas y valores) como una cadena.
■ getResponseHeader(etiqueta) : Devuelve el valor de la etiqueta en las cabeceras de la respuesta.
■ open(método, URL, asÃ-ncrona, usuario, password) : Abre una conexión con esa URL mediante el método (GET,POST,HEAD,POST o DELETE), tiene 5 parámetros de entrada,
las 2 primeras (método, URL) son obligatorios:
método - El método que se usará para la conexión (GET,POST,HEAD,POST o DELETE).
URL - La URL que se llamará para el proceso.
Las 3 restantes (asÃ-ncrona, usuario, password) son opcionales:
asÃ-ncrona - 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) : EnvÃ-a el contenido al servidor.
■ setRequestHeader(etiqueta,valor) : Establece el valor de una etiqueta de las cabeceras de petición.

■ Propiedades
A continuación las propiedades del objeto.

■ onreadystatechange : Contiene el nombre de la función que se ejecuta cada vez que el estado de la conexión cambie.
■ readyState : Estado de la conexión.

Código Estado
1 Cargando

file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (2 de 25)10/11/2006 15:08:07

Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

2 Cargado, pero sin su contenido incorporado a los objetos correspondientes

3 Incorporando a los objetos correspondientes
4 Carga completada
■ responseText : Datos devueltos por el servidor en formato cadena.
■ responseXML : Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc).
■ status : Código enviado por el servidor.

Código valor
200 Completado con éxito
404 No se encontró URL
414 Los valores pasados por GET superan los 512 bytes
■ statusText ; Mensaje de texto enviado por el servidor junto al código (status), para el caso de código 200 contendrá "OK".

V. Como funciona el proceso Cliente-Servidor

Cuando nuestro cliente se comunica con el servidor este no recibirá variables para su uso, modificación.
Nuestro objeto XMLHttpRequest al invocarlo y pedir datos a un servidor lo que recibe es LO QUE EL SERVIDOR SUELTA, me explico:

Tenemos un proc.php que recibirá variables por el método GET.

PHP [inicio]

1. <?php
2. if(isset($_GET['valor']))
3. {
4. $_valor=$_GET['valor'];
5. if($_valor==1)
6. {
7. echo "Enviaste el valor 1";
8. }
9. elseif ($_valor==2)
10. {
11. echo "Enviaste el valor 2";
12. }
13. else
14. {
15. echo "No enviaste ningun valor ACEPTABLE";
16. }
17. }
18. else
19. {
20. echo "No se a enviado valor alguno de peticion";
21. }
22. ?>

PHP [fin]

Si ponemos http://algo.com/proc.php?valor=1el archivo soltará

Enviaste el valor 1

file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (3 de 25)10/11/2006 15:08:07

Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

Si ponemos http://algo.com/proc.php?valor=2el archivo soltará

Enviaste el valor 2

Si ponemos http://algo.com/proc.php?valor=5345el archivo soltará

No enviaste ningun valor ACEPTABLE

Si no le damos variables http://algo.com/proc.phpel archivo soltará

No se a enviado valor alguno de peticion

Entonces lo que debemos hacer es que nuestros archivos Cliente entiendan la lÃ-nea y la manera de procesas las peticiones que tendrá nuestro servidor.

Eso sÃ-, al realizar la petición al servidor se pueden crear variables de sesion, cookies, consultas SQL, etc etc.

VI. Reglas del juego para los ejemplos

Nuestro cliente se llamará cliente.php
Nuestro procesador, que se ocupe de enviarnos lo que pedimos se llamará procesador.php

Osea..... si me refiero a cliente me refiero al archivo cliente.php y si digo "... entonces nuestro procesador nos mandará...." me refiero al archivo procesador.php.

VII. Nuestro primer tope con AJAX

Como primer ejemplo no haremos el tÃ-pico HOLA MUNDO enviaremos una petición a nuestro procesador que nos arrojará nuestro IP,REQUEST_URI,date() usando el método GET.

Ejemplo 1
cliente

PHP [inicio]

1. <script language="javascript" type="text/javascript">

2. //funcion encargada de crear el objeto
3. function objetus() {
4. try {
5. objetus = new ActiveXObject("Msxml2.XMLHTTP");
6. } catch (e) {
7. try {
8. objetus= new ActiveXObject("Microsoft.XMLHTTP");
9. } catch (E) {
10. objetus= false;
11. }
12. }
13. if (!objetus && typeof XMLHttpRequest!='undefined') {
14. objetus = new XMLHttpRequest();
15. }
16. return objetus
17. }
18. //la funcion que hará el trabajo sucio
19. //esta funcion es la que llamamos en el evento ONCLICK de nuestro boton
20. function primer_tope()
21. {
22.
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (4 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

23. //creamos el objeto

24. _objetus=objetus()
25. //cargamos una varible con las variables que vamos a enviar
26. _values_send="funcion=pt"
27. _URL_="proceso.php?"
28. _objetus.open("GET",_URL_+"&"+_values_send,true);
29. //una vez enviado los valores inmediatamente llamamos a la propiedad
30. //onreadystatechange
31. _objetus.onreadystatechange=function() {
32. //dentro de la funcion comprobamos el estado del proceso
33. //si es 4 (terminado) pedimos lo que nos han mandado
34. if (_objetus.readyState==4)
35. {
36. //usamos la propiedad responseText para recibir en una cadena
37. //lo que nos mandaron
38. window.alert(_objetus.responseText);
39. }
40. }
41. //obligatorio .... luego explicarè el porque
42. _objetus.send(null);
43. }
44. </script>
45. <input type="button" name="visual" value="Pedir datos" class="boton" onclick="primer_tope();">
46.
47.
48. <!-- mas documento HTML -->

PHP [fin]

Nuestro procesador trabajará segun la variable funcionque reciba por el método GET

PHP [inicio]

1. <?php
2. if(isset($_GET['funcion']))
3. {
4. $_valor=$_GET['funcion'];
5. if($_valor=="pt")
6. {
7. $_pt="Tu ip: ".htmlspecialchars($_SERVER['REMOTE_ADDR'])."\n";
8. $_pt.="request_uri: ".htmlspecialchars($_SERVER['REQUEST_URI'])."\n";
9. $_pt.="date(): ".htmlspecialchars(date("d-m-Y : H-i-s"))."\n";
10. echo $_pt;
11. }
12.
13. else
14. {
15. echo "No enviaste ningun valor ACEPTABLE";
16. }
17. }
18. else
19. {
20. echo "No se a enviado valor alguno de peticion";
21. }
22. ?>
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (5 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

PHP [fin]

Ejecutar ejemplo1: Pedir datos

■ Analizando la funcion primer_tope()

Fuera de lo que es la funcion objetus() analizaremos nuestra funcion que se encargo del envÃ-o y recepcion de datos.

_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 (Nótese el ? al final del archivo)

_objetus.open("GET",_URL_+"&"+_values_send,true);
La parte más 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 automáticamente al abrir

proceso.php?funcion=pt

_objetus.send(null) : Es obligatorio, si no se envia algo el proceso no funciona.

VIII. Lineas sagradas de una función cliente para el método GET

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)

file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (6 de 25)10/11/2006 15:08:07

Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

{
//procesos que se realizaran con los datos obtenidos
}
}
}
_objetus.send(null); //envÃ-o nulo de variables
}

IX. Lineas sagradas de una función cliente para el método POST

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-form-urlencoded'); //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
}
}
}
}
Nótense las diferencias con el método GET

X. Recibiendo los resultados del procesador

Hay dos maneras en las que se puede recibir la informacion devuelta por el procesador, las propiedades: responseText y responseXML

■ 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>

var _ip = vari.getElementsByTagName('ip').item(0).firstChild.data;

file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (7 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

var _uri = vari.getElementsByTagName('uri').item(0).firstChild.data;

var _date = vari.getElementsByTagName('date').item(0).firstChild.data;

Entonces mostraremos: window.alert(_ip+"\n"+_uri+"\n"+_date)

Hagamos el ejemplo1 con responseXML

Ejemplo 1-b
cliente

PHP [inicio]

1. <script language="javascript" type="text/javascript">

2. //funcion encargada de crear el objeto
3. function objetus() {
4. try {
5. objetus = new ActiveXObject("Msxml2.XMLHTTP");
6. } catch (e) {
7. try {
8. objetus= new ActiveXObject("Microsoft.XMLHTTP");
9. } catch (E) {
10. objetus= false;
11. }
12. }
13. if (!objetus && typeof XMLHttpRequest!='undefined') {
14. objetus = new XMLHttpRequest();
15. }
16. return objetus
17. }
18. //la funcion que hará el trabajo sucio
19. //esta funcion es la que llamamos en el evento ONCLICK de nuestro boton
20. function primer_tope()
21. {
22.
23. //creamos el objeto
24. _objetus=objetus()
25. //cargamos una varible con las variables que vamos a enviar
26. _values_send="funcion=pt"
27. _URL_="proceso.php?"
28. _objetus.open("GET",_URL_+"&"+_values_send,true);
29. //una vez enviado los valores inmediatamente llamamos a la propiedad
30. //onreadystatechange
31. _objetus.onreadystatechange=function() {
32. //dentro de la funcion comprobamos el estado del proceso
33. //si es 4 (terminado) pedimos lo que nos han mandado
34. if (_objetus.readyState==4)
35. {
36. //si se da un status 200 (TERMINADO CON EXITO)
37. if(_objetus.status==200)
38. {
39. //usamos la propiedad responseText para recibir en una cadena
40. //lo que nos mandaron
41. window.alert(_objetus.responseText);
42. }
43. }
44. }
45. //obligatorio .... luego explicarè el porque
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (8 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

46. _objetus.send(null);
47. }
48. function primer_topeXML()
49. {
50. _objetus=monitor_get_xmlhttp()
51. _values_send="funcion=ptxml"
52. _URL_="ajax_tut.php?"
53. _objetus.open("GET",_URL_+"&"+_values_send,true);
54. //_objetus.overrideMimeType("text/xml");
55. _objetus.onreadystatechange=function() {
56. if (_objetus.readyState==4)
57. {
58. if(_objetus.status==200)
59. {
60. var vari=_objetus.responseXML;
61. var _ip = vari.getElementsByTagName('ip').item(0).firstChild.data;
62. var _uri = vari.getElementsByTagName('uri').item(0).firstChild.data;
63. var _date = vari.getElementsByTagName('date').item(0).firstChild.data;
64. window.alert(_ip+"\n"+_uri+"\n"+_date);
65. }
66. }
67. }
68. _objetus.send(null);
69. return
70. }
71. </script>
72. <input type="button" name="visual" value="Pedir datos con rexponseText" class="boton" onclick="primer_tope
();">---------
73. <input type="button" name="visual" value="Pedir datos con rexponseXML" class="boton" onclick="primer_topeXML();">
74.
75.
76. <!-- mas documento HTML -->

PHP [fin]

procesador

PHP [inicio]

1. <?php
2. if(isset($_GET['funcion']))
3. {
4. $_valor=$_GET['funcion'];
5. if($_valor=="pt")
6. {
7. $_pt="Tu ip: ".htmlspecialchars($_SERVER['REMOTE_ADDR'])."\n";
8. $_pt.="request_uri: ".htmlspecialchars($_SERVER['REQUEST_URI'])."\n";
9. $_pt.="date(): ".htmlspecialchars(date("d-m-Y : H-i-s"))."\n";
10. echo $_pt;
11. }
12. elseif ($_valor=="ptxml")
13. {
14. $_xml="<?xml version=\"1.0\" standalone=\"yes\"?>\n";
15. $_xml.="<serv>\n";
16. $_xml.="<ip>Tu ip: ".htmlspecialchars($_SERVER['REMOTE_ADDR'])."</ip>\n";
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (9 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

17. $_xml.="<uri>request_uri: ".htmlspecialchars($_SERVER['REQUEST_URI'])."</uri>\n";

18. $_xml.="<date>date(): ".htmlspecialchars(date("d-m-Y : H-i-s"))."</date>\n";
19. $_xml.="</serv>\n";
20. //mandamemos cabeceras identificando al documento
21. //como un documento XML
22. header('Content-Type: text/xml');
23. echo $_xml;
24. }
25. else
26. {
27. echo "No enviaste ningun valor ACEPTABLE";
28. }
29. }
30. else
31. {
32. echo "No se a enviado valor alguno de peticion";
33. }
34. ?>

PHP [fin]

Ejecutar ejemplo1-b: con rexponseText ---- responseXML sin parsearlo ---- responseXML parseado

XI. 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 páginas, tenemos 2
maneras de llamar al elemento donde se pondrá el nuevo contenido:

■ document.getElementById("elementID") : Llamaremos al elemento por el ID

<div id="nombreid" ></div>

Entonces vamos a cambiar nuestro window.alert(respuesta) por document.getElementById(target) aplicandole la propiedad innerHTML, quedandonos:

target="nombreid";
document.getElementById(target).innerHTML = _objetus.responseText;

■ document.getElementsByTagName("tagName") : Llamaremos al elemento por su tag name

<div name="nombreelem" ></div>

No tengo una idea clara a como llamar por su tag name, porfavor pido la ayuda de alguien que sepa esto

Ejemplo 2
Solo cambiará nuestro cliente.

PHP [inicio]

1. <script language="javascript" type="text/javascript">

2. //funcion encarga de crear el objeto
3. function objetus() {
4. try {
5. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
6. } catch (e) {
7. try {
8. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
9. } catch (E) {
10. xmlhttp = false;
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (10 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

11. }
12. }
13. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
14. xmlhttp = new XMLHttpRequest();
15. }
16. return xmlhttp
17. }
18.
19. function primer_tope()
20. {
21. _objetus=monitor_get_xmlhttp()
22. _values_send="funcion=pt"
23. _URL_="ajax_tut.php?"
24. _objetus.open("GET",_URL_+"&"+_values_send,true);
25. _objetus.onreadystatechange=function() {
26. if (_objetus.readyState==4)
27. {
28. if(_objetus.status==200)
29. {
30. target="nuestrodiv_id"
31. document.getElementById(target).innerHTML=_objetus.responseText;
32. }
33. }
34. }
35. _objetus.send(null);
36. return
37. }
38. </script>
39. <input type="button" name="visual" value="Pedir" onclick="primer_tope();">
40. <!-- aqui se carga el resultado -->
41. <div id="nuestrodiv_id"></div>

PHP [fin]

Ejecutar ejemplo 2: Pedir datos : Limpiar datos

Bueno eso fué nuestro tope básico con AJAX.

XII. Ejemplos
Bueno es hora de realizar algunos ejemplos útiles, si quieres algún ejemplo especÃ-fico 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 método 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.
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (11 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

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 200existe si devuelve 404no existe.

Ejemplo 3
cliente:

PHP [inicio]

1. <script language="javascript" type="text/javascript">

2. //funcion encarga de crear el objeto
3. function objetus() {
4. try {
5. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
6. } catch (e) {
7. try {
8. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
9. } catch (E) {
10. xmlhttp = false;
11. }
12. }
13. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
14. xmlhttp = new XMLHttpRequest();
15. }
16. return xmlhttp
17. }
18.
19. function TA_comp_url()
20. {
21. try {
22.
23. _objetus=objetus()
24. _URL_=document.getElementById('TA_comp_url').value //id URL
25. _target=document.getElementById('TA_comp_url_resultado') //id resultado
26. _objetus.open("GET",_URL_,true);
27. _objetus.onreadystatechange=function() {
28. if (_objetus.readyState==1)
29. {
30. _target.innerHTML="Comprobando.......";
31. }
32. else if(_objetus.readyState==4)
33. {
34. if(_objetus.status==200)
35. {
36. _target.innerHTML = "La URL <b>SI</b> existe";
37. }
38. else if(_objetus.status==404)
39. {
40. _target.innerHTML = "La URL <b>NO</b> existe";
41. }
42. else
43. {
44. _target.innerHTML = "Error: "._objetus.status;
45. }
46. }
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (12 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

47.
48. }
49. _objetus.send(null);
50. }
51. catch (e) {
52. _target.innerHTML = (e.message)?e.message:e.description;
53. }
54. return
55. }
56. </script>
57. URL:
58. <input id="TA_comp_url" type="text" class="text" size="50">
59. <input class=boton type="button" value="Verificar URL" onclick="TA_comp_url();">
60. <!-- aqui se carga el resultado -->
61. <div id="TA_comp_url_resultado"></div>

PHP [fin]

URL: Verificar URL

Ejemplo 4
cliente

PHP [inicio]

1. <script language="javascript" type="text/javascript">

2. //funcion encarga de crear el objeto
3. function objetus() {
4. try {
5. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
6. } catch (e) {
7. try {
8. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
9. } catch (E) {
10. xmlhttp = false;
11. }
12. }
13. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
14. xmlhttp = new XMLHttpRequest();
15. }
16. return xmlhttp
17. }
18.
19. function TA_comp_url2()
20. {
21. _objetus=objetus()
22. _uri=document.getElementById('TA_comp_url2').value //id URL
23. _target=document.getElementById('TA_comp_url_resultado2') //id resultado
24. _values_send="funcion=TA_comp_url2&uri="+_uri
25. _URL_="procesador.php?"
26. _objetus.open("GET",_URL_+"&"+_values_send,true);
27. _objetus.onreadystatechange=function() {
28. if (_objetus.readyState==1)

file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (13 de 25)10/11/2006 15:08:07

Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

29. {
30. _target.innerHTML="Comprobando.......";
31. }
32. else if(_objetus.readyState==4)
33. {
34. if(_objetus.status==200)
35. {
36. _target.innerHTML = _objetus.responseText;
37. }
38. else
39. {
40. _target.innerHTML = "Error: "._objetus.status;
41. }
42. }
43.
44. }
45. _objetus.send(null);
46. return
47.
48. }
49. </script>
50. URL:<input id="TA_comp_url2" type="text" size="50">
51. <input type="button" value="Verificar URL" onclick="TA_comp_url2();">
52. <!-- aqui se carga el resultado -->
53. <div id="TA_comp_url_resultado2"></div>

PHP [fin]

procesador

PHP [inicio]

1. if(isset($_GET['funcion']))
2. {
3. $_valor=$_GET['funcion'];
4. if ($_valor=="TA_comp_url2")
5. {
6. $_r=(!isset($_GET['uri']))?false:(!@fopen($_GET['uri'],"r"))?false:true;
7. $_res=($_r==true)?"La URL existe":"La URL no existe";
8. echo $_res;
9. }
10. else
11. {
12. echo "No enviaste ningun valor ACEPTABLE";
13. }
14. }
15. else
16. {
17. echo "No se a enviado valor alguno de peticion";
18. }

PHP [fin]

file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (14 de 25)10/11/2006 15:08:07

Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

URL: Verificar URL

■ Manejando listas dependientes en una base de datos:

Primero creamos las tablas.

-- MySQL Administrator dump 1.4

--
-- ------------------------------------------------------
-- Server version 4.1.5-gamma-nt

CREATE DATABASE leimnud2;

USE leimnud2;

CREATE TABLE `leimnud_tut1_ciudad` (

`id` int(10) unsigned NOT NULL auto_increment,
`nombre` varchar(45) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM;

INSERT INTO `leimnud_tut1_ciudad` (`id`,`nombre`) VALUES

(1,'lapaz'),
(3,'potosi'),
(6,'sucre'),
(28,'santa cruz'),
(33,'cochabamba'),
(34,'pando'),
(35,'beni');

CREATE TABLE `leimnud_tut1_zona` (

`id` int(10) unsigned NOT NULL auto_increment,
`nombre` varchar(45) NOT NULL default '',
`id_ciudad` int(10) unsigned NOT NULL default '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM;

INSERT INTO `leimnud_tut1_zona` (`id`,`nombre`,`id_ciudad`) VALUES

(1,'el alto',1),
(2,'miraflores',1),
(3,'sopocachi',1),
(4,'villa dolores',1),
(5,'san pedro',1),
(6,'el prado',1),
(7,'tejada sorzano',1),
(52,'pando-1',34),
(51,'ciudad4',35),
(50,'ciudad3',35),
(48,'ciudad 1',35),
(49,'ciudad 2',35),
(15,'paraiso',6),
(16,'andrea',6),
(18,'comercial algo',6),
(19,'otra zona',6),
(53,'pando-2',34),
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (15 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

(56,'san fernando',33),
(57,'santo tomas',33),
(29,'viacha',1),
(55,'santa clara',33),
(37,'zona nueva',28);

Ejemplo 5
cliente

PHP [inicio]

1. <script language="javascript" type="text/javascript">

2. /*******************************************************************
3. * Funciones ejemplo-5 AJAX - BEGIN
4. *******************************************************************/
5. function objetus() {
6. try {
7. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
8. } catch (e) {
9.
10. try {
11. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
12. } catch (E) {
13. xmlhttp = false;
14. }
15. }
16. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
17. xmlhttp = new XMLHttpRequest();
18. }
19. return xmlhttp
20. }
21. /*******************************************************************************
22. * ejemplo 5 BEGIN
23. *******************************************************************************/
24. function ejemplo5_start()
25. {
26. ej5_P();
27. return
28. }
29. function ej5_P()
30. {
31. _objetus=objetus()
32. _target=document.getElementById('ej5_td_P')
33. document.getElementById('ej5_mensajes').innerHTML = "";
34. _target.style.display=''
35. _values_send="funcion=ejemplo5&opcion=padre"
36. _URL_="procesador.php?"
37. _objetus.open("GET",_URL_+"&"+_values_send,true);
38. _objetus.onreadystatechange=function() {
39. if (_objetus.readyState==1)
40. {
41. (_target.innerHTML=='')?(_target.innerHTML="Cargando Ciudades"):null;
42. }
43. else if(_objetus.readyState==4)
44. {
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (16 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

45. if(_objetus.status==200)
46. {
47. _target.innerHTML = _objetus.responseText;
48. document.getElementById('ej5_td_H').style.display=''
49. ej5_H(document.getElementById('ej5_P').value);
50. document.getElementById('ej5_td_submit').style.display=''
51. document.getElementById('ej5_add_P').style.display=''
52. document.getElementById('ej5_add_H').style.display=''
53. }
54. }
55.
56. }
57. _objetus.send(null);
58. }
59. function ej5_H(idena)
60. {
61. _objetus=objetus()
62. _target=document.getElementById('ej5_td_H')
63. _loader=document.getElementById('ej5_loader')
64. _values_send="funcion=ejemplo5&opcion=hijo&id="+idena
65. _URL_="procesador.php?"
66. _loader.style.display=''
67. _objetus.open("GET",_URL_+"&"+_values_send,true);
68. _objetus.onreadystatechange=function() {
69. if(_objetus.readyState==4)
70. {
71. if(_objetus.status==200)
72. {
73. _target.innerHTML = _objetus.responseText;
74. _loader.style.display='none'
75. }
76. }
77.
78. }
79. _objetus.send(null);
80. }
81. function ej5_procesar()
82. {
83. if(document.getElementById('ej5_P').value==0) {
84. window.alert('No se a seleccionado una ciudad')
85. return
86. }
87. _objetus=objetus()
88. _padre=document.getElementById('ej5_P').value
89. _hijo=document.getElementById('ej5_H').value
90. _loader=document.getElementById('ej5_loader')
91. _values_send="funcion=ejemplo5&opcion=procesar&id="+_padre+","+_hijo
92. _URL_="procesador.php?"
93. _loader.style.display=''
94. _objetus.open("GET",_URL_+"&"+_values_send,true);
95. _objetus.onreadystatechange=function() {
96. if(_objetus.readyState==4)
97. {
98. if(_objetus.status==200)
99. {
100. document.getElementById('ej5_mensajes').innerHTML = _objetus.responseText;
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (17 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

101. _loader.style.display='none'
102. }
103. }
104.
105. }
106. _objetus.send(null);
107. }
108. function ej5_add_P()
109. {
110. _objetus=objetus()
111. _loader=document.getElementById('ej5_loader')
112. _name_P=document.getElementById('ej5_add_P_nombre')
113. _add_P_submit=document.getElementById('ej5_add_P_submit')
114. _add_P_submit.disabled=true
115. _values_send="funcion=ejemplo5&opcion=add_P&nombre="+encodeURIComponent(_name_P.value)
116. _URL_="procesador.php?"
117. _loader.style.display=''
118. _objetus.open("GET",_URL_+"&"+_values_send,true);
119. _objetus.onreadystatechange=function() {
120. if(_objetus.readyState==4)
121. {
122. if(_objetus.status==200)
123. {
124. resp_mensaje=_objetus.responseText;
125. ej5_P();
126. document.getElementById('ej5_mensajes').innerHTML = resp_mensaje
127. _loader.style.display='none'
128. _name_P.value=''
129. _add_P_submit.disabled=false
130. }
131. }
132.
133. }
134. _objetus.send(null);
135. }
136. function ej5_del_P()
137. {
138. if(document.getElementById('ej5_P').value==0) {
139. window.alert('No se a seleccionado una ciudad')
140. return
141. }
142. _objetus=objetus()
143. _loader=document.getElementById('ej5_loader')
144. _del_P_submit=document.getElementById('ej5_del_P_submit')
145. _del_P_submit.disabled=true
146. _values_send="funcion=ejemplo5&opcion=del_P&id="+document.getElementById('ej5_P').value
147. _URL_="procesador.php?"
148. _loader.style.display=''
149. _objetus.open("GET",_URL_+"&"+_values_send,true);
150. _objetus.onreadystatechange=function() {
151. if(_objetus.readyState==4)
152. {
153. if(_objetus.status==200)
154. {
155. resp_mensaje=_objetus.responseText;
156. ej5_P();
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (18 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

157. document.getElementById('ej5_mensajes').innerHTML = resp_mensaje

158. _loader.style.display='none'
159. _del_P_submit.disabled=false
160. }
161. }
162.
163. }
164. _objetus.send(null);
165. }
166. function ej5_add_H()
167. {
168. if(document.getElementById('ej5_P').value==0) {
169. window.alert('No se a seleccionado una ciudad')
170. return
171. }
172. _objetus=objetus()
173. _name_H=document.getElementById('ej5_add_H_nombre')
174. _loader=document.getElementById('ej5_loader')
175. _add_H_submit=document.getElementById('ej5_add_H_submit')
176. _add_H_submit.disabled=true
177. _values_send="funcion=ejemplo5&opcion=add_H&id="+document.getElementById('ej5_P').value
+"&nombre="+encodeURIComponent(_name_H.value)
178. _URL_="procesador.php?"
179. _loader.style.display=''
180. _objetus.open("GET",_URL_+"&"+_values_send,true);
181. _objetus.onreadystatechange=function() {
182. if(_objetus.readyState==4)
183. {
184. if(_objetus.status==200)
185. {
186. resp_mensaje=_objetus.responseText;
187. ej5_H(document.getElementById('ej5_P').value);
188. document.getElementById('ej5_mensajes').innerHTML = resp_mensaje
189. _loader.style.display='none'
190. _name_H.value=''
191. _add_H_submit.disabled=false
192. }
193. }
194.
195. }
196. _objetus.send(null);
197. }
198. function ej5_del_H()
199. {
200. if(document.getElementById('ej5_H').value==0) {
201. window.alert('No se a seleccionado una zona')
202. return
203. }
204. _objetus=objetus()
205. _loader=document.getElementById('ej5_loader')
206. _del_H_submit=document.getElementById('ej5_del_H_submit')
207. _del_H_submit.disabled=true
208. _values_send="funcion=ejemplo5&opcion=del_H&id="+document.getElementById('ej5_P').value+","+document.
getElementById('ej5_H').value
209. _URL_="procesador.php?"
210. _loader.style.display=''
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (19 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

211. _objetus.open("GET",_URL_+"&"+_values_send,true);
212. _objetus.onreadystatechange=function() {
213. if(_objetus.readyState==4)
214. {
215. if(_objetus.status==200)
216. {
217. resp_mensaje=_objetus.responseText;
218. ej5_H(document.getElementById('ej5_P').value);
219. document.getElementById('ej5_mensajes').innerHTML = resp_mensaje
220. _loader.style.display='none'
221. _del_H_submit.disabled=false
222. }
223. }
224.
225. }
226. _objetus.send(null);
227. }
228. /*******************************************************************************
229. * ejemplo 5 END
230. *******************************************************************************/
231. /*******************************************************************
232. * Funciones ejemplo1 AJAX - END
233. *******************************************************************/
234. </script>
235. <input type="button" value="Ejecutar ejemplo-5" class="boton" onclick="ej5_P();">
236. <br>
237. <br>
238. <div id='ej5_mensajes'></div>
239. <br>
240. <table id=tabla-clase-A cellpadding="5">
241. <tr>
242. <td class="articulo_body" id="ej5_td_P" style='display:none;'></td>
243. <td class="articulo_body" id="ej5_td_H" style='display:none;'></td>
244. <td class="articulo_body" id="ej5_td_submit" style='display:none;'>
245. <input type="button" class="boton" value="Procesar" onclick='ej5_procesar();'>
246. </td>
247. </tr>
248. <tr><td id='ej5_loader' class='articulo' colspan=3 style='display:none;text-align:center;'>
249. Procesando.........
250. </td></tr>
251. <tr><td id='ej5_add_P' class='articulo' style='display:none;text-align:center;'>
252. <input type="text" class="text" id="ej5_add_P_nombre">
253. <br><br>
254. <input type="button" class="boton" id="ej5_add_P_submit" value="add" onclick="ej5_add_P();">
255.
256. <input type="button" class="boton" id="ej5_del_P_submit" value="del" onclick="ej5_del_P();">
257. </td>
258. <td id='ej5_add_H' class='articulo' style='display:none;text-align:center;'>
259. <input type="text" class="text" id="ej5_add_H_nombre">
260. <br><br>
261. <input type="button" class="boton" id="ej5_add_H_submit" value="add" onclick="ej5_add_H();">
262.
263. <input type="button" class="boton" id="ej5_del_H_submit" value="del" onclick="ej5_del_H();">
264. </td>
265. <td style='display:none;'></td>
266. </tr>
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (20 de 25)10/11/2006 15:08:07
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

267. </table>

PHP [fin]

procesador

PHP [inicio]

1. <?php
2. if(isset($_GET['funcion']))
3. {
4. $_valor=$_GET['funcion'];
5. if ($_valor=="ejemplo5")
6. {
7. $_opt=(isset($_GET['opcion']) and !empty($_GET['opcion']))?$_GET['opcion']:"none";
8. if($_opt=='none')
9. {
10. $_body="none";
11. }
12. else
13. {
14. $bdconex = mysql_connect("166.144.10.50", "free", "");
15. mysql_select_db("leimnud2", $bdconex);
16. function ej5_padre($x=0)
17. {
18. $_body="<select id='ej5_P' onchange='ej5_H(this.value);'>";
19. $a=mysql_query("SELECT * FROM leimnud_tut1_ciudad");
20. if (mysql_num_rows($a)==0) {
21. $_body.="<option value=0>No hay Ciudades</option>";
22. }
23. else
24. {
25. $_body.="<option value=0>Seleccione una ciudad</option>";
26. while ($b=mysql_fetch_array($a)) {
27. $_body.="<option value=".$b['id']." ".(($b['id']==
$x)?"selected":"").">".htmlspecialchars($b['nombre'])."</option>";
28.
29. }
30. $_body.="</select>";
31. }
32. return $_body;
33. }
34. if($_opt=='padre')
35. {
36. if (isset($_SESSION['ej5_last_P'])) {
37. $sel=$_SESSION['ej5_last_P'];
38. unset($_SESSION['ej5_last_P']);
39. }
40. else
41. {
42. $sel=0;
43. }
44. $_body=ej5_padre($sel);
45. }
46. elseif($_opt=='hijo')
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (21 de 25)10/11/2006 15:08:08
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

47. {
48. if (isset($_GET['id']) and is_numeric($_GET['id']))
49. {
50. function ej5_hijo($_xxx)
51. {
52. $_body="<select id='ej5_H'>";
53. $a=mysql_query("SELECT * FROM leimnud_tut1_zona WHERE id_ciudad=".$_GET
['id']);
54. if (mysql_num_rows($a)==0) {
55. $_body.=($_GET['id']==0)?
56. "<option value=0>Seleccione una ciudad</option>":
57. "<option value=0>Esta ciudad no tiene zonas</option>";
58. $_body.="</select>";
59. }
60. else
61. {
62. //$_body.="<option value=0>Seleccione una zona</option>";
63. while ($b=mysql_fetch_array($a)) {
64. $_body.="<option value=".$b['id']." ".(($b['id']==
$_xxx)?"selected":"").">".htmlspecialchars($b['nombre'])."</option>";
65.
66. }
67. $_body.="</select>";
68. }
69. return $_body;
70. }
71. if (isset($_SESSION['ej5_last_H'])) {
72. $sel=$_SESSION['ej5_last_H'];
73. unset($_SESSION['ej5_last_H']);
74. }
75. else
76. {
77. $sel=0;
78. }
79. $_body=ej5_hijo($sel);
80.
81.
82.
83. }
84. else
85. {
86. $_body="none";
87. }
88. }
89. elseif($_opt=='procesar')
90. {
91. if (isset($_GET['id']))
92. {
93. if (strstr($_GET['id'],",") and count(explode(",",$_GET['id']))==2)
94. {
95. $_a=explode(",",$_GET['id']);
96. if (is_numeric($_a[0]) and is_numeric($_a[1])) {
97. $x=mysql_query("SELECT * FROM leimnud_tut1_ciudad where id=".
$_a[0]);
98. $_x=mysql_fetch_object($x);
99. $ciudad=$_x->nombre;
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (22 de 25)10/11/2006 15:08:08
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

100. $x=mysql_query("SELECT * FROM leimnud_tut1_zona where id=".$_a

[1]);
101. if (mysql_num_rows($x)==0) {
102. $zona="ninguna" ;
103. }
104. else
105. {
106. $_x=mysql_fetch_object($x);
107. $zona=$_x->nombre;
108. }
109. $_body="Procesado, <b>Ciudad:</b> ".htmlspecialchars
(stripslashes($ciudad))." <b>Zona:</b> ".htmlspecialchars(stripslashes($zona));
110. }
111. }
112. }
113. else
114. {
115. $_body="none";
116. }
117. }
118. elseif($_opt=='add_P')
119. {
120. if (isset($_GET['nombre'])) {
121. $name=trim($_GET['nombre']);
122. if (empty($name)) {
123. $_body="Y el nombre?.....";
124. }
125. else
126. {
127. $ad=mysql_query("INSERT INTO leimnud_tut1_ciudad (nombre) VALUES ('".
$name."')");
128. $_body="Se a creado la ciudad: <b>".htmlspecialchars(stripslashes
($name))."</b>";
129. $_SESSION['ej5_last_P']=mysql_insert_id();
130. }
131. }
132. }
133. elseif($_opt=='del_P')
134. {
135. if (isset($_GET['id']))
136. {
137. $_id=$_GET['id'];
138. if (is_numeric($_id)) {
139. $x=mysql_query("SELECT * FROM leimnud_tut1_ciudad where id=".$_id);
140. $_x=mysql_fetch_object($x);
141. $ciudad=$_x->nombre;
142. mysql_query("DELETE FROM leimnud_tut1_ciudad where id=".$_id);
143. mysql_query("DELETE FROM leimnud_tut1_zona where id_ciudad=".$_id);
144. $_body="Se a borrado la ciudad: <b>".htmlspecialchars($ciudad)."</b>";
145. }
146. }
147. else
148. {
149. $_body="none";
150. }
151. }
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (23 de 25)10/11/2006 15:08:08
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

152. elseif($_opt=='add_H')
153. {
154. if (isset($_GET['id']) and isset($_GET['nombre']))
155. {
156. $_id=$_GET['id'];
157. $name=trim($_GET['nombre']);
158. if (is_numeric($_id) and !empty($name))
159. {
160. $x=mysql_query("SELECT * FROM leimnud_tut1_ciudad where id=".$_id);
161. $_x=mysql_fetch_object($x);
162. $ciudad=$_x->nombre;
163. $ad=mysql_query("INSERT INTO leimnud_tut1_zona (nombre,id_ciudad)
VALUES ('".$name."',".$_id.")");
164. $_body="Se a creado la zona: <b>".stripslashes(htmlspecialchars
($name))."</b> en la ciudad: <b>".htmlspecialchars($ciudad)."</b>";
165. $_SESSION['ej5_last_H']=mysql_insert_id();
166. }
167. else
168. {
169. $_body="Y el nombre de la zona?......";
170. }
171. }
172. else
173. {
174. $_body="none";
175. }
176. }
177. elseif($_opt=='del_H')
178. {
179. if (isset($_GET['id']))
180. {
181. if (strstr($_GET['id'],",") and count(explode(",",$_GET['id']))==2)
182. {
183. $_a=explode(",",$_GET['id']);
184. if (is_numeric($_a[0]) and is_numeric($_a[1])) {
185. $x=mysql_query("SELECT * FROM leimnud_tut1_ciudad where id=".
$_a[0]);
186. $_x=mysql_fetch_object($x);
187. $ciudad=$_x->nombre;
188. $x=mysql_query("SELECT * FROM leimnud_tut1_zona where id=".$_a
[1]);
189. $_x=mysql_fetch_object($x);
190. $zona=$_x->nombre;
191. mysql_query("DELETE FROM leimnud_tut1_zona where id=".$_a[1]);
192. $_body="Se a eliminado la zona <b>".htmlspecialchars($zona)."</
b> de la ciudad <b>".htmlspecialchars(stripslashes($ciudad));
193. }
194. }
195. }
196. else
197. {
198. $_body="none";
199. }
200. }
201. else
202. {
file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (24 de 25)10/11/2006 15:08:08
Leimnud Sistema de Manuales-Tutorial de AJAX (Asynchronous JavaScript + XML)

203. $_body="none";
204. }
205. }
206. echo isset($_body)?$_body:"none";
207. }
208. else
209. {
210. echo "No enviaste ningun valor ACEPTABLE";
211. }
212. }
213. else
214. {
215. echo "No se a enviado valor alguno de peticion";
216. }
217. ?>

PHP [fin]

Ejecutar ejemplo-5

Procesar

Procesando.........

add del add del

XIII. Despedida
Eso fué una parte de AJAX gracias por leer este artÃ-culo y disculpen los errores que sin darme cuenta cometÃ-, espero sus sugerencias para este artÃ-culo y me ayuden a desarrollarlo de forma extensa. Sus
sugerencias o cualquier cosa a maborak@gmail.com

Articulos similares:

■ Remote Scripting
■ RPC vÃ-a HTTP o Como recoger información desde el servidor sin recargar la página.
■ El objeto XMLHttpRequest
■ Tutorial básico del método AJAX con PHP y MySQL
■ AJAX un nuevo acercamiento a Aplicaciones Web
■ Using the XML HTTP Request object
■ Recarga de página controlada

file:///D|/eMule/Incoming/Tutorial de AJAX (Asynchronous JavaScript + XML).html (25 de 25)10/11/2006 15:08:08