JavaScript
AJAX

Introducción

Observaciones

Usando GET y sin parámetros

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
        //parse the response in xhttp.responseText;
    }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

fetch('/').then(response => response.text()).then(text => {
  console.log("The home page is " + text.length + " characters long.");
});

Enviando y recibiendo datos JSON a través de POST

const requestData = {
  method : 'getUsers'
};

const usersPromise = fetch('/api', {
  method : 'POST',
  body : JSON.stringify(requestData)
}).then(response => {
  if (!response.ok) {
    throw new Error("Got non-2XX response from API server.");
  }
  return response.json();
}).then(responseData => {
  return responseData.users;
});

usersPromise.then(users => {
  console.log("Known users: ", users);
}, error => {
  console.error("Failed to fetch users due to error: ", error);
});

Mostrando las principales preguntas de JavaScript del mes desde la API de Stack Overflow

Podemos realizar una solicitud AJAX a la API de Stack Exchange para recuperar una lista de las principales preguntas de JavaScript del mes y presentarlas como una lista de enlaces. Si la solicitud falla o devuelve un error de API, nuestra promesa de manejo de errores muestra el error en su lugar.

const url =
    'http://api.stackexchange.com/2.2/questions?site=stackoverflow' +
    '&tagged=javascript&sort=month&filter=unsafe&key=gik4BOCMC7J9doavgYteRw((';

fetch(url).then(response => response.json()).then(data => {
  if (data.error_message) {
    throw new Error(data.error_message);
  }

  const list = document.createElement('ol');
  document.body.appendChild(list);

  for (const {title, link} of data.items) {
    const entry = document.createElement('li');
    const hyperlink = document.createElement('a');
    entry.appendChild(hyperlink);
    list.appendChild(entry);

    hyperlink.textContent = title;
    hyperlink.href = link;
  }
}).then(null, error => {
  const message = document.createElement('pre');
  document.body.appendChild(message);
  message.style.color = 'red';

  message.textContent = String(error);
});

Usando GET con parámetros

Esta función ejecuta una llamada AJAX utilizando GET que nos permite enviar parámetros (objeto) a un archivo (cadena) y lanzar una devolución de llamada (función) cuando la solicitud ha finalizado.

function ajax(file, params, callback) {

  var url = file + '?';

  // loop through object and assemble the url
  var notFirst = false;
  for (var key in params) {
    if (params.hasOwnProperty(key)) {
      url += (notFirst ? '&' : '') + key + "=" + params[key];
    }
    notFirst = true;
  }

  // create a AJAX call with url as parameter
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      callback(xmlhttp.responseText);
    }
  };
  xmlhttp.open('GET', url, true);
  xmlhttp.send();
}

Así es como lo usamos:

ajax('cars.php', {type:"Volvo", model:"300", color:"purple"}, function(response) {
  // add here the code to be executed when data comes back to this page      
  // for example console.log(response) will show the AJAX response in console
});

Y lo siguiente muestra cómo recuperar los parámetros de url en cars.php :

if(isset($_REQUEST['type'], $_REQUEST['model'], $_REQUEST['color'])) {
  // they are set, we can use them !
  $response = 'The color of your car is ' . $_REQUEST['color'] . '. ';
  $response .= 'It is a ' . $_REQUEST['type'] . ' model ' . $_REQUEST['model'] . '!';
  echo $response;
}

Si tuviera console.log(response) en la función de devolución de llamada, el resultado en la consola habría sido:

El color de tu coche es morado. ¡Es un Volvo modelo 300!

Compruebe si existe un archivo a través de una solicitud HEAD

Esta función ejecuta una solicitud AJAX utilizando el método HEAD que nos permite verificar si un archivo existe en el directorio dado como un argumento. También nos permite lanzar una devolución de llamada para cada caso (éxito, falla).

function fileExists(dir, successCallback, errorCallback) {
    var xhttp = new XMLHttpRequest;

    /* Check the status code of the request */
    xhttp.onreadystatechange = function() {
        return (xhttp.status !== 404) ? successCallback : errorCallback;
    };

    /* Open and send the request */
    xhttp.open('head', dir, false);
    xhttp.send();
};

Añadir un preloader AJAX

Aquí hay una forma de mostrar un precargador GIF mientras se ejecuta una llamada AJAX. Necesitamos preparar nuestras funciones de agregar y quitar preloader:

function addPreloader() {
  // if the preloader doesn't already exist, add one to the page
  if(!document.querySelector('#preloader')) {
    var preloaderHTML = '<img id="preloader" src="https://goo.gl/cNhyvX" />';
    document.querySelector('body').innerHTML += preloaderHTML;
  }
}

function removePreloader() {
  // select the preloader element
  var preloader = document.querySelector('#preloader');
  // if it exists, remove it from the page
  if(preloader) {
    preloader.remove();
  }
}

Ahora vamos a ver dónde usar estas funciones.

var request = new XMLHttpRequest();

Dentro de la función onreadystatechange , debería tener una sentencia if con la condición: request.readyState == 4 && request.status == 200 .

Si es verdadero : la solicitud ha finalizado y la respuesta está lista, es donde usaremos removePreloader() .

Si no es falso : la solicitud aún está en curso, en este caso ejecutaremos la función addPreloader()

xmlhttp.onreadystatechange = function() {

  if(request.readyState == 4 && request.status == 200) {
    // the request has come to an end, remove the preloader
    removePreloader();
  } else {
    // the request isn't finished, add the preloader
    addPreloader()
  }

};

xmlhttp.open('GET', your_file.php, true);
xmlhttp.send();

Escuchando eventos AJAX a nivel global.

// Store a reference to the native method
let open = XMLHttpRequest.prototype.open; 

// Overwrite the native method
XMLHttpRequest.prototype.open = function() {
    // Assign an event listener
    this.addEventListener("load", event => console.log(XHR), false);
    // Call the stored reference to the native method
    open.apply(this, arguments);
};