Nivel 1 JS

Propiedades

AJAX (Asynchronous JavaScript and XML)

Se trata de un conjunto de técnicas de desarrollo web que permiten que las aplicaciones web funcionen de forma asíncrona, procesando cualquier solicitud al servidor en segundo plano, por lo tanto "ajax" no es una tecnología en sí misma, sino más bien un concepto de programación, la cual permite que los sitios web carguen contenido en la pantalla sin tener que actualizar la página.

Objeto XMLHttpRequest

Se trata de un objeto nativo JavaScript, especializado en realizar peticiones web, en otras palabras este objeto posee todos los métodos y propiedades para trabajar con las peticiones a un servidor o una base de datos.

Ejemplo

En sí este objeto posee multitud de métodos y propiedades, sin embargo limitándolo a un uso básico los principales métodos son:

.Open: Este método permite crear la petición, para lo cual necesita de dos datos, el primero corresponde al método de envío de esta (puede ser "GET" o "POST"), mientras que el segundo dato corresponde a la dirección en la que se encuentran los datos requeridos.
.Send: Este método realiza el envío de la petición previamente elaborada con el método ".open" y retorna el resultado.
.Response: Se trata del método reservado para obtener el retorno de la petición.

ReadyState

Se trata de un método que se utilizaba anteriormente para trabajar las peticiones, el cual se modifica según cuál sea el estado de la petición, su valor se divide entre cinco posibilidades, entre las cuales cada uno representa una etapa de la petición:

0: Este se trata del valor por defecto antes del envío de la solicitud
1: Este valor representa la primera etapa de la solicitud, en la cual la solicitud fue creada correctamente (método .open)
2: Este segundo valor y por lo tanto segunda etapa indica que la solicitud se envió correctamente.
3: Este tercer valor representa la tercera solicitud en la cual la solicitud se está procesando por el servidor o la base de datos
4: Este último valor representa que todo el proceso de la petición concluyó, que todo ha sido finalizado y ya se posee un resultado, esto sin importar si se retorna un error o el dato deseado, simplemente indica que se obtuvo un resultado sea cual sea este.

Para aprovechar este método el cual puede brindar información sobre la ejecución de la consulta, se utilizaba el evento "readystatechange", al cual se le puede inicializar un observador de eventos para evaluar la ejecución de cada una de las etapas, tal y como en el siguiente ejemplo:

Ejemplo

Resultado

En este ejemplo cada vez que el valor de la propiedad "ReadyState" cambie se detona el evento y se registra el cambio en pantalla.

Un aspecto a tener en cuenta de los estados de "ReadyState" es que en sus dos últimos valores (3 y 4) la data que está siendo solicitada se retorna como resultado, debido a esto se recomienda realizar validaciones para comprobar el estado de la solicitud, así como su correcta ejecución.

Nota: Actualmente este método no es utilizado para trabajar las consultas, debido a que ha quedado en desuso debido al surgimiento de opciones más simples y eficientes.

Load

Se trata del evento que reemplazó a "readystatechange" para detectar la ejecución de las peticiones JavaScript, esto ya que este evento posee mejores mecanismos para trabajar con los errores que pueden llegar a ocurrir en las peticiones.

Ejemplo

En este ejemplo se utiliza el evento "load" para hacer seguimiento de la petición, se utiliza el método ".status" para comprobar si la petición se realizó correctamente o surgió algún error, el evento "load" permite definir la respuesta que se disparará en caso de que surja un error en la petición, tal como en este ejemplo.

ActiveXObject("Microsoft.XMLHTTP")

Se trata del objeto dedicado para las peticiones de Internet Explorer en sus versiones antiguas, su funcionamiento, métodos y propiedades son iguales, simplemente su nombre es diferente, por ello se recomienda que se realice una comprobación según cuál sea el objeto existente en el navegador antes de realizar cualquier otra acción:

En este ejemplo se mantiene la estructura de ejemplos anteriores añadiendo una validación inicial para comprobar cuál es el objeto existente en el navegador: "XMLHttpRequest" (otros navegadores) o "ActiveXObject" (para Internet Explorer), seguido a eso se realiza la petición, se valida si se realizó correctamente o surgió un error y de último se deserealiza para poder obtener el objeto JSON con los datos.

Métodos GET y POST

Se tratan de dos de los principales métodos para el envío de datos en la web, pese a que ambos desempeñan la misma función poseen diversas diferencias entre ambos métodos, algunas de estas son:

Estas se tratan de algunas diferencias en general entre los métodos, sin embargo también posee ciertas diferencias prácticas entre ambos:

Envío de Datos GET

A continuación se muestra un ejemplo de petición utilizando el método "GET", en sí no se diferencia de los ejemplos anteriores, ya que este es el método más simple de los dos:
Envío de Datos POST

Por su parte el método "POST" ciertamente es un poco más complejo, por lo que para su funcionamiento es necesario realizar ciertos cambios:
1. Se reemplaza el método de "GET" a "POST" en el método ".open"
2. Se añade el método "setRequestHeader()", el cual recibe dos datos, los cuales son un conjunto de datos de tipo "nombre" valor, y corresponden al "encabezado", en este caso se usa "Content-type" y el valor de este (tipo de contenido), en este caso usado el "application/json;charset=UTF-8".
  
  En otras palabras en este caso el método "setRequestHeader" requiere que dentro de este se defina el tipo de contenido de la solicitud.
  
  Nota: Realmente este método puede aceptar muchos otros tipos de encabezados y valores para muchos otros usos, sin embargo estos son los correspondientes para el ejemplo.
3. Se añade el dato que será enviado dentro del método ".send" usando el método "JSON.stringify()" para serializar el objeto y adecuarlo para su envío.