Manual de ajax

Concepto de AJAX

Cargar y renderizar una página, luego mantenerse en esa página mientras scripts y rutinas van al servidor
buscando, en background los datos que son usados para actualizar la página solo re-renderizando la
página y mostrando u ocultando porciones de la misma.
AJAX, en resumen, es el acrónimo para Asynchronous JavaScript+CSS+DOM+XMLHttpRequest

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.

Por ejemplo en un proceso normal una aplicación web recarga o va de una página a otra porque debe
enviar una petición a algún servidor web esta debe procesarla y mandar el resultado final y el resultado
final es la página a la cual nos dirige la aplicación o la recarga de la página misma. En todo esto AJAX
hace lo mismo con la diferencia que lo hace en background ósea que realiza todo el proceso de
comunicación con algún 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.

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

El objeto XML http request en ajas

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 líos 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 ejecutara sin parar la aplicación 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 sesión, 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

Ósea..... 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á según 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
recepción 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 ósea 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 interesaban
automáticamente al abrir

proceso.php?funcion=pt

_objetus.send(null) : Es obligatorio, si no se envía 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 siguiente 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 viéndolos 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)

aplicándole la propiedad innerHTML, quedándonos:

<?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, por favor 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
}
función 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.responseText;
}
}
}
_objetus.send(null);
return
}
</script>
<input type="button" name="visual" value="Pedir" onclick="primer_tope();">
<!-- aqui se carga el resultado -->
<div id="nuestrodiv_id"></div>