Home / Questions / 25798
Accepted
Alvaro Montoro
Asked: 2020-10-02 18:48:00 +0800 CST 2020-10-02 18:48:00 +0800 CST

如何在没有库的情况下进行 AJAX 调用？

  • 772

使用 jQuery 和其他 JavaScript 库，您可以使用以下方式轻松进行 AJAX 调用：

$.ajax({
   url: "miURl",
   method: "GET",
   data: "var1=valor1&var2=valor2",
   success: function(d) {
      // código aquí
   }
});

问题是，在某些项目中，我发现我添加 JavaScript 库专门用于使用 AJAX 函数和非常基本的调用（主要是 GET，其中我不关心错误，只关心结果，如果有的话）......和仅仅为此添加一个 85-300KB 的文件并不是很有意义。

一个基本的 JavaScript 函数是什么success样子error的它是如何做到的jQuery.ajax？

响应必须独立于它运行的服务器，如果不可能，那么它必须适用于 Apache。

javascript

3 Answers

  1. Best Answer

    响应必须独立于它运行的服务器，如果不可能，那么它必须适用于 Apache。

    无论您使用什么库，所有内容都将转换为相同的代码（或类似的代码，但使用相同的标准），服务器将解释相同的请求。

    资料来源：AJAX 是如何工作的？.

    您负责橙色部分，其余部分在服务器上预定义。

    我将把我的答案分成 2 个时间线；）

    老套

    这种形式是经典且实用的多浏览器，也是多年来的标准。为我们提供这个的类是XMLHttpRequest接口。

    只需创建一个对象XMLHttpRequest：

    const xhr = new XMLHttpRequest();

    然后，我们必须通过方法指定open以下参数：

    • 请求方法
    • 资源网址
    • 指示它是否应该是异步的标志（默认为 true）

    继续示例，我们可以执行以下操作：

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

    有了这个，我们已经为请求建立了参数。我们仍然需要为请求生命周期的请求阶段关联一个函数。

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

    AJAX 请求在其加载期间有一个生命周期

    这些是：

    • 0：请求尚未初始化
    • 1：与服务器建立连接
    • 2：请求发送
    • 3：请愿流程
    • 4：回答就绪

    正是出于这个原因，我们必须在 阶段 行动4，当答案为我们准备好时（除了特殊情况，一如既往，它可以在其他阶段行动）：

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

    最后，我们发送请求：

    xhr.send();

    附件：POST发送数据

    GET在请求中，我们不能在请求的正文中发送数据，这并不是什么新鲜事；像 jQuery 这样的库所做的是读取我们传递给data它们的对象并将它们分组?clave=valor以最终将它们附加到 URL。

    通过该方法POST 可以发送数据，为此我们有一些我在下面提到的选项。

    表单数据

    FormData是一个接口，它允许我们submit通过发送我们添加到它的数据来模拟表单clave/valor，事实上，这个接口使用 mime multipart/form-data。

    让我们看一个例子：

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

    手动方式

    这种形式和 with 是一样的FormData，不同的是这里你像获取参数一样手动操作：

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

    JSON

    要通过XMLHttpRequest仅使用JSON.stringify序列化该对象来发送对象：

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

    新学校

    最近发布了一个基于FetchPromesas的新 API 。不知何故，它使代码更干净。

    得到

    要发出请求，只需传递资源的 并使用和分别表示成功和错误GET就足够了。URLthencatch

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

    或者，如果我们希望收到 aJSON我们必须包含相应的标头：

    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'));

    但是这个替代方案将被广泛使用还有另一个原因，它与即将推出的EcmaScript 功能有关，即Async/ Await 。

    Fetch和Async/Await之间有什么关联？

    这很简单。Async/Await将使等待异步过程完成成为可能，在我们需要这种行为的情况下为我们提供了一个明显的优势和对一般程序后端程序员的自然性。我们可以通过一个例子更好地理解它：

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

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

    有些人反对这个新特性，认为它扼杀了 JavaScript 的异步特性。

    结论

    阶段 3+ 的提案实际上得到了保证；在第 2 阶段，他们很有可能被包括在内。

    我们目前有转译器，允许我们使用EcmaScript 6,7 和 8 以及该语言中的未来包含，而不会失去跨浏览器的兼容性。最著名的之一是将现代代码转换为 EcmaScript 5 (JavaScript 2009)的Babel 。

    • 33

  2. 1. 代码

    我把这个函数放在一起，它的语法与你完全相同jQuery.ajax，你只需将它包含在你的代码中就可以使用它。它也被编写为与旧浏览器兼容。

    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;
}

    已实施的选项

    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).


    1. 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.


    1. 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).


    1. 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.

    • 10

  3. 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

    使用 Promise驱动的fetch的第一个示例现在看起来像这样

    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()

    澄清

    • 错误通过块处理try{....} catch(error){....}
    • 我们也可以在处理请求时通过error.message

    将参数传递给查询

    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()
    • 2