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

Question

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

¡Por supuesto! ¡Si AJAX existe antes de jQuery! Hay varios métodos de seguro, si mal no recuerdo, en algunos casos fueron reemplazados por la función .ajax de jQuery por ser una función ya escrita. De hecho te dejo una web que habla sobre sustituir jQuery: http://youmightnotneedjquery.com/ — Agustin M., Jun 19 '17 at 17:08

score 3 · Accepted Answer · edited Jun 19 '17 at 18:20

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.

function ajax() {
  // De esta forma se obtiene la instancia del objeto XMLHttpRequest
  if(window.XMLHttpRequest) {
    connection = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {
    connection = new ActiveXObject("Microsoft.XMLHTTP");
  }

  var param = "Esto es una prueba AJAX sin jQuery";

  // Preparando la función de respuesta
  connection.onreadystatechange = response;

  // Realizando la petición HTTP con método POST
  connection.open('POST', 'test.php');
  connection.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  connection.send("param=" + param + "&nocache=" + Math.random());
}

function response() {
  if(connection.readyState == 4) {
    console.log("respuesta");
    console.log(connection.responseText);
  }
}

ajax();

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/

score 3 · Answer 2 · answered Jun 19 '17 at 17:31

Si se puede, la desventaja es que necesitas implementar varios metodos, tanto para la conversion de objetos, envio de archivos, el tipo de encoding que necesites, y tienes que implementar el manejo de los diferentes errores y los codigos de respuestas, te recomiendo que sigas usando jquery o algun micro framework especializado en ajax.

en el caso de "application/x-www-form-urlencoded" es bastante "sencillo" pero en el caso de "multipart/form-data" es bastante complejo

puedes encontrar ejemplos de javascrip vanilla (sin usar frameworks ) en http://vanilla-js.com/

y puedes encontrar microframeworks en http://microjs.com

los siguientes ejemplos solo manejean cuando son exitosos, y hacen caso omiso de los errores

POST

var r = new XMLHttpRequest();
r.open("POST", "http://tudominio.com/banana.php", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");

GET

 var r = new XMLHttpRequest();
    r.open("GET", "http://tudominio.com/banana.php?banana=yellow", true);
    r.onreadystatechange = function () {
      if (r.readyState != 4 || r.status != 200) return;
      alert("Success: " + r.responseText);
    };
    r.send();

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

2 Answers2

Linked