Introducción a Ajax

Introducción:
El siguiente tutorial proporcionará una breve introducción a Ajax y sus usos. Antes de comprender estos términos, vea algunos ejemplos prácticos para demostrar el poder de Ajax. Facebook, Instagram, Twitter, etc. se consideran la situación en la que se revisan las noticias y si le gusta una publicación, simplemente haga clic en el botón Me gusta y se agregará el conteo de Me gusta sin actualizar la página. Ahora imagine la situación, si se diera el caso, haga clic en el botón Me gusta y se cargaría nuevamente la página completa que realizará dichos procesos. Ahora la pregunta es si volver a hacer clic en el botón para una tarea tan pequeña que requiere la carga completa de una página web. Absolutamente no, porque nadie hará algo tan absurdo (en el último caso). Entonces significa que esta función de me gusta es muy útil ya que evita que se vuelva a cargar la página completa.
Considere otro caso cuando visite Google para buscar cualquier cosa. Por lo general, observe que cuando comience a escribir las palabras clave deseadas para buscar, observe que se presentan muchas sugerencias en la barra de búsqueda. Ahora bien, ¿de dónde vienen? Por supuesto que no desde el lado del cliente. Los resultados son nuevamente el poder de la comunicación con el servidor sin recargar la página nuevamente.
Así, hay decenas de ejemplos que se pueden considerar. Todo el poder que trabaja detrás no es más que Ajax. Analicemos brevemente Ajax y su implementación.

¿Qué es Ajax?
Ajax es un acrónimo de Asynchronous Javascript and XML. Se utiliza para comunicarse con el servidor sin actualizar la página web y, por lo tanto, aumentar la experiencia del usuario y mejorar el rendimiento.

Requisitos previos:
No se requieren tales requisitos previos para comprender la última parte del artículo. Solo los conocimientos básicos de HTML, CSS y Javascript son buenos para comenzar.

¿Como funciona?
Primero, comprendamos qué significa realmente asincrónico. Hay dos tipos de requests sincrónicas y asincrónicas. Las requests sincrónicas son las que siguen secuencialmente, es decir, si un proceso está en curso y al mismo tiempo otro proceso quiere ejecutarse, no se permitirá, lo que significa que solo se ejecutará un proceso a la vez. Esto no es bueno porque en este tipo, la CPU permanece inactiva la mayor parte del tiempo, como durante la operación de E/S en el proceso, que es un orden de magnitud más lento que la CPU que procesa las instrucciones. Por lo tanto, para aprovechar al máximo la CPU y otros recursos, utilice llamadas asíncronas. Para más información visita este enlace. Por qué la palabra javascript está presente aquí. En realidad, las requests se realizan mediante el uso de funciones de javascript. Ahora el término XML que se usa para crear el objeto XMLHttpRequest .
Por lo tanto, el resumen de la explicación anterior es que Ajax permite que las páginas web se actualicen de forma asíncrona mediante el intercambio de pequeñas cantidades de datos con el servidor en segundo plano. Ahora discuta la parte importante y su implementación. Para implementar Ajax, solo tenga en cuenta el objeto XMLHttpRequest. Ahora, lo que realmente es. Es un objeto utilizado para intercambiar datos con el servidor detrás de escena. Trate de recordar el paradigma de OOP que dice que el objeto se comunica a través de métodos de llamada (o en sentido general, paso de mensajes). El mismo caso se aplica aquí también. Por lo general, cree este objeto y utilícelo para llamar a los métodos que dan como resultado una comunicación efectiva. Todos los navegadores modernos admiten el objeto XMLHttpRequest.

Sintaxis básica: la sintaxis para crear el objeto se proporciona a continuación .

req = new XMLHttpRequest();

Hay dos tipos de métodos open() y send(). Los usos de estos métodos se explican a continuación.

req.open("GET", "abc.php", true);
req.send();

Las dos líneas anteriores describen los dos métodos. req representa la solicitud, es básicamente una variable de referencia. El parámetro GET es, como de costumbre, uno de los dos tipos de métodos para enviar la solicitud. Use POST también dependiendo de si envía los datos a través del método POST o GET. El segundo parámetro es el nombre del archivo que realmente maneja las requests y las procesa. El tercer parámetro es verdadero, indica si las requests se procesan de forma asíncrona o síncrona. Es verdadero de forma predeterminada, lo que significa que las requests son asíncronas. El método open() prepara la solicitud antes de enviarla al servidor. El método de envío se utiliza para enviar la solicitud al servidor.
Envío del parámetro mediante obtención o solicitud POST. La sintaxis se da a continuación.

