Concepto de Ajax

2. Entendiendo AJAX
a. Que no es Ajax
b . Formas similares a lo que es Ajax
c. Nuestro material para este tutorial
4. El objeto XMLHttpRequest
a. Creando el objeto XMLHttpRequest
b. Métodos
c . Propiedades
5. El proceso Cliente-Servidor
6. Sobre los Ejemplos
7. Nuestro primer tope con AJAX
8. Sintaxis básica para los métodos GET/POST
a . Método GET
b . Método POST
9. Recibiendo los resultados del procesador
a . responseText
b . responseXML
10. Re-renderizando elementos
11. Ejemplos
a . Verificando la existencia de una URL
b . Checkbox Dependientes
c . Lector RSS
d . Otros

Entendiendo AJAX
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.

Que NO ES 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
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.

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.

Nuestro material para este tutorial

Para este tutorial usaré el objeto XMLHttpRequest()

el objeto XML http request en ajax

Para este tutorial usaré el objeto XMLHttpRequest()

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.
<?php 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.

<?php function font class=PHP_color2>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();
}

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

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

o getAllResponseHeaders() : Devuelve todas las cabeceras
de la respuesta (etiquetas y valores) como una cadena.
o getResponseHeader(etiqueta) : Devuelve el valor de la
etiqueta en las cabeceras de la respuesta.
o open(método, URL, asíncrona, usuario, password) : Abre
una conexión con esa URL mediante el método
(GET,POST,HEAD 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 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.

o send(contenido) : Envía el contenido al servidor.

o setRequestHeader(etiqueta,valor) : Establece el valor de
una etiqueta de las cabeceras de petición.

* Propiedades
A continuación las propiedades del objeto.

o onreadystatechange : Contiene el nombre de la función

que se ejecuta cada vez que el estado de la conexión
cambie.
o readyState : Estado de la conexión.

Código Estado
1 Cargando
2 Cargado, pero sin su contenido incorporado a los objetos
correspondientes
3 Incorporando a los objetos correspondientes
4 Carga completada

o responseText : Datos devueltos por el servidor en formato

cadena.
o responseXML : Datos devueltos por el servidor en forma
de documento XML que puede ser recorrido mediante las
funciones del DOM (getEementsByTagName, etc).
o 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
o statusText : Mensaje de texto enviado por el servidor
junto al código (status), para el caso de código 200
contendrá "OK".

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:

<?php <?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
{
echo "No enviaste ningun valor ACEPTABLE";
}
}
else
{
echo "No se a enviado valor alguno de peticion";
}
?>

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

Sobre 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.

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 <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_="procesador.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)
{
//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);
}
</script>
<input type="button" value="Pedir datos"
onclick="primer_tope();">

<!-- mas documento HTML -->

Nuestro procesador trabajará segun la variable funcion que

reciba por el método GET

<?php <?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;
}

else
{
echo "No enviaste ningun valor ACEPTABLE";
}
}
else
{
echo "No se a enviado valor alguno de peticion";
}
?>

Ejecutar ejemplo1:

* 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.

<?php _objetus=objetus()

Llamamos al objeto XMLHttpRequest

<?php _values_send="funcion=pt"

Cargamos todas las variables que se van a enviar

<?php _URL_="proceso.php?"

La URL donde nos comunicaremos (Nótese el ? al final del

archivo)

<?php _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

<?php _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.

<?php 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.

<?php if(_objetus.status==200)
{

Si el estado del proceso arroja un status 200 significa que a

terminado con éxito.

<?php 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.

<?php }
}
}
_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.

Sintaxis básica para los métodos GET/POST

Para el método GET

<?php 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); //envío nulo de variables
}

# Para el método POST

<?php 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
}
}
}
}

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

<?php vari=objetus.responseText

Entonces aqui la variable vari contendrá el resultado del

procesador.
Ejemplo:

<?php 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).

<?php 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>

<?php 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:

<?php window.alert(_ip+"\n"+_uri+"\n"+_date)

Hagamos el Ejemplo1 con responseXML

Ejemplo 1-b

cliente

<?php <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_="procesador.php?"
_objetus.open("GET",_URL_+"&"+_values_send,true);
# una vez enviado los valores 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=objetus()
_values_send="funcion=ptxml"
_URL_="procesador.php?"
_objetus.open("GET",_URL_+"&"+_values_send,true);
_objetus.onreadystatechange=function() {
if (_objetus.readyState==4)
{
if(_objetus.status==200)
{
var vari=_objetus.responseXML;
var _i =
vari.getElementsByTagName('ip').item(0).firstChild.data;
var _u =
vari.getElementsByTagName('uri').item(0).firstChild.data;
var _d =
vari.getElementsByTagName('date').item(0).firstChild.data;
window.alert(_i+"\n"+_u+"\n"+_d);
}
}

}
_objetus.send(null);
return
}
</script>
<input type="button" value="con rexponseText"
onclick="primer_tope();"><br>
<input type="button" value="con rexponseXML"
onclick="primer_topeXML();">

<!-- mas documento HTML -->

procesador

<?php <?php
if(isset($_GET['funcion']))
{
$_valor=$_GET['funcion'];
if($_valor=="pt")
{
$_pt="Tu ip: ".$_SERVER['REMOTE_ADDR']."\n";
$_pt.="request_uri:";
$_pt.=htmlspecialchars($_SERVER['REQUEST_URI'])."\n";
$_pt.="date(): ".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: ".$_SERVER['REMOTE_ADDR']."</ip>\n";
$_xml.="<uri>request_uri:";
$_xml.=htmlspecialchars($_SERVER['REQUEST_URI']);
$_xml.="</uri>\n";
$_xml.="<date>".date("d-m-Y : H-i-s")."</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";
}
?>

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:

<?php 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:

<?php window.alert(_ip+"\n"+_uri+"\n"+_date)

Hagamos el Ejemplo1 con responseXML

Ejemplo 1-b

cliente

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

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

Por analizar este ejemplo..........

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 <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 primer_tope()
{
_objetus=objetus()
_values_send="funcion=pt"
_URL_="procesador.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.resp
onseText;
}
}
}
_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>

Seguir navegando por el tutorial de ajax