The response must be independent of the server it is running on and if that is not possible then it must work for Apache.

Whatever library you use, everything is converted to the same code (or similar, but using the same standards) and the server will interpret the same request.

Source: How does AJAX work? .

You take care of the orange part , the rest is predefined on the servers.

I'm going to split my answer into 2 timelines ;)

Old School

This form is the classic and practically multi-browser, as well as being the standard for many years. The class that provides us with this is the XMLHttpRequest interface .

Just create an object XMLHttpRequest:

const xhr = new XMLHttpRequest();

openThen, we must specify the following parameters through the method :

• Request Method
• resource url
• Flag to indicate if it should be asynchronous (default true)

Continuing with the example, we can do the following:

xhr.open('GET', '//api.awesomemag.com/magazines');

With this we already establish the parameters to the request. It remains for us to associate a function for the request phases of the request lifecycle.

xhr.onload = function() {
  if(xhr.readyState === 4) {
    // respuesta lista para procesar
  }
}

An AJAX request has a life cycle during its load

These are:

• 0: Request not yet initialized
• 1: Connection established with the server
• 2: Request sent
• 3: Petition process
• 4: Answer Ready

It is for this reason that we must act in the phase 4, when the answer is ready for us (except in extraordinary cases, as always, it can be acted in other phase(s)):

if(xhr.readyState === 4) {
  // respuesta lista para procesar
}

Finally, we send the request:

xhr.send();

Annex: Sending data by POST

It is not new that in a request GET, we cannot send data in the body of the request; what libraries like jQuery do is read the objects that we pass to datathem and group them by ?clave=valorto finally append them to the URL.

Through the method POST it is possible to send data, for which we have some options that I mention below.

FormData

FormData is an interface that allows us to simulate a submitform by sending the data that we add to it as clave/valor, in fact, this interface uses the mime multipart/form-data.

Let's look at an example:

const data = new FormData();
data.append("title", "Be careful! NSA spy through smartphones backdoors!");
data.append("date", new Date().getTime());
xhr.send(data);

manual way

This form is the same as with FormData, the difference is that here you do it manually as if it were get parameters:

xhr.send('title=Be careful! NSA spy through smartphones backdoors!&date=' + new Date().getTime());

JSON

To send objects via XMLHttpRequestjust make use of JSON.stringifyto serialize that object:

xhr.send(JSON.stringify({
    title: 'Be careful! NSA spy through smartphones backdoors!',
    date: new Date().getTime()
}));

New school

PromesasA new API based on , called Fetch , has recently been released . Somehow it makes the code cleaner.

GET

To make a request GET, just pass the URLresource and make use of thenand catchfor success and error respectively.

fetch('//api.awesomemag.com/magazines')
  .then(res => res.json())
  .then(magazines => console.log(magazines))
  .catch(err => console.log('Algo salió mal'));

Alternatively, if we expect to receive a JSONwe must include the corresponding header:

fetch('//api.awesomemag.com/magazines', {
    headers: {
      accept: 'application/json'
    }
  })
  .then(res => res.json())
  .then(magazines => console.log(magazines))
  .catch(err => console.log('Algo salió mal'));

But there is another reason why this alternative will be widely used and it has to do with an upcoming EcmaScript feature, that is Async/Await .

What is the association between Fetch and Async/Await ?

It's very simple. Async/Awaitwill make it possible to wait for an asynchronous procedure to finish, giving us on occasions where we need this behavior, a clear advantage and naturalness to the generally procedural backend programmer. We can understand it better with an example:

function async getMagazines() {
  return fetch('//api.awesomemag.com/magazines');
}

// flujo natural
const magazines = await (getMagazines()).json();
// no necesitamos de promesas ni callbacks!

Some people are against this new feature, arguing that it kills the asynchronous nature of JavaScript.

Conclusions

Proposals in Stage 3+ are practically guaranteed; in Stage 2 they have a high probability of being included.

We currently have transpilers that allow us to use EcmaScript 6,7 and 8 as well as future inclusions in the language without losing cross-browser compatibility. One of the most famous is Babel which transpiles modern code to EcmaScript 5 (JavaScript 2009).

1. Code

I put together this function that follows exactly the same syntax as jQuery.ajaxand you just have to include it in your code to use it. It is written to be compatible with older browsers as well.

