Tecnica de desarrollo AJAX

 técnica de desarrollo web para crear aplicaciones interactivas

AJAX

JavaScript Asíncrono y XML (AJAX) no es una tecnología por sí misma, es un término que describe un nuevo modo de utilizar conjuntamente varias tecnologías existentes. Esto incluye:HTML o XHTML, CSS, JavaScript, DOM, XML, XSLT, y el objeto XMLHttpRequest. Cuando estas tecnologías se combinan en un modelo AJAX, es posible lograr aplicaciones web capaces de actualizarse continuamente sin tener que volver a cargar la página completa. Esto crea aplicaciones más rápidas y con mejor respuesta a las acciones del usuario. from MDN

Primeros pasos con AJAX

Este artículo te guiará por los conceptos básicos de AJAX y te proporcionará un ejemplo práctico para que empieces practicando.El ejemplo esta escrito en el lenguaje de programación Dart de Google.

Las capacidades que en cuestión que ofrece AJAX son:

• La posibilidad de hacer peticiones al servidor sin tener que volver a cargar la página.
• La posibilidad de analizar y trabajar con documentos XML.

¿Que es un servidor HTTP?

 servidor HTTP es un programa informático que procesa una aplicación del lado del servidor realizando conexiones bidireccionales y/o unidireccionales y síncronas o asíncronas con el cliente generando o cediendo una respuesta en cualquier lenguaje o Aplicación del lado del cliente. El código recibido por el cliente suele ser compilado y ejecutado por un navegador web. Para la transmisión de todos estos datos suele utilizarse algún protocolo. Generalmente se utiliza el protocolo HTTP para estas comunicaciones.

http://es.wikipedia.org/wiki/Servidor_web

Primer Paso – Cómo realizar una petición HTTP al servidor

Para realizar una petición HTTP usando Dart, es necesario crear una instancia de una clase que provea esta funcionalidad. Esta clase fue inicialmente introducida en Internet Explorer como un objeto ActiveX, llamado XMLHTTP. Después Mozilla, Safari y otros navegadores lo siguieron, implementando una clase XMLHttpRequest que soportaba los métodos y las propiedades del objeto ActiveX original.

Para crear una instancia de la clase en  Dart , es necesario poner:

  //instancia de la clase XMLHttpRequest
  XMLHttpRequest req = new XMLHttpRequest();

 Algunas versiones de los navegadores Mozilla no funcionan correctamente si la respuesta del servidor no tiene la cabecera mime de tipo XML.

¿Que es una cabecera mime?

MIME es un estándar que clasifica los recursos y provee información (a los programas) acerca de cómo manejarlos. Esto permite la correcta manipulación e interpretación de diferentes tipos de archivos por parte de los programas (como navegadores). Por ejemplo, gracias a MIME, los navegadores pueden abrir correctamente un archivo ".txt" como un recurso de texto plano y no como un video u otro tipo.


Para solucionar esto vamos a usar un método extra que sobreescriba la cabecera enviada por el servidor, en caso que no sea text/xml.

  //método extra que sobrescribe la cabecera enviada por el servidor, 
  //en caso que no sea text/xml.
    req.overrideMimeType('text/xml');

El próximo paso es decidir qué se hará después de recibir la respuesta del servidor a la petición enviada. A estas alturas sólo es necesario decirle al objeto HTTPrequest qué función de Dart se encargará de procesar la respuesta. Para esto se asigna la propiedad onreadystatechange del objeto al nombre de la función de Dart que se va a utilizar:

 //función de Dart  que se encargará de procesar la respuesta
   req.on.readyStateChange.add((e) {
     procesarRespuesta();
   });

Hasta aquí no se ha especificado aun que pasara al recibir la respuesta esto se realizara mas adelante.Ahora lo que sigue es  hacer la petición. Para esto se utilizan los métodos open() y send() de la clase HTTPrequest.

//Realizar peticion
    req.open("GET","https://graph.facebook.com/100001685098068", true);
    req.send(null);

