Introducción a Ajax en ASP.NET

AJAX en ASP.NET se conoce como JavaScript asíncrono y XML. Se trata de actualizar las funciones de una página web, sin cargarla cada vez que abrimos la página web. Es una técnica utilizada para crear páginas web muy rápidas y dinámicas.

Ajax en ASP.NET se usa principalmente cuando el usuario tiene contenido dinámico y debe volver a cargarse varias veces después de que se hayan realizado los cambios. Esta tecnología también acelera el tiempo de respuesta de la página. También tiene una interfaz fácil de usar y páginas web interactivas.

Trabajo de Ajax en ASP.NET

AJAX es la versión avanzada de las páginas estáticas que se utilizaron durante mucho tiempo. AJAX está diseñado para una naturaleza dinámica y un entorno fácil de usar. AJAX en ASP.NET funciona como los puntos enumerados a continuación.

  • El objeto XMLHTTPRequest se crea desde el navegador y se envía al lado del servidor.
  • El servidor procesará la solicitud enviada por el navegador y enviará los datos de vuelta al navegador con los detalles solicitados.
  • El navegador procesará los datos y actualizará el contenido de la página.
  • Una vez que se actualiza el contenido, el usuario puede ver los datos en la pantalla.

Suponga que tiene un portal de entrada de datos de empleados y que tiene que agregar un nuevo empleado en la base de datos. En el diagrama de flujo anterior, podemos ver que el cliente crea una solicitud XMLHTTP con los datos solicitados al servidor. Aquí, los detalles del empleado comenzarán agregando el nombre y apellido del empleado.

En la página web que el usuario ya ve, se deben agregar algunos detalles de los empleados en la base de datos. Mostrará algunas sugerencias de los nombres presentes en el nombre que coincida con la palabra clave. El servidor luego envía los datos solicitados al cliente. Si el empleado en la base de datos no se agrega, se creará una nueva entrada con sus detalles.

Ahora el cliente procesará los datos enviados por el servidor y el tiempo de respuesta es más rápido en comparación con otras tecnologías utilizadas. Ahora los detalles del empleado se agregan con éxito en la base de datos, por lo que si los detalles agregados recientemente deben verse, el usuario puede simplemente ingresar el nombre del empleado y la identificación única para obtener los resultados en la pantalla. Aquí la interfaz de usuario es muy interactiva y el tiempo de respuesta también es menor.

Ejemplos de Ajax en ASP.NET

Estos son algunos ejemplos de Ajax en ASP.NET que se explican a continuación:

Ejemplo 1

En este ejemplo, se crea el botón, pero la acción no se realizará cuando hacemos clic en el botón.

Código:



Example of AJAX
Let's take examples on buttons
Click on this button



Example of AJAX
Let's take examples on buttons
Click on this button



Example of AJAX
Let's take examples on buttons
Click on this button



Example of AJAX
Let's take examples on buttons
Click on this button



Example of AJAX
Let's take examples on buttons
Click on this button

Salida:

Ejemplo # 2

En este ejemplo, al hacer clic en el botón que necesita para redirigirlo a otra página, podemos ver cómo podemos tomar medidas.

Código:

Veamos qué está escribiendo el usuario.


function textfunction () (
var obj = document.getElementById ("cuadro de texto"). value;
document.getElementById ("text"). innerHTML = "Las letras que está escribiendo:" + obj;
)

Salida:

Ejemplo # 3

En este ejemplo, discutiremos cómo realizar la función de carga en ajax.

Código:



AJAX EXAMPLE ON LOAD
Click on this button

function load(url, copy_function) (
var xhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
copy_function(this);
)
);
xmlhttp.open("GET", url, true);
xmlhttp.send();
)
function loadfunction(xmlhttp) (
document.getElementById("Demonstration").innerHTML =
xmlhttp.responseText;
)



AJAX EXAMPLE ON LOAD
Click on this button

function load(url, copy_function) (
var xhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
copy_function(this);
)
);
xmlhttp.open("GET", url, true);
xmlhttp.send();
)
function loadfunction(xmlhttp) (
document.getElementById("Demonstration").innerHTML =
xmlhttp.responseText;
)



AJAX EXAMPLE ON LOAD
Click on this button

function load(url, copy_function) (
var xhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
copy_function(this);
)
);
xmlhttp.open("GET", url, true);
xmlhttp.send();
)
function loadfunction(xmlhttp) (
document.getElementById("Demonstration").innerHTML =
xmlhttp.responseText;
)

