Peticiones AJAX con jQuery

En jQuery existen diferentes métodos que involucran a AJAX, se pueden adaptar a las necesidades que tengamos de acuerdo a los objetivos de nuestra aplicación WEB.

Sin duda, las peticiones al servidor son algunos de los métodos más populares.

El método principal para las peticiones es  jQyery.ajax() $.ajax() del cual se han desprendido otras funciones como  $.get(), $.post(), $.load(), etc.

La principal ventaja es poder evitar recargar la página ya que sólo se manda la petición y se carga de manera dinámica.

Sintaxis para peticiones AJAX con jQuery

La sintaxis para este método es la siguiente:

Donde los parámetros están definidos por:

  • Url: es la url a donde se envía la petición
  • Type: método GET o POST, dependiendo de lo que se necesite
  • Data: parametros y datos que se envían a través de la petición
  • DataType: tipo de datos que devuelve la petición
  • Async: determina si la petición es síncrona o asíncrona.

Por ejemplo:

En el método   $.ajax()se pueden definir muchas opciones por ejemplo beforeSend que permite indicar una función que modifique el objeto XMLHttpRequest antes de realizar la petición.

El propio objeto XMLHttpRequest se pasa como único argumento de la función.

Otras opciones son error y success indican la función que se ejecuta cuando se produce un error o se ejecuta de forma correcta durante la petición.

Figure 2

https://www.topcoder.com/i/education/ajax_3.gif

Get y Post en las peticiones AJAX con jQuery

Además de la función $.ajax(), existen varias entre ellas $.get() y $.post() que se pueden utilizar para realizar de forma menos compleja las peticiones GET y POST:

Con la sintaxis para ambas se muestra a continuación:

Donde URL es el único parámetro obligatorio e indica la URL a la cuál se le realizará la petición.

Los datos son los que se mandan a través de ella y la función es el código que puede ser por ejemplo JavaScript y es el que se encargará de procesar la petición.

Load en las peticiones AJAX con jQuery

La función $.load() inserta el contenido de la respuesta del servidor en el elemento de la página que se indica. La forma de indicar ese elemento es lo que diferencia a jQuery de Prototype.

En este link encontrarás un repositorio en GitHub con ejemplos.

Para saber más:

jQuery AJAX Methods

jQuery.ajax()

jQuery Fundamentals

About Athziri Gutiérrez Yáñez

Programadora y Desarrolladora en formación. Estudiante de Ingeniería en Computación de la Universidad de Guadalajara. Amante de la tecnología y las matemáticas, vive en el lugar donde convergen ambas: la computación.