• El primer parámetro de la llamada a open() es el método HTTP request – GET, POST, HEAD o cualquier otro método que se quiera usar y sea aceptado por el servidor. El nombre del método se escribe en mayúsculas, sino algunos navegadores (como Firefox) podrían no procesar la petición. Para más información sobre los métodos HTTP request visitar W3C specs
• El segundo parámetro es el URL de la página que se esta pidiendo. Por medida de seguridad no es posible llamar páginas en dominios de terceras personas. Se debe saber el dominio exacto de todas las páginas o se obtendrá un error de 'permiso denegado' al llamar open(). Una falla común es acceder al sitio por domain.tld e intentar llamar las páginas como www.domain.tld.
  En este ejemplo he usado como URL :
                   https://graph.facebook.com/100001685098068
  
  Facebook nos ha sorprendido con un cambio radical que vuelve a demostrar porque son la red social numero 1 del mundo. Se trata de una nueva API de integración: Facebook Open Graph, que ha cambiado totalmente la forma con la que podremos interactuar con Facebook a partir de ahora. Se trata de un cambio drástico, que no tiene nada que ver con como se trabajaba hasta ahora con Facebook y que viene a sustituir más que nada al ya instaurado aunque siempre incomodo Facebook Connect.
  Sin duda estamos a punto de ver como muchas nuevas web se lanzan a conectarse con Facebook ya que este ha pasado a dar soluciones a todos los niveles: desde los añadidos más básicos hasta complejas integraciones con las webs.
  Este cambio es básicamente un sistema mucho más intuitivo y fácil por el que Facebook pasa a trasmitir sus datos y por el que podemos enviárselos. La Graph API representa la información de Facebook de una forma organizada donde existen tipos de elementos con información que los compone (usuarios, posts, fotos, eventos, etc.) y conexiones entre todos ellos (amigos, feed, fotos y albumes, etc.). Facebook a adoptado el modelo de datos Json y ha pasado a generar las peticiones mediante URLs muy simples.
  para mas informacion acerca de la Grap API consulte  documentación Graph API
  El tercer parámetro establece si la petición es asíncrona. Si se define TRUE, la ejecución de la función de JavaScript continuará aún cuando la respuesta del servidor no haya llegado. Por esta capacidad es la A en AJAX.
  
  
• El tercer parámetro establece si la petición es asíncrona. Si se define TRUE, la ejecución de la función de Dart continuará aún cuando la respuesta del servidor no haya llegado. este es una capacidad de AJAX.

El parámetro en el método send()puede ser cualquier información que se quiera enviar al servidor si se usa POST para la petición. La información se debe enviar en forma de cadena, por ejemplo:

name=value&anothername=othervalue&so=on

Si se quiere enviar información de esta forma, es necesario cambiar el tipo MIME de la petición usando la siguiente línea:

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

De otro modo el servidor descartará la información.

Segundo Paso – Procesando la respuesta del servidor

A continuación se implementara el metodo que procesa la respuesta del servidor. En primer lugar necesita revisar el estado de la petición. Si el estado tiene el valor 4, significa que la respuesta completa del servidor ha sido recibida y es posible continuar procesándola.

//Metodo que procesa la respuesta del servidor
  void procesarRespuesta() {
   //Estado de la peticion
    if (req.readyState == 4) {
      // todo va bien, respuesta recibida      
    }      
    else {
     // aun no esta listo
    }
    
  }

La lista completa de valores para la propiedad readyState es:

• 0 (no inicializada)
• 1 (leyendo)
• 2 (leido)
• 3 (interactiva)
• 4 (completo)

(Source)

Ahora es necesario revisar el código de status de la respuesta HTTP. La lista completa de códigos aparece en el sitio de la W3C. Para el próposito de este artículo sólo es importante el código 200 OK.

if (req.status == 200) {
    // perfecto!
} else {
    // hubo algún problema con la petición,
    // por ejemplo código de respuesta 
    // 404 (Archivo no encontrado)
    // o 500 (Internal Server Error)
}

Después de haber revisado el estado de la petición y el código de status de la respuesta, depende de uno hacer cualquier cosa con la información que el servidor ha entregado. Existen dos opciones para tener acceso a esa información:

