ajax – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Mon, 09 Nov 2015 18:55:33 +0000 es hourly 1 https://wordpress.org/?v=5.6.15 https://programacionextrema.com/wp-content/uploads/2015/10/cropped-icon-programacion-extrema-32x32.png ajax – ProgramaciónExtrema.com https://programacionextrema.com 32 32 AJAX en jQuery (Java Script) https://programacionextrema.com/2015/11/09/ajax-en-jquery-java-script/ https://programacionextrema.com/2015/11/09/ajax-en-jquery-java-script/#respond Mon, 09 Nov 2015 18:52:35 +0000 http://programacionextrema.com/?p=532 AJAX es una técnica que se utiliza en Java Script para comunicar un cliente con un servidor de manera asíncrona. En este tutorial aprenderemos a realizar una petición AJAX en jQuery a un servidor con PHP. Una ventaja de utilizar jQuery es que no tenemos que preocuparnos por la compatibilidad con los distintos navegadores. ¿Cómo… Read More

La entrada AJAX en jQuery (Java Script) aparece primero en ProgramaciónExtrema.com.

]]> AJAX es una técnica que se utiliza en Java Script para comunicar un cliente con un servidor de manera asíncrona. En este tutorial aprenderemos a realizar una petición AJAX en jQuery a un servidor con PHP. Una ventaja de utilizar jQuery es que no tenemos que preocuparnos por la compatibilidad con los distintos navegadores.

¿Cómo hacer una petición AJAX en jQuery?

Hacer esto con jQuery es muy sencillo y se puede realizar de varias formas, en nuestro caso vamos a utilizar la función $.ajax.
Primero vamos a crear nuestro archivo PHP con el siguiente código:

saludar.php

<?php
  // En caso de enviar una peticiÓn por get debemos usar
  // &_GET
  echo 'Bienvenido a ' . $_POST['parametro'];
?>

Ahora vamos a realizar la petición AJAX en jQuery por el método post al script saludar.php y le vamos enviar un parámetro.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>AJAX en jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <script>
      // Es importante notar que estamos utilizando jQuery
      $.ajax({
          url: "saludar.php",
          method: "POST",
          data: { parametro: 'PorgramaciónExtrema.com!' }
            }).done(function(data) {
               console.log(data);
          });
    </script>
  </body>
</html>

El resultado visitar la página que creamos es que en la consola se va a mostrar el mensaje de «Bienvenido a PorgramaciónExtrema.com!».
Bueno gente esto es todo por hoy, espero que les sea de gran utilidad este tutorial para hacer una petición AJAX en jQuery. Ante cualquier problema no duden en dejar un comentario.

La entrada AJAX en jQuery (Java Script) aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/09/ajax-en-jquery-java-script/feed/ 0 AJAX dentro del ciclo for en Java Script https://programacionextrema.com/2015/11/08/ajax-dentro-del-ciclo-for-en-java-script/ https://programacionextrema.com/2015/11/08/ajax-dentro-del-ciclo-for-en-java-script/#comments Sun, 08 Nov 2015 01:40:10 +0000 http://programacionextrema.com/?p=517 Hoy en día es muy común tener que hacer una petición AJAX en Java Script es por eso que librearías como jQuery nos facilitan esta tarea. Hacer una petición AJAX dentro del ciclo for en Java Script nos puede ocasionar un gran problema, esto se debe a que estas peticiones se ejecutan de forma asíncrona… Read More

La entrada AJAX dentro del ciclo for en Java Script aparece primero en ProgramaciónExtrema.com.

]]> Hoy en día es muy común tener que hacer una petición AJAX en Java Script es por eso que librearías como jQuery nos facilitan esta tarea.
Hacer una petición AJAX dentro del ciclo for en Java Script nos puede ocasionar un gran problema, esto se debe a que estas peticiones se ejecutan de forma asíncrona (concurrente), entonces puede pasar que el índice del for se cambie mientras una petición AJAX está en proceso. Por ejemplo si ejecutamos el siguiente código es muy probable que el índice sea el mismo en varias peticiones o el resultado quede desordenado:

Código Java Script

<!DOCTYPE html>
<html>
  <head>
    <title>Ajax dentro del ciclo for en Java Script</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <script>
      var ids = [1,2,3,4,5];
      
      for(indice = 0; indice < ids.length; indice++){
      // Es importante notar que estamos utilizando jQuery
      $.ajax({
          url: "test.php",
          method: "POST",
          data: { parametro: ids[indice] }
            }).done(function(data) {
               console.log(data);
          });
      }
    </script>
  </body>
</html>

Código PHP del archivo test.php

<?php
  echo $_POST['parametro'];
?>

Si ejecutamos el código anterior varias veces vamos a ver que el resultado no siempre es el mismo.

Peticiones AJAX dentro del ciclo for en Java Script

Una de las opciones para solucionar este problema es la recursividad, si no están muy familiarizados con este tema los invito al leer el tutorial que explica que es la programación recursiva. Para este caso podemos crear una función que se llama a sí misma dentro de done con el parámetro del índice:

<!DOCTYPE html>
<html>
  <head>
    <title>AJAX dentro del ciclo for en Java Script</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <script>
      var ids = [1,2,3,4,5];
      
      function enviar(indice){
        // Es importante notar que estamos utilizando jQuery
        if(indice < ids.length){
          $.ajax({
            url: "test.php",
            method: "POST",
            data: { parametro: ids[indice] }
            }).done(function(data) {
              console.log(data);
              enviar(indice + 1);
          });
        }
      }
      enviar(0);
    </script>
  </body>
</html>

Con el script anterior nos aseguraremos que nuestro código se ejecute de la misma forma (estructural) siempre, donde cada petición AJAX se va a ejecutar una vez que termine la anterior.

Bueno hemos llegado al final de este tutorial, espero que les sea de gran utilidad. Ante cualquier problema no duden en dejar un comentario.

La entrada AJAX dentro del ciclo for en Java Script aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/08/ajax-dentro-del-ciclo-for-en-java-script/feed/ 1