function ajax(url, opciones){
    //parametros pasados
    opciones = opciones || {};
    if (typeof url === "object" && url !== null) {
        opciones = url; //url como param o como propiedad
        url = opciones.url;
    }
    url = url || "";
    opciones.method = opciones.method || opciones.type || "GET";
    opciones.method = opciones.method.toUpperCase();

    function crearObjetoXMLHttp() {
        //Crear el objeto para el HTTP request
        if (typeof XMLHttpRequest !== "undefined")
            return new XMLHttpRequest();
        else { //para IE6-
            const XMLHttpVersions = [
                    "MSXML2.XmlHttp.6.0",
                    "MSXML2.XmlHttp.5.0",
                    "MSXML2.XmlHttp.4.0",
                    "MSXML2.XmlHttp.3.0",
                    "MSXML2.XmlHttp.2.0",
                    "Microsoft.XmlHttp"
                ];
            const XMLHttpVersionsLength = XMLHttpVersions.length;
            for (var i = 0; i < XMLHttpVersionsLength; i++) {
                try {
                    return new ActiveXObject(XMLHttpVersions[i]);
                } catch (e) { }
            }

            throw new ReferenceError("No se puede crear una instancia para el objeto XMLHttpRequest");
        }
    }
    var http_request;
    if (typeof opciones.xhr === 'function')
        http_request = opciones.xhr()
    else
        http_request = crearObjetoXMLHttp();

    //asignamos una función que se llamara (asincronicamente) 
    //  cuando cambie el estado de la petición
    function respuestaAJAX() {
        if (http_request.readyState == (XMLHttpRequest.DONE || 4)) { // 4 significa que terminó
            var status;
            if (http_request.status >= 200 && http_request.status < 300 || http_request.status == 304) { //2xx Success
                //aca leemos la respuesta (lel recurso devuelto)
                // y se llama al callback definido por el usuario
                status = "success";
                statusAJAX(http_request, status);
                if (typeof opciones.success === "function") {
                    var response;
                    try {
                        if (opciones.dataType == "json") { //si se espera un json
                            response = JSON.parse(http_request.response);
                            response.__proto__.toString = function(){ return JSON.stringify(this) };
                        } else if (opciones.dataType == "xml") { //si se espera un xml
                            response = http_request.responseXML;
                            response.__proto__.toString = function(){ return this.innerHTML };
                        } else { //si se espera texto
                            response = http_request.response;
                        }
                        // Callback a success
                        opciones.success(response);
                        completoAJAX(http_request, status);
                    } catch (err) { //error al interpretar json o xml
                        console.error(err);
                        if (typeof opciones.error === "function") {
                            status = "parseerror";
                            errorAJAX(http_request, status);
                        }
                    }
                }
            } else if (http_request.responseURL !== "") {  //Otra respuesta (ej: 500 Internal Server Error)
                status = "error";
                statusAJAX(http_request, status);
                //lanzar error
                errorAJAX(http_request, status);
            }
        }
    }
    addEvent(http_request, "readystatechange", respuestaAJAX);


    function errorAJAX(http_request, status) {
        //llamamos al callback the "error" si se especifico
        status = status || "error";
        if (typeof opciones.error !== "undefined") {
            var statusText = (http_request.statusText  || "").replace(/^\d+ /,"");
            if (typeof opciones.error === "function")
                opciones.error = [ opciones.error ];
            var errorLength = opciones.error.length;
            for (var i = 0; i < errorLength; i++) {
                opciones.error[i](http_request, status, statusText);
            }
        }
        completoAJAX(http_request, status);
    }

    function statusAJAX(http_request, status) {
        //si se definio por ej, statusCode: { 500: function(){ /* */ } }
        if (typeof opciones.statusCode === "object" && typeof opciones.statusCode[http_request.status] === "function")
            opciones.statusCode[http_request.status](http_request, status, (http_request.statusText.replace(/^\d+ /,"")  || ""));
    }

    function completoAJAX(http_request, status) {
        //llamamos al callback the "complete" si se especifico
        if (typeof opciones.complete !== "undefined") {
            if (typeof opciones.complete === "function")
                opciones.complete = [ opciones.complete ];
            var completeLength = opciones.complete.length;
            for (var i = 0; i < completeLength; i++) {
                opciones.complete[i](http_request, status);
            }
        }
    }

    //handlers para los errores
    const ajaxErrorEvents = ["abort", "error", "timeout"];
    const ajaxErrorEventsLength = ajaxErrorEvents.length;
    for (var i = 0; i < ajaxErrorEventsLength; i++) {
        const ajaxErrorEvent = ajaxErrorEvents[i];
        addEvent(http_request, ajaxErrorEvent, function() {
            errorAJAX(http_request, ajaxErrorEvent);
        });
    }

    function addEvent(elemento, evento, callback, arg) {
        if (elemento.addEventListener) { //addEventListener
            elemento.addEventListener(evento, callback, (arg || false));
        } else if (elemento.attachEvent) { //attachEvent para IE
            elemento.attachEvent("on" + evento, callback);
        } else {
            elemento[ "on" + evento ] = callback;
        }
    }

    //timeout
    if (typeof opciones.timeout !== "undefined")
        http_request.timeout = opciones.timeout;

    //preparamos los datos a enviar
    var data = null;
    if (typeof opciones.data !== "undefined" && (opciones.data !== null || opciones.cache === false)) {
        if (opciones.processData === false) {
            data = opciones.data;
        } else if (typeof opciones.data === "string") {
            data = encodeURI(opciones.data.replace(/^\?/,""));
        } else if (typeof opciones.data === "object") {
            var dataArr = [];
            for (var key in opciones.data) {
                if (Object.prototype.hasOwnProperty.call(opciones.data, key)) {
                    dataArr[dataArr.length] = encodeURIComponent(key) + "=" 
                                            + encodeURIComponent(typeof opciones.data[key] === "string" 
                                                                 ? opciones.data[key]
                                                                 : JSON.stringify(opciones.data[key]));
                }
            }
            data = dataArr.join("&");
        }
        //Si es GET, data va en el query del uri
        if (opciones.method == "GET") {
            if (opciones.cache === false) //no usar cache
                data += (data?"?":"") + "_=" + (Date.now?Date.now():new Date().getTime());
            url += "?" + data;
            data = null;
        }
    }

    //hacemos el request
    http_request.open(opciones.method, url, true, opciones.username, opciones.password);
    //forms
    if (opciones.method == "POST" || opciones.method == "PUT")
        http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //completamos encabezados
    for (var encabezado in opciones.headers) {
        if (Object.prototype.hasOwnProperty.call(opciones.headers, encabezado))
            http_request.setRequestHeader(encabezado.replace(/(?:^([a-z])|([a-z]))([a-z0-9_]*)([A-Z]+)/g,
                                                             function(m,p1,p2,p3,p4){return (p1?p1.toUpperCase():p2)+p3+"-"+p4}), 
                                          opciones.headers[encabezado]);
    }
    //dataType y contentType
    if (opciones.dataType == "xml") {
        http_request.setRequestHeader("Accept", "text/xml; charset=UTF-8");
    } else if (opciones.dataType == "json") {
        http_request.setRequestHeader("Accept", "application/json; charset=UTF-8");
    }
    if (typeof opciones.contentType !== "undefined") { //Content-Type x usuario
        http_request.overrideMimeType(opciones.contentType);
        http_request.setRequestHeader("Content-Type", opciones.contentType);
    }
    //beforeSend
    if (typeof opciones.beforeSend === "function") {
        if (opciones.beforeSend(http_request, opciones) === false) {
            http_request.abort();
            return false;
        }
    }
    //send
    http_request.send(data);
    return true;
}

Implemented Options

beforeSend, cache, complete, contentType, data _{(sólo objetos y arrays)}, dataType _{(sólo xml y json)}, error, headers, method, mimeType, password, processData, statusCode, success, timeout, type, url, username, xhr.

Para ver la forma de usarlos, se puede leer la documentación de jQuery.ajax.

Ejemplos de uso

• Obtener el contenido de una url.

  ajax({
      url: "miURL",
      method: "GET",
      data: "var1=valor1&var2=valor2",
      contentType: "text/plain",
      success: function(d) {
          console.log(d);
      }
  });
  

• Enviar encabezados, obtener un XML y aplicarle métodos de DOM, o evaluar el error.

  ajax({
      url: "nota.xml",
      method: "GET",
      dataType: "xml",
      headers: {
          AcceptLanguage: "es-AR; q=1.0, es; q=0.9, en; 0.5, pt; 0.2",
          CacheControl: "no-cache"
      },
      success: function(d) {
          console.log(d.querySelectorAll("*"));
      },
      error: function(xhr, status, error) {
          console.warn("ERROR", xhr, status, error);
      }
  });
  

• Enviar parámetros por POST y recibir un JSON

  ajax({
      url: "archivo.json",
      method: "POST",
      dataType: "json",
      data: {
          var1: "valor1",
          var2: "valor2"
      },
      success: function(d) {
          console.log(d.parametro[2]);
      },
      complete: function(xhr, status) {
          console.info("Se finalizo la peticion por AJAX. Status:", status);
      }
  });
  

