AJAX. Establecer conexiones por el puerto http con el objeto XMLHTTP

 
El comúnmente conocido AJAX, se basa en la herramienta XMLHTTP que comenzó siendo un objeto de las librerías ActiveX al que se podía llamar desde IE, y que ahora implementan la mayoría de los exploradores.

Esta herramienta, permite realizar peticiones a servidores web, lo que la hace muy útil en caso de que se desee recoger datos del servidor con javascript sin actualizar la página de nuevo. Por ejemplo, si alguien selecciona un país en un formulario, se podría hacer una petición con la herramienta XMLHTTP al servidor, para poder cargar las opciones de las diferentes provincias. Además si el archivo está estructurado con el estándar XML esta herramienta también permite trabajar con sus partes.

Recordar, que por seguridad este objeto está configurado en los navegadores, para que sólo se puedan hacer peticiones a archivos del mismo servidor, que el archivo donde se encuentra el script, por lo que no se podrán hacer peticiones a archivos de otras webs. Sin embargo ejecutado desde local, si se pueden hacer peticiones a la web que se desee en algunos navegadores, en otros, para ver el ejemplo en local, además de guardar el código, habría que descargarse el archivo "fichero_txt.txt" y guardarlo en local junto al HTML con el código, reemplazando "http://www.mcanam.com/articulos/ejemplosjs/fichero_txt.txt" por "fichero_txt.txt".

