TUTORIAL DE AJAX (ASYNCHRONOUS JAVASCRIPT + XML)

1. 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. 2. 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 finaly 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 o 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. o 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. o 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. o 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. o 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.

3. 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. 4. 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.

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 estndar 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; } } 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.

Mtodos A continuacin los mtodos del objeto.

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( mtodo, URL, asncrona, usuario, password) : Abre una conexin con esa URL

abort() : Detiene la peticin en curso. getAllResponseHeaders() : Devuelve todas

medianteel 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 1: Cargando 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 : Cdigo enviado por el servidor.

Cdigo: valor 200: Completado con xito 404: No se encontr URL 414: Los valores pasados por GET superan los 512 statusText ; Mensaje de texto enviado por el servidor junto al cdigo (status), para el caso de cdigo 200 contendr "OK".

Como funciona el proceso Cliente-Servidor Cuando nuestro cliente se comunica con el servidor este no recibir variables para su uso, modificacin. 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 mtodo GET. PHP [inicio]
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. <?php if(isset($_GET['valor'])) { $_valor=$_GET['valor']; if($_valor==1) { echo "Enviaste el valor 1"; } elseif ($_valor==2) { echo "Enviaste el valor 2"; } else {

15. 16. 17. 18. 19. 20. 21. 22.

echo "No enviaste ningun valor ACEPTABLE"; } else { } ?> }

echo "No se a enviado valor alguno de peticion";

PHP [fin] Si ponemos http://algo.com/proc.php?valor=1 el archivo soltar Enviaste el valor 1 Si ponemos http://algo.com/proc.php?valor=2 el archivo soltar Enviaste el valor 2 Si ponemos http://algo.com/proc.php?valor=5345 el archivo soltar No enviaste ningun valor ACEPTABLE Si no le damos variables http://algo.com/proc.php el archivo soltar No se a enviado valor alguno de peticion 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. 2. 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 sidigo "... entonces nuestro procesador nos mandar...." me refiero al archivo procesador.php. 3. Nuestro primer tope con AJAX Como primer ejemplo no haremos el tpico HOLA MUNDO

enviaremos una peticin a nuestro procesador que nos arrojar nuestro IP,REQUEST_URI,date() usando el mtodo GET. Ejemplo 1 cliente PHP [inicio] <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. {
1. 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,t rue); 29. //una vez enviado los valores inmediatamente llamamos a la propiedad 30. //onreadystatechange 31. _objetus.onreadystatechange=function() {

//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();">
32. 46. 47. 48.

<!-- mas documento HTML -->

PHP [fin] Nuestro procesador trabajar segun la variable funcion que reciba por el mtodo GET PHP [inicio]
49. <?php 50. if(isset($_GET['funcion'])) 51. { 52. $_valor=$_GET['funcion']; 53. if($_valor=="pt") 54. { 55. $_pt="Tu ip: ".htmlspecialchars($_SERVER['REMOTE_ADDR'])."\n"; 56. $_pt.="request_uri: ".htmlspecialchars($_SERVER['REQUEST_URI'])."\n"; 57. $_pt.="date(): ".htmlspecialchars(date("d-m-Y : H-i-s"))."\n"; 58. echo $_pt; 59. } 60. 61. else 62. { 63. echo "No enviaste ningun valor ACEPTABLE"; 64. } 65. } 66. else 67. {

68. 69. 70.

echo "No se a enviado valor alguno de peticion"; } ?>

PHP [fin]

Analizando la funcion primer_tope() Fuera de lo que es la funcion objetus() analizaremos nuestra funcion que se encargo del envo 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 (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.

Lineas sagradas de una funcin cliente para el mtodo 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) { //procesos que se realizaran con los datos obtenidos } } } _objetus.send(null); //envo nulo de variables }

Lineas sagradas de una funcin cliente para el mtodo 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-wwwform-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) { datos obtenidos } } } //procesos que se realizaran con los }

Ntense las diferencias con el mtodo GET 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; 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] <script language="javascript" type="text/javascript"> //funcion encargada de crear el objeto 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 } //la funcion que har el trabajo sucio //esta funcion es la que llamamos en el evento ONCLICK de nuestro boton function primer_tope() {

//creamos el objeto _objetus=objetus() //cargamos una varible con las variables que vamos a enviar

