Enviar datos al servidor mediante Ajax sin usar librerías tales como jQuery

publicado por: Anonymous

Suelo usar jQuery para enviar datos al servidor y actualizar el contenido de la página actual sin tener que volverla a cargar.

Pero ahora me surge las siguientes preguntas:

  • ¿Es posible hacer esto con Ajax directamente sin usar ninguna librería? (Sería útil un ejemplo básico de cómo hacerlo).

  • En caso de que se pueda, ¿tendría alguna ventaja-desventaja no usar librerías?.


Pregunta relacionada:

Enviar datos al servidor mediante Ajax usando
Promesas de JavaScript

solución

En ciertas ocasiones nos podemos encontrar con la necesidad de realizar una petición AJAX sin utilizar librerías externas para Java Script, como por ejemplo jQuery. te dejo un pequeño ejemplo.

_x000D_

_x000D_

function ajax() {_x000D_
  // De esta forma se obtiene la instancia del objeto XMLHttpRequest_x000D_
  if(window.XMLHttpRequest) {_x000D_
    connection = new XMLHttpRequest();_x000D_
  }_x000D_
  else if(window.ActiveXObject) {_x000D_
    connection = new ActiveXObject("Microsoft.XMLHTTP");_x000D_
  }_x000D_
_x000D_
  var param = "Esto es una prueba AJAX sin jQuery";_x000D_
_x000D_
  // Preparando la función de respuesta_x000D_
  connection.onreadystatechange = response;_x000D_
_x000D_
  // Realizando la petición HTTP con método POST_x000D_
  connection.open('POST', 'test.php');_x000D_
  connection.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");_x000D_
  connection.send("param=" + param + "&nocache=" + Math.random());_x000D_
}_x000D_
_x000D_
function response() {_x000D_
  if(connection.readyState == 4) {_x000D_
    console.log("respuesta");_x000D_
    console.log(connection.responseText);_x000D_
  }_x000D_
}_x000D_
_x000D_
ajax();

_x000D_

_x000D_

_x000D_

La función ajax() va a ser la encargada de realizar la petición. Si miramos bien el código lo que hace es una petición POST al archivo “test.php” con el parámetro “param”.
Luego la función response se encarga de recibir la respuesta del servidor para mostrarla en un alert.

Para probarlo correctamente vamos a crear el archivo “test.php” con el siguiente contenido. Que básicamente recibe un parámetro “POST” y lo imprime con la función echo.

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

Entonces si ejecutamos el código anterior se va a mostrar el mensaje “Esto es una prueba AJAX sin jQuery” mediante un alert.

Bueno gente, eso es todo lo que tienen que saber a la hora de realizar una petición AJAX con Java Script sin jQuery.

http://programacionextrema.com/2016/08/15/ajax-sin-jquery-sin-librerias/

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *