sábado, 13 de junio de 2015

[Minitutorial]AJAX

Introduccion a AJAX

AJAX es acerca de la actualizacion de las partes de una pagina web, sin necesidad de recargar toda la pagina. 

¿Que deberia de saber? 

Antes de continuar deberia tener una comprension basica de lo siguiente:

* HTML / XHTL
* CSS
* Javascript / DOM

¿Que es AJAX?

AJAX = Asynchronous Javascript and XML.
AJAX es una tecnica para crear paginas web rapidas y dinamicas. AJAX permite a paginas web actualizarse de forma asincrona intercambiando pequeñas cantidades de datos con el servidor en segundo plano. Esto significa que es posible actualizar partes de una pagina web, sin necesidad de recargar toda la pagina. Paginas web clasicas (que no usan AJAX) deben volver a cargar toda la pagina si el contenido cambia. Algunos ejemplos de aplicaciones usando AJAX: las pestañas de Google Maps, Gmail, Youtube y Facebook.

Como trabaja AJAX


AJAX se basa en estandares de internet

AJAX se basa en estandares de internet y utiliza una combinacion de:

* Objeto XMLHttpRequest (para intercambiar datos asincronicamente con el servidor)
* Javascript/DOM (Para mostrar, interactuar con la informacion)
* CSS (El estilo de los datos)
* XML (A menudo utilizado como el formato de transferencia de datos)

Aplicaciones AJAX son independientes del navegador y plataforma. 

Google sugestor

AJAX se hizo popular en 2005 por Google, con Google sugestor.
Google sugestor es usando AJAX para crear una interfaz web muy dinamica: cuando empiezas a escribir en el buscador de Google, un javascript envia las letras a un servidor y el servidor devuelve una lista de sugerencias.

Empezar a usar AJAX hoy

AJAX se basa en las normas vigentes. Estas normas han sido usadas por los desarrolladores durante varios años. 