req.open("GET", "abc.php?x=25", true);
req.send();

En las líneas de código anteriores, la consulta especificada en forma de URL seguida de ? que es seguido por el nombre de la variable luego = y luego el valor correspondiente. Si envía dos o más variables, use el signo ampersand (&) entre las dos variables. El método anterior, como se muestra, se aplica a la solicitud GET. Enviando los datos a través de POST, luego envíelos en el método de envío como se muestra a continuación.

req.send("name=johndoe&marks=99");

.

Uso del método setRequestHeader() como se muestra a continuación.

req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Eventos y mecanismo de manejo:
cualquier acción que se realice al hacer clic en el botón, pasar el mouse sobre los elementos, cargar la página, etc., se denominan eventos. También consciente del hecho de que javascript puede detectar eventos. Así que vincule el código del evento específico con su acción que puede implementarse mediante javascript. Estos son básicamente controladores de eventos.
Implementar controladores de eventos que realmente contienen los eventos. Los controladores de eventos son básicamente funciones escritas en javascript que actúan o se activan cuando el usuario activa un evento. Al enviar la solicitud a través del método de envío, generalmente se obtiene la respuesta del servidor más tarde. Pero no se conoce la obtención del tiempo de respuesta. Así que síguelo.
Por lo tanto, para realizar un seguimiento de la respuesta en el evento readystatechange que se vincula con el controlador de eventos (función) que se ejecutará cuando llegue una respuesta.
Cuando se envía una solicitud al servidor, realice acciones en función de la respuesta. El evento onreadystatechange se activa cada vez que cambia readyState. Entonces, ¿qué es realmente un estado listo y cuándo ocurrirá realmente el evento onreadystate y cuántas veces ocurrirá entre la solicitud y la respuesta?
El objeto XMLHttpRequest tiene una propiedad llamada readyState cuyo valor cambia en el viaje completo de solicitud-respuesta, es decir, cuando se prepara, envía, resuelve, procesa una solicitud y cuando llega la respuesta. Por eso se llama os onreadystatechange.
onreadystatechange almacena una función (o el nombre de la función) para que se llame automáticamente cada vez que cambie la propiedad readyState.
readyState tiene diferentes valores que van de 0 a 4.

1. solicitud no inicializada
2. conexión del servidor establecida
3. Solicitud recibida
4. solicitud de procesamiento
5. solicitud terminada y respuesta lista

XMLHttpRequest también tiene una propiedad llamada estado. El estado tiene los siguientes valores

• 200: «Está bien»
• 404 Pagina no encontrada»

Ahora recuerde siempre que cuando readyState es 4 y el estado es 200, la respuesta está lista.
Todo lo descrito anteriormente se implementa en la codificación como se indica a continuación

<p id = "dis">< /p>
req.onreadystatechange = function(){
  if(req.readyState == 4 && req.status == 200){
      document.getElementById("dis").innerHTML = req.responseText;
  }
}

(Nota: esta es solo una sección del código y, además, describe la comunicación entre el cliente y el servidor, por lo que el código descrito anteriormente no mostrará ningún efecto si se ejecuta en IDE)
En el código anterior, si la condición es verdadera (es decir, la respuesta está lista) luego se muestra el resultado.
ventajas:

1. La velocidad se mejora ya que no es necesario volver a cargar la página.
2. AJAX realiza llamadas asincrónicas a un servidor web, lo que significa que los navegadores de los clientes evitan esperar a que lleguen todos los datos antes de comenzar a renderizar.
3. La validación del formulario se puede hacer con éxito a través de él.
4. Utilización del ancho de banda: ahorra memoria cuando los datos se obtienen de la misma página.
5. Más interactivo.

Desventajas:

1. Ajax depende de Javascript. Si hay algún problema de Javascript con el navegador o en el sistema operativo, Ajax no será compatible.
2. Ajax puede ser problemático en los motores de búsqueda ya que usa Javascript para la mayoría de sus partes.
3. El código fuente escrito en AJAX es fácilmente legible por humanos. Habrá algunos problemas de seguridad en Ajax.
4. La depuración es difícil.
5. Problema con el botón de retroceso del navegador al usar páginas habilitadas para AJAX.