jQuery - Ajax

AJAX es un acrónimo de Asynchronous JavaScript and XML y esta tecnología nos ayuda a cargar datos desde el servidor sin necesidad de actualizar la página del navegador.

Si es nuevo con AJAX, le recomendaría que consulte nuestro Tutorial de Ajax antes de continuar.

JQuery es una gran herramienta que proporciona un amplio conjunto de métodos AJAX para desarrollar aplicaciones web de próxima generación.

Cargando datos simples

Es muy fácil cargar cualquier dato estático o dinámico usando JQuery AJAX. JQuery proporcionaload() método para hacer el trabajo -

Sintaxis

Aquí está la sintaxis simple para load() método -

[selector].load( URL, [data], [callback] );

Aquí está la descripción de todos los parámetros:

URL- La URL del recurso del lado del servidor al que se envía la solicitud. Podría ser un script CGI, ASP, JSP o PHP que genere datos de forma dinámica o desde una base de datos.
data- Este parámetro opcional representa un objeto cuyas propiedades se serializan en parámetros codificados correctamente para pasar a la solicitud. Si se especifica, la solicitud se realiza utilizando elPOSTmétodo. Si se omite, elGET se utiliza el método.
callback- Una función de devolución de llamada que se invoca después de que los datos de respuesta se hayan cargado en los elementos del conjunto emparejado. El primer parámetro que se pasa a esta función es el texto de respuesta recibido del servidor y el segundo parámetro es el código de estado.

Ejemplo

Considere el siguiente archivo HTML con una pequeña codificación JQuery:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

aquí load() inicia una solicitud Ajax a la URL especificada /jquery/result.htmlarchivo. Después de cargar este archivo, todo el contenido se completará dentro de <div> etiquetado con ID stage . Suponiendo que nuestro archivo /jquery/result.html tiene solo una línea HTML:

<h1>THIS IS RESULT...</h1>

Cuando hace clic en el botón dado, se carga el archivo result.html.

Obtener datos JSON

Habría una situación en la que el servidor devolvería una cadena JSON contra su solicitud. Función de utilidad JQuerygetJSON() analiza la cadena JSON devuelta y hace que la cadena resultante esté disponible para la función de devolución de llamada como primer parámetro para realizar más acciones.

Sintaxis

Aquí está la sintaxis simple para getJSON() método -

[selector].getJSON( URL, [data], [callback] );

Aquí está la descripción de todos los parámetros:

URL - La URL del recurso del lado del servidor contactado a través del método GET.
data - Un objeto cuyas propiedades sirven como pares de nombre / valor que se utilizan para construir una cadena de consulta que se agregará a la URL, o una cadena de consulta codificada y preformateada.
callback- Una función que se invoca cuando se completa la solicitud. El valor de datos resultante de digerir el cuerpo de la respuesta como una cadena JSON se pasa como el primer parámetro a esta devolución de llamada y el estado como el segundo.

Ejemplo

Considere el siguiente archivo HTML con una pequeña codificación JQuery:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Aquí el método de utilidad JQuery getJSON() inicia una solicitud Ajax a la URL especificada result.jsonarchivo. Después de cargar este archivo, todo el contenido se pasaría a la función de devolución de llamada que finalmente se rellenaría dentro de <div> etiquetado con la etapa de ID . Suponiendo que nuestro archivo result.json tiene el siguiente contenido con formato json:

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

Cuando hace clic en el botón dado, se carga el archivo result.json.

Pasar datos al servidor

Muchas veces recopila información del usuario y la pasa al servidor para su posterior procesamiento. JQuery AJAX facilitó el paso de los datos recopilados al servidor mediantedata parámetro de cualquier método Ajax disponible.

Ejemplo

Este ejemplo demuestra cómo se puede pasar la entrada del usuario a un script de servidor web que enviaría el mismo resultado y lo imprimiríamos:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

Aquí está el código escrito en result.php guión -

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?>

Ahora puede ingresar cualquier texto en el cuadro de entrada dado y luego hacer clic en el botón "Mostrar resultado" para ver lo que ha ingresado en el cuadro de entrada.

Métodos JQuery AJAX

Ha visto el concepto básico de AJAX usando JQuery. La siguiente tabla enumera todos los métodos importantes de JQuery AJAX que puede usar en función de sus necesidades de programación:

No Señor.	Métodos y descripción
1	jQuery.ajax (opciones) Cargue una página remota mediante una solicitud HTTP.
2	jQuery.ajaxSetup (opciones) Configure la configuración global para las solicitudes AJAX.
3	jQuery.get (url, [datos], [devolución de llamada], [tipo]) Cargue una página remota mediante una solicitud HTTP GET.
4	jQuery.getJSON (url, [datos], [devolución de llamada]) Cargue datos JSON mediante una solicitud HTTP GET.
5	jQuery.getScript (url, [devolución de llamada]) Carga y ejecuta un archivo JavaScript mediante una solicitud HTTP GET.
6	jQuery.post (url, [datos], [devolución de llamada], [tipo]) Cargue una página remota mediante una solicitud HTTP POST.
7	cargar (url, [datos], [devolución de llamada]) Cargue HTML desde un archivo remoto e inyéctelo en el DOM.
8	serializar () Serializa un conjunto de elementos de entrada en una cadena de datos.
9	serializeArray () Serializa todos los formularios y elementos de formulario como el método .serialize () pero devuelve una estructura de datos JSON para que pueda trabajar.

Eventos de JQuery AJAX

Puede llamar a varios métodos JQuery durante el ciclo de vida del progreso de la llamada AJAX. Según los diferentes eventos / etapas, los siguientes métodos están disponibles:

Puede pasar por todos los eventos AJAX .

No Señor.	Métodos y descripción
1	ajaxComplete (devolución de llamada) Adjunte una función para que se ejecute siempre que se complete una solicitud AJAX.
2	ajaxStart (devolución de llamada) Adjunte una función que se ejecutará siempre que comience una solicitud AJAX y no haya ninguna activa.
3	ajaxError (devolución de llamada) Adjunte una función para que se ejecute cada vez que falle una solicitud AJAX.
4	ajaxSend (devolución de llamada) Adjunte una función que se ejecutará antes de que se envíe una solicitud AJAX.
5	ajaxStop (devolución de llamada) Adjunte una función que se ejecutará cuando todas las solicitudes AJAX hayan finalizado.
6	ajaxSuccess (devolución de llamada) Adjunte una función para que se ejecute siempre que una solicitud AJAX se complete correctamente.