• req.responseText – regresará la respuesta del servidor como una cadena de texto.
• req.responseXML – regresará la respuesta del servidor como un objeto XMLDocument que se puede recorrer usando las funciones de  DOM

Tercer Paso – "¡Ahora todo junto!" - Un sencillo ejemplo

En este ejemplo se utilizará todo lo que se ha visto para hacer una petición HTTP. Se pedirá la información publica de un usuario de Facebook y después usaremos la función alert() con el contenido de la respuesta.

#import('dart:html');

class EjemploAjax {
     
  
  XMLHttpRequest req;
  
  //Metodo constructor
  EjemploAjax() {
    
  }

  void getRecurso() {
    //Crear instancia de la clase XMLHttpRequest
    req = new XMLHttpRequest(); 
       
   //método extra que sobrescribe la cabecera enviada por
   //el servidor en caso que no sea text/xml.
    req.overrideMimeType('text/xml');   
    
    //función de Dart  que se encargará de procesar la respuesta
    req.on.readyStateChange.add((e) {
      procesarRespuesta();
    });
    
    //Realizar peticion
    req.open("GET","https://graph.facebook.com/emch91", true);
    req.send(null);
  }
  
  //Metodo que procesa la respuesta del servidor
  void procesarRespuesta() {
   //Estado de la peticion
    if (req.readyState == 4) {
      // todo va bien, respuesta recibida
      if (req.status == 200) {
         //mostrar resultado
         document.window.alert(req.responseText);
      } else {
        // hubo algún problema con la petición,
        // por ejemplo código de respuesta 404 (Archivo no encontrado)
        // o 500 (Internal Server Error)
        document.window.alert(req.responseText); //Mostrar error
      }
     } else {
     // aun no esta listo
    }
    
  }

}

//Metodo principal de la aplicacion
void main() {
EjemploAjax ejemplo = new EjemploAjax();

//llamar metodo que obtiene el recurso del servidor
ejemplo.getRecurso();  
}

Cuarto Capturas de pantalla

Editor Dart:

Compilación y salida: 

Dart nuevo lenguaje de programacion

¿Que es Dart?

Desde prototipos rápidos hasta aplicaciones importantes.

Es un lenguaje orientado a objetos, diseñado para utilizarse tanto para pequeños proyectos como para el desarrollo de aplicaciones Web de mayor escala. 

Después de meses de desarrollo, Google presenta en sociedad a Dart, su nuevo lenguaje de programación para construir aplicaciones web con mayor simplicidad, rapidez y escalabilidad. En palabras de Google, Dart permitirá a los desarrolladores “crear una estructura de lenguaje flexible para programar”.

Un programa básico en Dart:

este código utiliza algunas de las caracterizticas mas basicas de Dart.

main() {
  // Variables y valores
  var numero = 42;
  var texto  = "El valor del numero es: ";

  // Salida por consola
  print("$texto $numero.");
}

//Salida por consola seria asi: 

El valor del numero es: 42.

Detalle del código: 

main()

La función main es imprescindible en el programa representa el punto de inicio de su ejecución.

var

La forma mas sencilla de declarar una variable.Ejemplo: // var edad = 18;

print()

una manera practica de imprimir la salida por consola.

Nota: para probar el  código básico lo puedes hacer en linea desde probar codigo live

escribe el programa básico en el editor y luego clic en el botón ejecutar para ver la salida.

captura de pantalla:

captura de pantalla después de compilar el código:

Variables:

He aquí un ejemplo de cómo crear una variable y asignarle un valor a la misma.

var saludo = 'Bienvenido a Dart';

Las variables son referencias. El nombre de la variable saludo contiene una referencia a un objeto String con un valor de "Bienvenido a Dart".

El nuevo lenguaje de programación de Google ya está disponible. “Dart consigue que escribas una aplicación web y la compiles para que funcione en cualquier navegador moderno.

Google ha creado un centro de recursos bajo el dominio Dartlang.org desde donde se podrá acceder a toda la información de este lenguaje de programación.