2

Ventajas y desventajas de Ajax y cómo usarlo con jQuery

792Puntos

hace 6 años

AJAX (Asynchronous Javascript and XML) es una técnica de desarrollo web que, al combinar una serie de tecnologías independientes, nos permite intercambiar información entre el servidor y el cliente (un navegador web) de forma asíncrona. Como resultado, obtenemos una navegación ágil, rápida y dinámica; y también la posibilidad de realizar cambios sobre una web sin necesidad de actualizarla. Las tecnologías independientes que lo hacen posible son: AJAX

  • JAVASCRIPT: Es la base fundamental que une estas tecnologías
  • XMLHttpRequest: Intercambio asíncrono
  • XML: Manipulación e intercambio de información
  • JSON: Alternativa de XML (Actualmente más usado que XML)
  • DOM: Document Object Model
  • XHTML y CSS: Estilos - Creación de una presentación de objetos

Sus ventajas son:

  • Mejora la experiencia del usuario
  • Puede ser utilizada en cualquier plataforma y navegador
  • Menor transferencia de datos cliente/servidor
  • Optimización de recursos (tiempo de operaciones)
  • Portabilidad y usabilidad (permite realizar una petición de datos al servidor y recibirla sin necesidad de cargar la página entera)

Sus desventajas son:

  • JavaScript debe estar activado en el navegador web para funcionar
  • Utilizar AJAX preferentemente en formularios de contacto, validación de correo electrónico y contraseñas para no afectar el posicionamiento web (SEO)
  • Tiempos de respuesta del servidor en momentos determinados
  • Tiempo de desarrollo (es necesario tener conocimiento medio/alto de las tecnologías que hacen parte de AJAX)
  • Algunas funciones a las que estamos acostumbrados en la navegación web pueden no funcionar como esperamos. Por ejemplo, el botón de atrás, guardar marcador o actualizar la página web en cualquier momento.

El punto débil de AJAX es que es necesario escribir código para cada uno de los navegadores que utilizaremos, y esto requiere de mucho tiempo. Sin embargo, jQuery llega al rescate al permitirnos utilizar AJAX y todo su potencial con una sola línea de código: $.ajax({name:value, name:value, … }) Para comprender el uso de jQuery AJAX vamos a realizar un ejemplo donde podemos visualizar los métodos que se utilizan: [html] <script>$(document).ready(function(){ $(“button”).click(function(){ $(“div”).load(“Metodos.xml”,function(response, status){ if (status == “success”){ $(“div”).html("<ol></ol>"); $(response).find(“metodo”).each(function(){ var item_text = $(this).text(); $(’<li></li>’).html(item_text).appendTo(‘ol’); }); alert(“Estos son los metodos que utiliza jQuery AJAX”) } }); }); });<script> <style>div { font-size: x-large; padding: 5px; background-color: #dddddd; border-radius: 24px 24px 24px 24px; -moz-border-radius: 24px 24px 24px 24px; -webkit-border-radius: 24px 24px 24px 24px; border: 2px solid #bfc0be; }</style>

<center>

##Metodos jQuery AJAX

</center>

<center><button>Ver Metodos jQuery AJAX</button></center>

[/html] DEMO En este ejemplo utilizamos el método load() para cargar nuestro archivo .xml y de esta forma, visualizarlo en pantalla. Otro ejemplo de cómo implementar un método sería: [html] <script>$(document).ready(function(){ $(“button”).click(function(){ $.ajaxSetup({url: “Metodo.txt”, success: function(result){ $(“div”).html(result);}}); $.ajax(); }); });<script> [/html] Utilizando los métodos de jQuery AJAX podemos implementar elementos y funciones en nuestras páginas web logrando resultados sorprendentes. Si quieres saber cómo utilizar esta técnica más a fondo, no te pierdas el Curso Profesional de Front-end de Platzi.

Escribe tu comentario
+ 2