Ejemplo de AJAX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<script type="text/javascript">
    function loadXMLDoc(){
        var xmlhttp;
        if(window.XMLHttpRequest){
            // codigo para IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }else{
            // codigo para IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("midiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","ajax_info.txt",true);
        xmlhttp.send();
    }

</script>
<body>
    <div id="midiv"><h2>Deja que AJAX cambie este texto</h2></div>
    <button type="button" onclick="loadXMLDoc()">Cambiar el contenido</button>
</body>
</html>


ajax_info.txt:

AJAX no es un nuevo lenguaje de programacion.<br />
AJAX es una tecnica para crear sitios webs rapidos y dinamicos.


Ejemplo de AJAX explicado

La aplicacion AJAX de arriba contiene una seccion div y un button. La seccion div se utilizará para mostrar la informacion devuelta desde un servidor. El boton llama a una funcion llamada loadXMLDoc(), si se hace clic en:

<button type="button" onclick="loadXMLDoc()">Cambiar el contenido</button>

A continuacion, agregamos una etiqueta de <script> a la seccion head de la pagina. La seccion del script contiene la funcion loadXMLDoc():

function loadXMLDoc(){
// el script ajax va aqui
}

AJAX crea un objeto XMLHttpRequest

La piedra angular de AJAX es el objeto XMLHttpRequest

El Objeto XMLHttpRequest

Todos los navegadores modernos apoyan el objeto XMLHttpRequest (IE5 e IE6 utilice ActiveXObject). Se utiliza el objeto XMLHttpRequest para intercambiar datos con el servidor en segundo plano. Esto significa que es posible actualizar partes de una pagina web, sin necesidad de recargar toda la pagina.

Crear un objeto XMLHttpRequest

Todos los navegadores modernos (ie7+, firefox, chrome, safari, opera) tienen un objeto XMLHttpRequest integrado. Sintaxis para crear un objeto XMLHttpRequest:

variable = new XMLHttpRequest();

Versiones antiguas de internet explorer (ie5, ie6) utilizan el objeto Activex:

variable = new ActiveXObject();

Para manejar todos los navegadores modernos incluyendo IE5 y IE6, compruebe que el explorador admite el objeto XMLHttpRequest. Si lo hace crear un objeto XMLHttpRequest, sino crear un objeto ActiveXObject.

if(window.XMLHttpRequest){
            // codigo para IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }else{
            // codigo para IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } 
 


AJAX enviar una solicitud al servidor

Se utiliza el objeto XMLHttpRequest para intercambiar datos con un servidor.

Enviar una solicitud a un servidor

Para enviar una solicitud a un servidor, utilizamos los metodos open() y send() del objeto XMLHttpRequest:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

+------------------------+-------------------------------------------------------------------------------+
| Metodo                 | Descripcion                                                                   |
+------------------------+-------------------------------------------------------------------------------+
| open(method,url,async) | Especifica el tipo de solicitud, la direccion URL, y si la solicitud debe ser |
|                        | manejada de forma asincrona o no.                                             |
|                        | * method: el tipo de peticion GET o POST.                                     |
|                        | * url: la ubicacion del archivo en el servidor.                               |
|                        | * async: true (asincrona) o falso (sincrono)                                  |
+------------------------+-------------------------------------------------------------------------------+
| send(string)           | Envia la solicitud al servidor.                                               |
|                        | * string: utilizado para las peticiones por POST.                             |
+------------------------+-------------------------------------------------------------------------------+ 
 
¿GET o POST?

GET es mas sencillo y rapido que POST, y puede ser utilizado en la mayoria de los casos. Sin embargo, siempre se puede usar POST cuando la peticion:

* Un archivo almacenado en caché no es una opcion (actualizacion de un archivo o base de datos del servidor)
* Enviar una gran cantidad de datos al servidor (POST no tiene limitaciones de tamaño)
* Envio de inputs del usuario (que puede contener caracteres desconocidos), POST es mas robusto y seguro que GET

Peticiones GET

Una simple peticion GET.

Ejemplo:

xmlhttp.open("GET","demo_get.php",true);
xmlhttp.send();


En el ejemplo anterior, usted puede obtener un resultado del cache:

Ejemplo:

xmlhttp.open("GET","demo_get.php?t=" + Math.random(),true);
xmlhttp.send();


Si desea enviar informacion con el metodo GET, agregue la informacion a la URL:

xmlhttp.open("GET","demo_get2.php?nombre=Henry&apellido=Ford",true);
xmlhttp.send();


Peticiones POST

Una simple peticion POST:

xmlhttp.open("POST","demo_post.php",true);
xmlhttp.send();

Para enviar datos como un formulario HTML, agregue un encabezado HTTP con setRequestHeader() y especificar los datos que desea enviar en el metodo send():

xmlhttp.open("POST","demo_post.php",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("nombre=Henry&apellido=Ford");


+----------------------------------+------------------------------------------------+
| Metodo                           | Descripcion                                    |
+----------------------------------+------------------------------------------------+
| setRequestHeader(cabecera,valor) | Agrega una cabecera HTTP a la peticion.        |
|                                  | Cabecera: especifica el nombre de la cabecera. |
|                                  | Valor: especifica el valor de la cabecera      |
+----------------------------------+------------------------------------------------+


La URL - un archivo en el servidor


El parametro URL del metodo open(), es una direccion a un archivo en el servidor:


xmlhttp.open("GET","ajax_prueba.php",true);


El archivo puede ser cualquier tipo de archivo como .txt o .xml o scripts de servidor tales como .asp o .php (que pueden realizar acciones en el servidor antes de enviar la respuesta de nuevo hacia atras).

¿Asincronico - verdadero o falso?

AJAX significa asynchronous javascript and xml, y para que el objeto XMLHttpRequest se comporte como AJAX, ha establecido el parametro del metodo open() de async en true:

xmlhttp.open("GET","ajax_prueba.php",true);

Enviar solicitudes asincronicas es una enorme mejora para desarrolladores web. Muchas de las tareas ejecutadas en el servidor son muy lentas. Antes AJAX, podia causar que la aplicacion se colgara y parará. Con AJAX, javascript no tiene que esperar la respuesta del servidor, pero puede en cambio:

* Ejecutar otros scripts esperando respuesta
* Lidiar con la respuesta cuando la respuesta este lista

Async=true

Cuando use async=true, especifica una funcion a ejecutar cuando la respuesta esta en el evento onreadystatechange:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<script type="text/javascript">
    function loadXMLDoc(){
        var xmlhttp;
        if(window.XMLHttpRequest){
            // codigo para IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }else{
            // codigo para IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("midiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","ajax_info.txt",true);
        xmlhttp.send();
    }

</script>
<body>
    <div id="midiv"><h2>Deja que AJAX cambie este texto</h2></div>
    <button type="button" onclick="loadXMLDoc()">Cambiar el contenido</button>
</body>
</html>


Async=false


Usar async=false, cambia el tercer parametro del metodo open() en false:


xmlhttp.open("GET","ajax_info.txt",false);


Usar async=false, no es recomendable pero para unas peticiones pequeñas esto puede ser aceptable. Recuerde que javascript no continuará ejecutandose, hasta que el servidor este listo. Si el servidor esta ocupado o lento, la solicitud se parará o colgará.
Nota: cuando usted use async=false, no escriba una funcion onreadystatechange, solo ponga el codigo despues de la declaracion send().


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript">
        function loadXMLDoc(){
            var xmlhttp;
            if(window.XMLHttpRequest){
                // codigo para IE7+, firefox, chrome, opera, safari
                xmlhttp = new XMLHttpRequest();
            }else{
                // codigo para IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","ajax_info.txt",false);
            xmlhttp.send();
            document.getElementById("midiv").innerHTML = xmlhttp.responseText;
        }
    </script>
</head>
<body>
    <div id="midiv">
        <h2>Deja que AJAX cambie este texto</h2>
        <button type="button" onclick="loadXMLDoc()">Cambiar el contenido</button>
    </div>
</body>
</html>



AJAX - respuesta del servidor


Para obtener la respuesta de un servidor, utilice la propiedad responseText o responseXML del objeto XMLHttpRequest.


+--------------+------------------------------------------------+
| Propiedad    | Descripcion                                    |
+--------------+------------------------------------------------+
| responseText | obtiene los datos de respuesta como una cadena |
+--------------+------------------------------------------------+
| responseXML  | obtiene los datos de respuesta como datos XML  |
+--------------+------------------------------------------------+


La propiedad responseText


Si la respuesta del servidor no es XML, utilice la propiedad responseText. La propiedad responseText devuelve la respuesta como una cadena, y se puede utilizar por consiguiente:

document.getElementById("midiv").innerHTML=xmlhttp.responseText;

La propiedad responseXML

Si la respuesta del servidor es XML y desea analizar como un objeto XML, utilice la propiedad responseXML:

Ejemplo

Solicitar el archivo cd_catalog.xml y analizar la respuesta:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript">
        function loadXMLDoc(){
            var xmlhttp;
            var txt, x, i;
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    xmlDoc = xmlhttp.responseXML;
                    txt="";
                    x=xmlDoc.getElementsByTagName("ARTIST");
                    for(i=0;i<x.length;i++){
                        txt= txt + x[i].childNodes[0].nodeValue + "<br>";
                    }
                    document.getElementById("midiv").innerHTML=txt;
                }
            }
            xmlhttp.open("GET","cd_catalog.xml",true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <h2>Mi coleccion de CD's:</h2>
    <div id="midiv"></div>
    <button type="button" onclick="loadXMLDoc()">Obtener mi coleccion de CD's</button>
</body>
</html>


AJAX - el evento onreadystatechange

Cuando se envia una solicitud a un servidor, queremos realizar algunas acciones basados en las respuestas. El evento onreadystatechange se activa cada vez que readyState cambia. La propiedad readyState tiene el status de XMLHttpRequest. Tres importantes propiedades del objeto XMLHttpRequest:



+--------------------+------------------------------------------------------------------------+
| Propiedad          | Descripcion                                                            |
+--------------------+------------------------------------------------------------------------+
| onreadystatechange | almacena una funcion (o el nombre de la funcion) que se                |
|                    | llama automaticamente cada vez los cambios de la propiedad readyState. |
+--------------------+------------------------------------------------------------------------+
| readyState         | Tiene la condicion de XMLHttpRequest. Cambia desde el 0 al 4:          |
|                    | 0: peticion no inicializada                                            |
|                    | 1: conexion de servidor establecido                                    |
|                    | 2: solicitud recibida                                                  |
|                    | 3: proceso de solicitud                                                |
|                    | 4: acabado de peticion y respuesta lista                               |
+--------------------+------------------------------------------------------------------------+
| status             | 200: "OK"                                                              |
|                    | 404: Page not found                                                    |
+--------------------+------------------------------------------------------------------------+




Ejemplo:


xmlhttp.onreadystatechange=function{
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("midiv").innerHTML=xmlhttp.responseText;
}
}


Nota: El evento onreadystatechange se dispara cinco veces (0-4), una vez para cada cambio de readyState.


Usando una funcion de devolucion de llamada (callback)


Una funcion callback es una funcion que se pasa como parametro a otra funcion. Si tienes mas de una tarea AJAX en tu web, debe crear una funcion estandar para crear el objeto XMLHttpRequest y llamar a esta para cada tarea de AJAX. La llamada de funcion debe contener la direccion URL y qué hacer en onreadystatechange (que es probablemente diferente para cada llamada):

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript">
        var xmlhttp;
        function loadXMLDoc(url,cfunc){
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=cfunc;
            xmlhttp.open("GET",url,true);
            xmlhttp.send();
        }

        function myFunction(){
            loadXMLDoc("ajax_info.txt",function(){
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            });
        }
    </script>
</head>
<body>
    <div id="myDiv"><h2>Dejar que AJAX cambie este texto</h2></div>
    <button type="button" onclick="myFunction()">Cambiar el contenido</button>
</body>
</html>


AJAX y PHP

AJAX es utilizado para crear aplicaciones mas interactivas.

AJAX PHP Ejemplo


El siguiente ejemplo demostrará como una pagina puede comunicarse con un servidor web solo tecleando caracteres en un campo de entrada:

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_suggest_php

Cuando el usuario escribe un caracter en el campo de entrada se ejecuta una funcion llamada "showHint()", la funcion se activa en el evento onkeyup. Aqui esta el codigo HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript">
        function showHint(str){
            if(str.length==0){
                document.getElementById("txtHint").innerHTML="";
                return;
            }else{
                var xmlhttp=new XMLHttpRequest();
                xmlhttp.onreadystatechange=function(){
                    if(xmlhttp.readyState==4 && xmlhttp.status==200){
                        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","gethint.php?q="+str,true);
                xmlhttp.send();
            }
        }
    </script>
</head>
<body>
    <p><b>Comienza a teclear un nombre en el campo de entrada de abajo:</b></p>
    <form action="">
        Primer nombre: <input type="text" id="txt1" onkeyup="showHint(this.value)">
    </form>
    <p>Sugerencias: <span id="txtHint"></span></p>
</body>
</html>


Explicacion del codigo:

En primer lugar, comprobamos si el campo de entrada esta vacio (str.length == 0). Si es asi, dejamos en blanco el contenido del marcador txtHint (el span) y salimos de la funcion. Sin embargo, si el campo no esta vacio, hará lo siguiente:

* Crear un objeto XMLHttpRequest
* Crear una funcion a ejecutar cuando la respuesta del servidor esta lista
* Enviar la solicitud a un archivo PHP (gethint.php) en el servidor
* Observe que el parametro q es agregado gethint.php?q="+str
* La variable str tiene el contenido del campo de entrada

El archivo gethint.php

El archivo PHP comprueba una serie de nombres y devuelve el nombre correspondiente al navegador:

<?php
    // array con nombres
    $a[] = "Anna";
    $a[] = "Brittany";
    $a[] = "Cinderella";
    $a[] = "Diana";
    $a[] = "Eva";
    $a[] = "Fiona";
    $a[] = "Gunda";
    $a[] = "Hege";
    $a[] = "Inga";
    $a[] = "Johanna";
    $a[] = "Kitty";
    $a[] = "Linda";
    $a[] = "Nina";
    $a[] = "Ophelia";
    $a[] = "Petunia";
    $a[] = "Amanda";
    $a[] = "Raquel";
    $a[] = "Cindy";
    $a[] = "Doris";
    $a[] = "Eve";
    $a[] = "Evita";
    $a[] = "Sunniva";
    $a[] = "Tove";
    $a[] = "Unni";
    $a[] = "Violet";
    $a[] = "Liza";
    $a[] = "Elizabeth";
    $a[] = "Ellen";
    $a[] = "Wenche";
    $a[] = "Vicky";

    // obtenemos el parametro q de la url
    $q = $_GET['q'];
    $hint='';

    // buscamos todas las sugerencias en el array si $q es diferente de ""
    if($q !== ''){
        $q = strtolower($q);
        $len = strlen($q);
        foreach($a as $name){
            if(stristr($q,substr($name, 0, $len))){
                if($hint === ''){
                    $hint = $name;
                }else{
                    $hint .= ", $name";
                }
            }
        }
    }

    // Mostramos "no hay sugerencias" si no se encontro ningun hint o una salida con valores correctos
    echo $hint === '' ? 'No hay sugerencias' : $hint;
?>


 
Hasta aqui este minitutorial de AJAX, el cual fue una traduccion de W3schools






No hay comentarios:

Publicar un comentario en la entrada