4 - El objeto XMLHttpRequest

[editar]
Tutorial creado por Mononeurona. Extraido de: http://www.mononeurona.org/index.php?idp=547
27 de Octubre de 2005
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.
    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.
  • Métodos
    A continuación los métodos del objeto.
    • abort() : Detiene la petición en curso.
    • getAllResponseHeaders() : Devuelve todas 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( método, URL, asíncrona, usuario, password) : Abre una conexión con esa URL medianteel método (GET,POST,HEAD,POST 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,POST 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.
    • send( contenido) : Envía el contenido al servidor.
    • setRequestHeader( etiqueta,valor) : Establece el valor de una etiqueta de las cabeceras de petición.
  • Propiedades
    A continuación las propiedades del objeto.
    • onreadystatechange : Contiene el nombre de la función que se ejecuta cada vez que el estado de la conexión cambie.
    • 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



    • 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 : 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

    • statusText ; Mensaje de texto enviado por el servidor junto al código (status), para el caso de código 200 contendrá "OK".
[editar]

44 opiniones

ggg

ggggggg
ui

F
Sólo funcionaba la primera vez.

Este ejemplo sólo me funcionaba la primera vez que lo usaba, luego la consola de errores de javascript devolvía el error: "objetus is not a function". Para arreglarlo era necesario declarar en la función objetus la variable objetus como nula en primera línea de la misma. Var objetus = false;

pd: gracias, muy bueno el curso.
Refrescar con ajax.

Hola que tal como le harias si tienes que refrescar una pagina automáticamente con ajax. Gracias.
Recomendaciones.

Que tal, he visto que algunas personas tienen algunas dudas que son muy comunes. Primero me gustaria decir que el hecho de comenzar a aprender a utilizar ajax haciendolo todo tu mismo (la creacion del objeto xmlhttprequest, la recepcion de los valores, los codigos de error y estatus, etc. ) es muy bueno ya que cuando te encuentras problemas esto te puede ayudar a solucionarlos. Ahora bien con el tiempo se puede comenzar a utilizar algunas utilerias que te ayudan a desligarte de lo comentado anteriormente y enfocarte a tu propio codigo, estas utilerias (entre muchas otras) son prototype, jquery, script. Acul. Us, etc

finalmente lecomento a aquellas personas que desean algo mas grafico, pueden recurrir a jmaki, el cual es un plug in para netbeans el cual encapsula las funcionalidades de las utilerias antes mencionadas pero en un entorno mas grafico.
1 2 3 4 5 6 7 ... 9 | siguiente >

Tutoriales relacionados con 'Tutorial de AJAX (Asynchronous JavaScript + XML)'

Entiendase que AJAX no se refiere a usar el objeto XMLHttpRequest de manera indispensable porque... Más »

Autor y licencia de 'Tutorial de AJAX (Asynchronous JavaScript + XML)'


Tutorial de Mononeurona. Extraido de: http://www.mononeurona.org/index.php?idp=547 CopyLeft
Este trabajo está licenciado bajo la Creative Commons License. 1999-2005 © :: MonoNeurona.org ::
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.