La función de ejemplo, muestra el contenido de un archivo de demostración (http://www.mcanam.com/articulos/ejemplosjs/fichero_txt.txt) y muestra su contenido en un alert, aunque se podría hacer con él lo que se quisiera, como cortarlo, o buscar partes. Esto se debería de hacer en la parte donde se comenta.
También muestra el estado en cada momento en una capa (dvEstado), en caso de que se descomente.

El fichero de ejemplo, es un txt, aunque podría ser cualquier tipo de archivo, incluso se podría llamar a un archivo de ejecución de servidor, pasándole parámetros, por ejemplo "provincias.php?id=28" ó "datos.asp?a=345".

A continuación se muestran los métodos, eventos y propiedades de este objeto:

Métodos
abort()

Abortará el envío / recepción de datos.
Ejemplo:
(En el primer if de la función "recoger_fichero")
if (objXmlhttp.readyState == 1){
    // AQUÍ: acciones en el "establecimiento" de la conexión
    document.getElementById("dvEstado").innerHTML = "Estableciendo conexión";
    window.status = "Estableciendo conexión";
    // Esto evitará que llegue a cargarse
    objXmlhttp.abort();
} else if (objXmlhttp.readyState == 2){
........

getAllResponseHeaders()

Da la información de las cabeceras enviadas por el servidor como la versión de este, el tipo de documento, etc.
Ejemplo:
alert (objXmlhttp.getAllResponseHeaders());

getResponseHeader(sCabecera)

Da el valor de una cabecera pasada. Posibles valores para sCabecera pueden ser "Server", "X-powered-by", "Content-type", ...
Ejemplo:
sVariable = "Servidor: " + objXmlhttp.getResponseHeader("Server") + "\n" +
             "Tipo de contenido: " + objXmlhttp.getResponseHeader("Content-type");
alert(sVariable);

open(sMetodo, sDireccion, [bAsincrono], [sUsuario], [sContraseña])

Inicializa la conexión XMLHTTP, recibe:
- sMetodo: El método por el que se conectará con la dirección pasada, que puede ser GET (una conexión normal), POST (Como por ejemplo un envío de formulario), PUT (Se utiliza para enviar datos al servidor), etc.
- sDireccion: La dirección url con la que se quiera realizar la conexión.
- bAsincrono: (booleano, opcional) Por defecto es true, establece si el foco se devolverá inmediatamente (true), o si se devolverá una vez se halla completado el envío.
- sUsuario / sContraseña: (opcionales) Si la petición necesita de validación de usuario, se pueden pasar con estos dos parámetros.

send([sCuerpo])

Envía la solicitud al servidor. Puede enviar datos en caso de que el método lo permita como PUT (en este caso se enviaría el texto del archivo a subir)

setRequestHeader(sCabecera, sValor)

Con este método se establecen las cabeceras. Se deben de enviar después del método open() y antes del método send()
Ejemplo:
// Pasa el tipo de contenido que enviamos en el send, en este caso formulario binario
objXmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// Pasa el lenguaje, en este caso español
objXmlhttp.setRequestHeader ("Accept-Language", "sp");

Eventos
onreadystatechange

Cada vez que el estado de la transmisión de datos cambie, este evento saltará.

onabort

(Versión 2) este evento saltará cuando la conexión sea interrumpida, antes de terminar las transacciones.

onload

(Versión 2) este evento saltará cuando se complete la carga.

onloadstart

(Versión 2) este evento saltará cuando se inicie el envio de datos.

onprogress

(Versión 2) este evento salta periodicamente, mientras se realiza la conexión.

Propiedades

readyState

Devuelve el estado de la transmisión. Sus posibles valores pueden ser:
0El objeto ha sido creado pero no inicializado.
1El objeto ha sido creado pero no se han enviado datos (con el método send).
2Se han enviado datos, pero todavía no se han recibido respuestas.
3Se estan recibiendo datos
4Se ha terminado de recibir todos los datos.

responseBody

Devuelve el cuerpo de la respuesta en forma de matriz de bytes sin signo, debido a la gran dificultad de usar binarios con JavaScript recomendamos no usarlo.

responseStream

Devuelve el cuerpo de la respuesta en forma de objeto Stream de ADO. Al devolver datos binarios recomendamos no usarlo tampoco en JavaScript.

responseText

Devuelve el cuerpo de la respuesta en forma de texto.

responseXML

Devuelve el cuerpo de la respuesta en forma de objeto XML.
Ejemplo:
//Se llama a una función recursiva que presenta los nombres de todos los nodos:
recorrer_nodos(objXmlhttp.responseXML.childNodes);

// La función sería:
function recorrer_nodos(objXML){
    for (var cont = 0 ; cont < objXML.length ; cont++){
        if (objXML(cont).childNodes.length > 0){
            document.write (objXML(cont).nodeName + "<br />" + "<blockquote>");
            recorrer_nodos(objXML(cont).childNodes);
        }else{
            document.write (objXML(cont).nodeName + "<br />");
        }
    }
    
    document.write ("</blockquote>");
    
}

status / statusText

Devuelven el código o el texto descriptivo del estado de la transmisión de datos devuelto por el servidor, que pueden ser:
statusstatusText
100Continue
101Switching protocols
200OK
201Created
202Accepted
203Non-Authoritative Information
204No Content
205Reset Content
206Partial Content
300Multiple Choices
301Moved Permanently
302Found
303See Other
304Not Modified
305Use Proxy
307Temporary Redirect
400Bad Request
401Unauthorized
402Payment Required
403Forbidden
404Not Found
405Method Not Allowed
406Not Acceptable
407Proxy Authentication Required
408Request Timeout
409Conflict
410Gone
411Length Required
412Precondition Failed
413Request Entity Too Large
414Request-URI Too Long
415Unsupported Media Type
416Requested Range Not Suitable
417Expectation Failed
500Internal Server Error
501Not Implemented
502Bad Gateway
503Service Unavailable
504Gateway Timeout
505HTTP Version Not Supported



En el HEAD:
<script language="javascript">
// Su explorador no soporta java o lo tiene deshabilitado; esta pagina necesita javascript para funcionar correctamente<!--
// Copyright © McAnam.com
// http://www.mcanam.com/articulos/JavaScript.php?id=22


    // Se carga el objeto XMLHTTP
    var objXmlhttp;
    
    if (window.XMLHttpRequest)
    {
        
        // El explorador contiene el objeto nativamente
        objXmlhttp = new XMLHttpRequest();
        
    } else if (window.ActiveXObject){
        
        // El explorador permite acceder a los objetos ActiveX (Microsoft)
        try {
            // Se intenta acceder a la versión mas reciente
            objXmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
        } catch (e) {
            try {
                // Se intenta acceder a la versión mas antigua
                objXmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
        
    }
    
    if (!objXmlhttp)
        alert("No ha sido posible crear una instancia de XMLHttpRequest");
  
    
    function abrir_fichero(direccion){
        
        objXmlhttp.open("GET", direccion, true);
        
        // Se llama a la función encargada de tratar los datos
        objXmlhttp.onreadystatechange = recoger_fichero;
        
        objXmlhttp.send();
        
    }
    
    function recoger_fichero(){
        
        if (objXmlhttp.readyState == 1){
            // AQUÍ: acciones en el "establecimiento" de la conexión
            // document.getElementById("dvEstado").innerHTML = "Estableciendo conexión";
            window.status = "Estableciendo conexión";
        } else if (objXmlhttp.readyState == 2){
            // AQUÍ: acciones cuando se establece la conexión
            // document.getElementById("dvEstado").innerHTML = "Conexión establecida";
            window.status = "Conexión establecida";
        } else if (objXmlhttp.readyState == 3){
            // AQUÍ: acciones cuando se realiza la transferencia de datos
            // document.getElementById("dvEstado").innerHTML = "Transmitiendo datos";
            // window.status = "Transmitiendo datos";
        } else if (objXmlhttp.readyState == 4){
            // AQUÍ: acciones cuando se han enviado los datos
            // document.getElementById("dvEstado").innerHTML = "Página cargada correctamente";
            // window.status = "Página cargada correctamente";
            
            /*
                Aquí es donde podemos trabajar con la página
                y poner nuestro códigos como los ejemplos de
                este artículo.
                Por ejemplo pintamos la página:
            */
            
            alert(objXmlhttp.responseText);
            
        }
        
    }
    
//-->
</script>

En el BODY:
<div name="dvEstado" id="dvEstado"> - </div>
<input type="button" value="Abrir fichero" onclick="abrir_fichero('http://www.mcanam.com/articulos/ejemplosjs/fichero_txt.txt')" />

Links relacionados:
Leer líneas de un archivo con la función file en PHP
Abrir una ventana nueva
Cookies, crear cookies, ver valores de las cookies
Ir a una dirección al seleccionar en un combo
Redireccionar a otra página con HTML
Métodos de conexión HTTP


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com