_values_send="funcion=pt" _URL_="proceso.php?" _objetus.open("GET",_URL_+"&"+_values_ send,true); //una vez enviado los valores inmediatamente llamamos a la propiedad //onreadystatechange _objetus.onreadystatechange=function() { //dentro de la funcion comprobamos el estado del proceso //si es 4 (terminado) pedimos lo que nos han mandado if (_objetus.readyState==4) { //si se da un status 200 (TERMINADO CON EXITO) if(_objetus.status==200) { //usamos la propiedad responseText para recibir en una cadena //lo que nos mandaron window.alert(_objetus.responseText); } } } //obligatorio .... luego explicar el porque _objetus.send(null); } function primer_topeXML() { _objetus=monitor_get_xmlhttp() _values_send="funcion=ptxml" _URL_="ajax_tut.php?" _objetus.open("GET",_URL_+"&"+_values_ send,true); //_objetus.overrideMimeType("text/xml"); _objetus.onreadystatechange=function() { if (_objetus.readyState==4) { if(_objetus.status==200) { var vari=_objetus.responseXML; var _ip = vari.getElementsByTagName('ip').item(0).firstChild. data;

var _uri = vari.getElementsByTagName('uri').item(0).firstChild .data; var _date = vari.getElementsByTagName('date').item(0).firstChil d.data; window.alert(_ip+"\n"+_uri+"\n"+_d ate); } } } _objetus.send(null); return } </script> <input type="button" name="visual" value="Pedir datos con rexponseText" class="boton" onclick="primer_tope();">-------- <input type="button" name="visual" value="Pedir datos con rexponseXML" class="boton" onclick="primer_topeXML();">

<!-- mas documento HTML -->

PHP [fin] procesador PHP [inicio]

<?php if(isset($_GET['funcion'])) { $_valor=$_GET['funcion']; if($_valor=="pt") { $_pt="Tu ip: ".htmlspecialchars($_SERVER['REMOTE_ADDR'])."\n"; $_pt.="request_uri: ".htmlspecialchars($_SERVER['REQUEST_URI'])."\n"; $_pt.="date(): ".htmlspecialchars(date("d-m-Y : H-i-s"))."\n"; echo $_pt; } elseif ($_valor=="ptxml") { $_xml="<?xml version=\"1.0\" standalone=\"yes\"?>\n";

 $_xml.="<serv>\n"; $_xml.="<ip>Tu ip: ".htmlspecialchars($_SERVER['REMOTE_ADDR'])."</ip>\n" ; $_xml.="<uri>request_uri: ".htmlspecialchars($_SERVER['REQUEST_URI'])."</uri>\n "; $_xml.="<date>date(): ".htmlspecialchars(date("d-m-Y : H-is"))."</date>\n"; $_xml.="</serv>\n"; //mandamemos cabeceras identificando al documento //como un documento XML header('Content-Type: text/xml'); echo $_xml; } else { echo "No enviaste ningun valor ACEPTABLE"; } } else { echo "No se a enviado valor alguno de peticion"; } ?>

PHP [fin]

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:

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] <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. }
1. 18. 19. 20. 21. 22. 23.