Salida:

Ejemplo # 4

Después de hacer clic en el botón, el contenido del archivo asp se imprimirá en la pantalla. Hay dos métodos para recuperar la información, es decir, el método GET y POST.

Código:



AJAX EXAMPLE ON LOAD
This example is for POST method
Click on this button

function loadPOST() (
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
document.getElementById("Demonstration").innerHTML = this.responseText;
)
);
xmlhttp.open("POST", “ajax_load_POST.asp”, true);
xmlhttp.send();
)



AJAX EXAMPLE ON LOAD
This example is for POST method
Click on this button

function loadPOST() (
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
document.getElementById("Demonstration").innerHTML = this.responseText;
)
);
xmlhttp.open("POST", “ajax_load_POST.asp”, true);
xmlhttp.send();
)



AJAX EXAMPLE ON LOAD
This example is for POST method
Click on this button

function loadPOST() (
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
document.getElementById("Demonstration").innerHTML = this.responseText;
)
);
xmlhttp.open("POST", “ajax_load_POST.asp”, true);
xmlhttp.send();
)



AJAX EXAMPLE ON LOAD
This example is for POST method
Click on this button

function loadPOST() (
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
document.getElementById("Demonstration").innerHTML = this.responseText;
)
);
xmlhttp.open("POST", “ajax_load_POST.asp”, true);
xmlhttp.send();
)



AJAX EXAMPLE ON LOAD
This example is for POST method
Click on this button

function loadPOST() (
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
document.getElementById("Demonstration").innerHTML = this.responseText;
)
);
xmlhttp.open("POST", “ajax_load_POST.asp”, true);
xmlhttp.send();
)

Salida:

Características de Ajax en ASP.NET

Las siguientes son algunas características importantes de AJAX en ASP.NET .

  • Fácil de usar: esta es una de las características principales de Ajax, donde la interfaz de usuario de la página web es tan flexible y cómoda para que el usuario use la página, ya que debe completar todos los detalles necesarios.
  • Página web más rápida: esta característica en AJAX es la principal, ya que se ha creado para la misma. Esta característica permite que la página web cree la solicitud y el tiempo de respuesta del servidor en segundos. Estas características también hacen que la página web se recargue más rápido que las habituales. No tenemos que recargar toda la página todo el tiempo, solo la parte específica debe recargarse si se ha cambiado.
  • Tecnología independiente del servidor: AJAX en asp.net se puede usar independientemente de cualquier lenguaje de programación como JavaScript, PHP, etc. Muchos idiomas admiten AJAX y sus características y características.
  • Rendimiento: se utiliza principalmente por su rendimiento y velocidad de una página web. El tiempo que lleva crear una solicitud XMLHTTP para recuperar la respuesta de datos del servidor es rápido mientras se usa AJAX. Por lo tanto, uno de los principales factores se utiliza para el rendimiento en una página web.
  • Navegadores compatibles: AJAX se utiliza principalmente porque admite casi todos los navegadores utilizados en el mercado. Además del concepto que crea el objeto XMLHTTP, el procesamiento será el mismo para todos los navegadores web porque el lenguaje JavaScript se usa en la mayoría de las aplicaciones web.
  • Aplicaciones interactivas : el uso de ajax es muy fácil para el desarrollador o programador para crear aplicaciones web más interactivas y fáciles de usar. Como sabemos en el mundo de hoy, todo es un proceso bidireccional en el que debe colocar y obtener los datos, por lo que es útil en el proceso bidireccional en el que el cliente puede interactuar con el servidor para buscar y escribir los datos.

Conclusión

En este artículo, discutimos las características de AJAX en asp.net y cómo funciona en las aplicaciones ASP.Net. Además, discutimos algunos ejemplos donde se usa AJAX y sus características. Es una de las tecnologías más útiles y potentes para el entorno moderno. Es muy utilizado en sitios de redes sociales como Facebook, Twitter, etc.

Artículos recomendados

Esta es una guía de Ajax en ASP.NET. Aquí discutimos el funcionamiento, las características de Ajax en ASP.NET junto con los ejemplos y la implementación del código. También puede consultar los siguientes artículos para obtener más información:

  1. Métodos jQuery Ajax
  2. JSON vs AJAX
  3. ¿Qué es el Ajax?
  4. Preguntas de la entrevista AJAX

Categoría:

Desarrollo de software