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()o $.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:
|
1 |
$.ajax(parametros); |
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:
|
1 2 3 4 5 6 7 8 |
$.ajax({ url: '/ruta/hasta/pagina.php', type: 'POST', async: true, data: 'parametro1=valor1¶metro2=valor2', success: procesaRespuesta, error: muestraError }); |
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.
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:
|
1 2 3 4 5 6 7 8 9 |
// Petición GET simple $.get('/ruta/hasta/pagina.php'); // Petición GET con envío de parámetros y función que // procesa la respuesta $.get('/ruta/hasta/pagina.php', { articulo: '34' }, function(datos) { alert('Respuesta = '+datos); }); |
Con la sintaxis para ambas se muestra a continuación:
|
1 |
$.get(url, datos, funcion); |
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:
No sé qué quieres decir con esto: “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.” pero da lugar a confusión.
Supongo que en vez de dinámica, querrías decir asíncrona, o parcial. No te pido que entres en mayor detalle, si no solo que elijas mejor las palabras.
Gracias Abel por tus comentarios.
La palabra correcta es dinámica, ya que el contenido se vuelve a redibujar en la página de manera dinámica. Lo que es asíncrono es la llamada AJAX y que puede ser configurada para ser de manera síncrona también, pero ninguno de esos detalles se estan mencionando en el artículo.