function primer_tope() { _objetus=monitor_get_xmlhttp() _values_send="funcion=pt" _URL_="ajax_tut.php?"

24.

_objetus.open("GET",_URL_+"&"+_values_send,t

rue); _objetus.onreadystatechange=function() { if (_objetus.readyState==4) 27. { 28. if(_objetus.status==200) 29. { 30. target="nuestrodiv_id" 31. document.getElementById(target).inner HTML=_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>
25. 26.

PHP [fin]

Bueno eso fu nuestro tope bsico con AJAX. 2. 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"> //funcion encarga de crear el objeto 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') { xmlhttp = new XMLHttpRequest(); } return xmlhttp }

function TA_comp_url() { try { _objetus=objetus()

_URL_=document.getElementById('TA_c omp_url').value //id URL _target=document.getElementById('TA_ comp_url_resultado') //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"; } 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>

PHP [fin]

URL:

Ejemplo 4 cliente PHP [inicio] <script language="javascript" type="text/javascript"> //funcion encarga de crear el objeto 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') { xmlhttp = new XMLHttpRequest(); } return xmlhttp }

function TA_comp_url2() { _objetus=objetus() _uri=document.getElementById('TA_comp_ url2').value //id URL _target=document.getElementById('TA_co mp_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() { 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> PHP [fin] procesador PHP [inicio]

if(isset($_GET['funcion'])) { $_valor=$_GET['funcion']; if ($_valor=="TA_comp_url2") {

$_r=(!isset($_GET['uri']))?false:(! @fopen($_GET['uri'],"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:

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,'pando2',34), (56,'san fernando',33), (57,'santo tomas',33), (29,'viacha',1), (55,'santa clara',33), (37,'zona nueva',28); 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') { xmlhttp = new XMLHttpRequest(); } return xmlhttp } / ***************************************** ************************************** * ejemplo 5 BEGIN ************************************* ***************************************** */

function ejemplo5_start() { ej5_P(); return } function ej5_P() { _objetus=objetus() _target=document.getElementById('ej5_ td_P') document.getElementById('ej5_mensaje s').innerHTML = ""; _target.style.display='' _values_send="funcion=ejemplo5&opcio n=padre" _URL_="procesador.php?" _objetus.open("GET",_URL_+"&"+_value s_send,true); _objetus.onreadystatechange=function() { if (_objetus.readyState==1) { (_target.innerHTML=='')? (_target.innerHTML="Cargando Ciudades"):null; } else if(_objetus.readyState==4) { if(_objetus.status==200) { _target.innerHTML = _objetus.responseText;

document.getElementById('ej5_td_H').styl e.display=''

ej5_H(document.getElementById('ej5_P').v alue);

document.getElementById('ej5_td_submit' ).style.display=''

document.getElementById('ej5_add_P').sty le.display=''

document.getElementById('ej5_add_H').st yle.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&opcio n=hijo&id="+idena _URL_="procesador.php?" _loader.style.display='' _objetus.open("GET",_URL_+"&"+_value s_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').val ue==0) { window.alert('No se a seleccionado una ciudad') return } _objetus=objetus() _padre=document.getElementById('ej5_ P').value _hijo=document.getElementById('ej5_H' ).value

_loader=document.getElementById('ej5

_loader') _values_send="funcion=ejemplo5&opcio n=procesar&id="+_padre+","+_hijo _URL_="procesador.php?" _loader.style.display='' _objetus.open("GET",_URL_+"&"+_value s_send,true); _objetus.onreadystatechange=function() { if(_objetus.readyState==4) { if(_objetus.status==200) {

document.getElementById('ej5_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('ej 5_add_P_nombre') _add_P_submit=document.getElementB yId('ej5_add_P_submit') _add_P_submit.disabled=true _values_send="funcion=ejemplo5&opcio n=add_P&nombre="+encodeURIComponent(_name _P.value) _URL_="procesador.php?" _loader.style.display='' _objetus.open("GET",_URL_+"&"+_value s_send,true); _objetus.onreadystatechange=function() { if(_objetus.readyState==4) { if(_objetus.status==200)

{ resp_mensaje=_objetus.responseText; ej5_P();

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

_loader.style.display='none' _name_P.value='' _add_P_submit.disabled=false } } } _objetus.send(null);

} function ej5_del_P() { if(document.getElementById('ej5_P').val ue==0) { window.alert('No se a seleccionado una ciudad') return } _objetus=objetus() _loader=document.getElementById('ej5 _loader') _del_P_submit=document.getElementBy Id('ej5_del_P_submit') _del_P_submit.disabled=true _values_send="funcion=ejemplo5&opcio n=del_P&id="+document.getElementById('ej5_P').v alue _URL_="procesador.php?" _loader.style.display='' _objetus.open("GET",_URL_+"&"+_value s_send,true); _objetus.onreadystatechange=function() { if(_objetus.readyState==4) { if(_objetus.status==200) {

resp_mensaje=_objetus.responseText;

ej5_P();

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

_loader.style.display='none'

_del_P_submit.disabled=false } } } _objetus.send(null);

} function ej5_add_H() { if(document.getElementById('ej5_P').val ue==0) { window.alert('No se a seleccionado una ciudad') return } _objetus=objetus() _name_H=document.getElementById('ej 5_add_H_nombre') _loader=document.getElementById('ej5 _loader') _add_H_submit=document.getElementB yId('ej5_add_H_submit') _add_H_submit.disabled=true _values_send="funcion=ejemplo5&opcio n=add_H&id="+document.getElementById('ej5_P'). value+"&nombre="+encodeURIComponent(_name_ H.value) _URL_="procesador.php?" _loader.style.display='' _objetus.open("GET",_URL_+"&"+_value s_send,true); _objetus.onreadystatechange=function() { if(_objetus.readyState==4) { if(_objetus.status==200) {

resp_mensaje=_objetus.responseText;

ej5_H(document.getElementById('ej5_P').v alue);

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

_loader.style.display='none' _name_H.value='' _add_H_submit.disabled=false } } } _objetus.send(null);

} function ej5_del_H() { if(document.getElementById('ej5_H').val ue==0) { window.alert('No se a seleccionado una zona') return } _objetus=objetus() _loader=document.getElementById('ej5 _loader') _del_H_submit=document.getElementBy Id('ej5_del_H_submit') _del_H_submit.disabled=true _values_send="funcion=ejemplo5&opcio n=del_H&id="+document.getElementById('ej5_P'). value+","+document.getElementById('ej5_H').value _URL_="procesador.php?" _loader.style.display='' _objetus.open("GET",_URL_+"&"+_value s_send,true); _objetus.onreadystatechange=function() { if(_objetus.readyState==4) { if(_objetus.status==200) {

resp_mensaje=_objetus.responseText;

ej5_H(document.getElementById('ej5_P').v alue);

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

_loader.style.display='none'

_del_H_submit.disabled=false } } } _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();">

<input type="button" class="boton" id="ej5_del_P_submit" value="del" onclick="ej5_del_P();"> </td> <td id='ej5_add_H' class='articulo' style='display:none;text-align:center;'> <input type="text" class="text" id="ej5_add_H_nombre"> <br><br> <input type="button" class="boton" id="ej5_add_H_submit" value="add" onclick="ej5_add_H();">

<input type="button" class="boton" id="ej5_del_H_submit" value="del" onclick="ej5_del_H();"> </td> <td style='display:none;'></td> </tr> </table> 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("SELECT * FROM leimnud_tut1_ciudad"); if (mysql_num_rows($a)==0) { $_body.="<option value=0>No hay Ciudades</option>"; } else { $_body.="<option value=0>Seleccione una ciudad</option>"; while ($b=mysql_fetch_array($a)) { $_body.="<option value=".$b['id']." ". (($b['id']==$x)?"selected":"").">".htmlspecialchars($ b['nombre'])."</option>"; } $_body.="</select>"; } return $_body; } if($_opt=='padre') { if (isset($_SESSION['ej5_last_P'])) { $sel=$_ SESSION['ej5_last_P']; unset($ _SESSION['ej5_last_P']); } else

 { $sel=0; } $_body=ej5_padr e($sel); } elseif($_opt=='hijo') { if (isset($_GET['id']) and is_numeric($_GET['id'])) { functio n ej5_hijo($_xxx) { $_body="<select id='ej5_H'>"; $a=mysql_query("SELECT * FROM leimnud_tut1_zona WHERE id_ciudad=".$_GET['id']); if (mysql_num_rows($a)==0) { $_body.=($_GET['id']==0)? "<option value=0>Seleccione una ciudad</option>": "<option value=0>Esta ciudad no tiene zonas</option>"; $_body.="</select>"; } else { //$_body.="<option value=0>Seleccione una zona</option>"; while ($b=mysql_fetch_array($a)) { $_body.="<option value=".$b['id']." ". (($b['id']==$_xxx)?"selected":"").">".htmlspecialchar s($b['nombre'])."</option>"; } $_body.="</select>"; } return $_body;

 } if (isset($_SESSION['ej5_last_H'])) { $sel=$_SESSION['ej5_last_H']; unset($_SESSION['ej5_last_H']); } else { $sel=0; } $_body= ej5_hijo($sel); } else { $_body= "none"; } } elseif($_opt=='procesar ') { if (isset($_GET['id'])) { if (strstr($_GET['id'],",") and count(explode(",", $_GET['id']))==2) { $_a=explode(",",$_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=t rim($_GET['nombre']); if (empty($name)) { $_body="Y el nombre?....."; } else { $ad=mysql_query("INSERT INTO leimnud_tut1_ciudad (nombre) VALUES ('".$name."')"); $_body="Se a creado la ciudad: <b>".htmlspecialchars(stripslashes($name))."</b>"; $_SESSION['ej5_last_P']=mysql_insert_id(); } } } elseif($_opt=='del_P') { if (isset($_GET['id'])) { $_id=$_ GET['id'];

 if (is_numeric($_id)) { $x=mysql_query("SELECT * FROM leimnud_tut1_ciudad where id=".$_id); $_x=mysql_fetch_object($x); $ciudad=$_x->nombre; mysql_query("DELETE FROM leimnud_tut1_ciudad where id=".$_id); mysql_query("DELETE FROM leimnud_tut1_zona where id_ciudad=".$_id); $_body="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['id']; $name=t rim($_GET['nombre']); if (is_numeric($_id) and !empty($name)) { $x=mysql_query("SELECT * FROM leimnud_tut1_ciudad where id=".$_id); $_x=mysql_fetch_object($x); $ciudad=$_x->nombre; $ad=mysql_query("INSERT INTO leimnud_tut1_zona (nombre,id_ciudad) VALUES ('".$name."',".$_id.")"); $_body="Se a creado la zona: <b>".stripslashes(htmlspecialchars($name))."</b> en la ciudad: <b>".htmlspecialchars($ciudad)."</b>"; $_SESSION['ej5_last_H']=mysql_insert_id(); } else

 { $_body="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=explode(",",$_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"; } } else { echo "No se a enviado valor alguno de peticion"; } ?>

PHP [fin]

Procesando.........

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

maborak@gmail.com