2. Descripción de cómo funciona

2.a. Pasos básicos

Veamos los pasos esenciales de la solicitud AJAX (lo que importa de todo el código).

1. Instanciamos XmlHttp

   var http_request = new XMLHttpRequest();
   

   En realidad se recibe como resultado de la función crearObjetoXMLHttp().

   Esta función está para la compatibilidad con IE. Si no es compatible con XMLHttpRequest, genera el objeto ActiveX MSXML2.XmlHttp.6.0 (o una versión previa que sí sea compatible).

2. Registramos el evento onreadystatechange para gestionarlo.

   http_request.addEventListener('readystatechange', respuestaAJAX);
   

   Para cada cambio en el estado de la petición AJAX, se llamará a la función respuestaAJAX().

   Nuevamente, definimos una función para lidiar con versiones previas de IE, llamando a addEvent() para que, si no es compatible con addEventListener, use attachEvent o, en su defecto, lo asigne directamente a .onreadystatechange.

3. Inicializamos la petición AJAX y lo enviamos.

   http_request.open(opciones.method, url);
   http_request.send(data);
   

   Donde se pasa "POST" o "GET" dentro del parámetro opciones.method. Y data puede contener el cuerpo de la petición o no (discutido más abajo).

4. Recibimos la respuesta y se dispara la función respuestaAJAX() (registrada en el punto 2).

   La petición se realiza de forma asíncronica, y la función ajax() termina de ejecutarse antes de recibir la respuesta. Sin embargo, al recibir cambios en el estado de la petición, el evento readystatechange va cambiando y llamando a la función que asignamos.

   function respuestaAJAX() {
   

   De todos los cambios de estado, únicamente nos interesa el último, cuando la petición terminó:

       if (http_request.readyState == XMLHttpRequest.DONE) {
   

   Y, si se obtuvo una respuesta satisfactoria, ejecutamos la función definida por el usuario (pasada como callback).

           if (http_request.status >= 200 && http_request.status < 300 
               || http_request.status == 304) {
   
               opciones.success(response);
           }
   

Esto es todo lo que se necesita para una petición AJAX. El resto del código se encarga exclusivamente de modificar algunos parámetros enviados o recibidos, y de disparar eventos en caso de error.

2.b Envío de datos

Recién vimos que se podían enviar o no datos en http_request.send(data);. Éstos son pasados como parámetro dentro de las opciones como string:

ajax({
    url:  "pagina.php",
    data: "var1=valor1&var2=valor2"
});

o como un objeto:

ajax({
    url:  "pagina.php",
    data: {
        var1: "valor1",
        var2: "valor2"
    }
});

Si se pasan como string, se codifica con encodeURI() y lo asignamos:

if (typeof opciones.data === "string") {
    data = encodeURI(opciones.data);
}

Y si se pasan como objeto, se codifica cada clave y valor con encodeURIComponent():

else if (typeof opciones.data === "object") {
    var dataArr = [];
    for (var key in opciones.data) {
        dataArr[dataArr.length] = encodeURIComponent(key) + "=" + encodeURIComponent(opciones.data[key]);
    }
    data = dataArr.join("&");
}

Por último, si estamos realizando una petición por POST, los datos se envían directamente en el cuerpo de la petición, en la forma var1=valor1&var2=valor2 y se configura el encabezado de Content-Type:

http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Pero si es una petición por GET, los datos se agregan directamente en la URL, quedando por ejemplo pagina.php?var1=valor1&var2=valor2.

if (opciones.method == "GET") {
    url += "?" + data;
    data = null;
}

2.c Análisis de la respuesta

A la función se le puede pasar el parámetro dataType con el valor "json" o "xml" para especificar el tipo de datos recibido en la solicitud, haciendo que se procese la respuesta con json.PARSE() o directamente obteniendo el XMLHttpRequest.responseXML.

if (opciones.dataType == "json") { //si se espera un json
    response = JSON.parse(http_request.response);
    response.__proto__.toString = function(){ return JSON.stringify(this) };
} else if (opciones.dataType == "xml") { //si se espera un xml
    response = http_request.responseXML;
    response.__proto__.toString = function(){ return this.innerHTML };
}

Por otro lado, si http_request.status no devuelve un valor en el rango de 200 a 299 (o 304), significa que el servidor respondió con un error (por ejemplo, "404 Not Found"). En ese caso, si se le pasó una función (o varias) como parámetro de error, se ejecuta como callback.

if (typeof opciones.error !== "undefined") {
    var statusText = (http_request.statusText  || "").replace(/^\d+ /,"");
    if (typeof opciones.error === "function")
        opciones.error = [ opciones.error ];
    var errorLength = opciones.error.length;
    for (var i = 0; i < errorLength; i++) {
        opciones.error[i](http_request, status, statusText);
    }
}

3. Alternativa más moderna

Otra opción es utilizar fetch(), mucho más práctica y sencilla de utilizar. Esta opción está muy bien descripta en la respuesta de MitsuG. Sin embargo, aún no es compatible con IE ni Safari.

Al día de esta respuesta la API Fetch esta soportada por los navegadores en su gran mayoría como lo demuestra la imagen siguiente

Soporte de Fetch

EJEMPLO PETICIÓN GET

Tienes una URL almacenada dentro de una variable de este modo

const url = `https://jsonplaceholder.typicode.com/posts`

Si hacemos lo siguiente

const url = `https://jsonplaceholder.typicode.com/posts`


fetch(url)
   .then(data => console.log(data))

Obtenemos como resultado lo siguiente

[object Response] { arrayBuffer: function arrayBuffer() { [native code] }, blob: function blob() { [native code] }, body: [object ReadableStream] { ... }, bodyUsed: false, clone: function clone() { [native code] }, formData: function formData() { [native code] }, headers: [object Headers] { append: function append() { [native code] }, delete: function delete() { [native code] }, entries: function entries() { [native code] }, forEach: function forEach() { [native code] }, get: function get() { [native code] }, has: function has() { [native code] }, keys: function keys() { [native code] }, set: function set() { [native code] }, values: function values() { [native code] } }, json: function json() { [native code] }, ok: true, redirected: false, status: 200, statusText: "", text: function text() { [native code] }, type: "cors", url: "https://jsonplaceholder.typicode.com/posts" }

Ahora por medio de la API Fetch pa procesamos de este modo mediante promises

fetch(url)
   .then(data => data.json())
   .then(data => {
  console.log(data)
})

MANEJANDO LOS ERRORES AL MOMENTO DE HACER LA PETICIÓN

Podemos recibir y reconocer los errores de la petición por medio de: catch(error)

fetch(url)
   .then(data => data.json())
   .then(data => console.log(data))
   .catch(error => console.log(error))

MOSTRANDO EL ERROR EXACTO

Si queremos mostrar el error exacto por el cual no se procesó la petición GET podemos añadir al error el acceso a message que contiene dicho mensaje

fetch(url)
   .then(d => data.json())
   .then(data => console.log(data))
   .catch(error => console.log(error.message))

Como notas he cambiado intencionalmente el nombre de data por d solo en una parte del código por lo cual el mensaje será el siguiente

"data is not defined"

PASANDO PARÁMETROS A LA PETICIÓN GET

Pasar parámetros a nuestra petición GET lo podemos hacer del modo siguiente

const datos = new URLSearchParams({
      id: 2
})

La interfaz URLSerachParams permite trabajar con parámetros pasados a URLs, se pasa un objeto donde la clave es el referente al nombre de la clave en el json que estamos obteniendo, el valor 2 es el valor dinámico que aplicaremos para filtrar de toda la data que solo nos muestre aquel registro que tenga el id 2

COMPONIENDO A LA URL CON PARÁMETROS

const url = `https://jsonplaceholder.typicode.com/posts?${ datos.toString() }`

Hacemos uso de toString por que devuelve una cadena de texto que contiene el parámetro a consultar usado en una URL.

USO DE ASYNC & AWAIT

Con la implementación de estas 2 características entedemos que una función asíncroma que contiene un elemento precedido por await se va a pausar en su ejecución hasta obtener el resultado satisfactorio de la promise

The first example of using promise- driven fetch would now look like this

const url = `https://jsonplaceholder.typicode.com/posts`

let fetchPosts = async() => {
  try{
    const response = await fetch(url)
    const data = await response.json()
    console.log(data)
  }catch(error){
    console.log(error.message)
  }
}

fetchPosts()

CLARIFICATIONS

• We handle errors through a blocktry{....} catch(error){....}
• We can also access the error message when processing the request througherror.message

PASSING A PARAMETER TO A QUERY

const datos = new URLSearchParams({
      id: 2
})

const url = `https://jsonplaceholder.typicode.com/posts?${ datos.toString() }`

let fetchPosts = async() => {
  try{
    const response = await (await fetch(url)).json()
    console.log(response)
  }catch(error){
    console.log(error.message)
  }
}

fetchPosts()