{"id":58226,"date":"2022-10-18T09:55:44","date_gmt":"2022-10-18T07:55:44","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=58226&#038;post_type=knowledgebase&#038;preview_id=58226"},"modified":"2025-10-01T21:31:10","modified_gmt":"2025-10-01T19:31:10","slug":"javascript-peticion-http","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/","title":{"rendered":"Gu\u00eda de Peticiones HTTP en JavaScript"},"content":{"rendered":"<p>La interacci\u00f3n entre el <a href=\"https:\/\/kinqsta.com\/es\/blog\/backend-vs-frontend\/\">frontend y el backend<\/a> de los sitios web es posible a trav\u00e9s de las peticiones HTTP. Funcionalidades como la actualizaci\u00f3n de un usuario nuevo\/antiguo en una base de datos, la publicaci\u00f3n de una entrada en el blog desde el <a href=\"https:\/\/kinqsta.com\/es\/blog\/panel-control-administracion-wordpress\/\">panel de control de WordPress<\/a>, la eliminaci\u00f3n de una foto de tu perfil y la actualizaci\u00f3n de tu biograf\u00eda requieren una interacci\u00f3n entre un servidor y un cliente para modificar los datos.<\/p>\n<p>Cuando construimos aplicaciones web \u2014 tanto frontend como full stack web apps \u2014 a menudo interactuamos con datos almacenados en diferentes bases de datos y servidores. Estos servidores pueden pertenecer a terceros o ser creados por los desarrolladores de un proyecto.<\/p>\n\n<p>Para interactuar con estos servidores, podemos hacer uso de diferentes m\u00e9todos HTTP para solicitar datos. Podemos crear, leer, actualizar y eliminar (o CRUD) datos en los servidores utilizando verbos HTTP espec\u00edficos como POST, GET, PUT\/PATCH y DELETE.<\/p>\n<p>En este tutorial, aprender\u00e1s las distintas formas en las que puedes hacer peticiones HTTP a servidores remotos y realizar operaciones CRUD <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-javascript\/\">en JavaScript<\/a>.<\/p>\n<p>Cada secci\u00f3n presentar\u00e1 un nuevo m\u00e9todo para enviar peticiones HTTP. Empezaremos por los m\u00e9todos incorporados, como la API fetch y el objeto XMLHttpRequest, antes de ver algunas bibliotecas de peticiones HTTP de c\u00f3digo abierto, como Axios y SuperAgent.<\/p>\n<p>\u00a1Empecemos!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>\u00bfQu\u00e9 Es Una Petici\u00f3n HTTP en JavaScript?<\/h2>\n<p>Las <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-una-peticion-http\/\">peticiones HTTP<\/a> en JavaScript son un conjunto de m\u00e9todos predefinidos que se utilizan para interactuar con los datos almacenados en los servidores.<\/p>\n<p>Cada solicitud enviada a un servidor incluye un punto final y el tipo de solicitud que se env\u00eda. Puedes ver un punto final como una pasarela entre dos programas\u02d0 el cliente y el servidor.<\/p>\n<p>El cliente es el programa que env\u00eda una solicitud, mientras que el servidor es el que recibe la solicitud. El servidor devuelve una respuesta en funci\u00f3n de la validez de la solicitud. Si la solicitud tiene \u00e9xito, el servidor devuelve los datos en formato XML o JSON (JSON en la mayor\u00eda de los casos), y si la solicitud falla, el servidor devuelve un <a href=\"https:\/\/kinqsta.com\/es\/blog\/errores-en-javascript\/\">mensaje de error<\/a>.<\/p>\n<p>Las respuestas que devuelve el servidor suelen estar asociadas a <a href=\"https:\/\/kinqsta.com\/es\/blog\/codigos-de-estado-de-http\/\">c\u00f3digos de estado<\/a>. Estos c\u00f3digos nos ayudan a entender lo que el servidor intenta decir cuando recibe una petici\u00f3n. Aqu\u00ed tienes algunos de ellos y su significado:<\/p>\n<ul>\n<li>100-199 denota una respuesta informativa.<\/li>\n<li>200-299 denota una solicitud exitosa.<\/li>\n<li>300-399 denota una redirecci\u00f3n.<\/li>\n<li>400-499 indica un error del cliente.<\/li>\n<li>500-599 denota un <a href=\"https:\/\/kinqsta.com\/es\/blog\/500-internal-server-error\/\">error del servidor<\/a>.<\/li>\n<\/ul>\n<p>Hablaremos m\u00e1s sobre algunos de ellos en las secciones siguientes.<\/p>\n<p>En la siguiente secci\u00f3n, ver\u00e1s las diferentes formas en que puedes hacer peticiones HTTP en JavaScript.<\/p>\n<h2>C\u00f3mo Hacer Una Petici\u00f3n HTTP en JavaScript<\/h2>\n<p>Esta secci\u00f3n estar\u00e1 dividida en sub-secciones, cada una de las cuales te ense\u00f1ar\u00e1 diferentes m\u00e9todos que puedes utilizar para hacer peticiones HTTP en JavaScript.<\/p>\n<p>Cada m\u00e9todo tratado tendr\u00e1 un ejemplo que mostrar\u00e1 c\u00f3mo enviar peticiones POST, GET, PUT\/PATCH y DELETE a los servidores.<\/p>\n<p>El <a href=\"https:\/\/jsonplaceholder.typicode.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">marcador de posici\u00f3n JSON<\/a> servir\u00e1 como servidor remoto\/punto final donde se enviar\u00e1n todas nuestras peticiones.<\/p>\n<p>\u00a1Vamos a sumergirnos!<\/p>\n<h3>1. C\u00f3mo hacer una petici\u00f3n HTTP en JavaScript utilizando XMLHttpRequest (AJAX)<\/h3>\n<p>XMLHttpRequest es un objeto incorporado en JavaScript que se utiliza para interactuar con los servidores y cargar contenido en las p\u00e1ginas web sin recargar el navegador.<\/p>\n<p>En esta secci\u00f3n, ver\u00e1s c\u00f3mo enviar solicitudes POST, GET, PUT\/PATCH y DELETE utilizando XMLHttpRequest.<\/p>\n<p>AJAX se utiliza para realizar peticiones HTTP as\u00edncronas. Esto significa simplemente que mientras la respuesta de una petici\u00f3n est\u00e1 pendiente, otras partes de tu c\u00f3digo JavaScript pueden seguir ejecut\u00e1ndose sin esperar a que la petici\u00f3n se complete primero.<\/p>\n<p>Tambi\u00e9n puedes introducir modificaciones en una secci\u00f3n concreta de tu p\u00e1gina web sin obligar al visitante a recargar toda la p\u00e1gina utilizando AJAX.<\/p>\n<p>AJAX, por defecto, funciona con el objeto XMLHttpRequest, por lo que los ejemplos de esta secci\u00f3n pueden considerarse como peticiones AJAX.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Inicialmente, pod\u00edas especificar si una petici\u00f3n deb\u00eda ser as\u00edncrona o no utilizando un par\u00e1metro <code>true<\/code> (as\u00edncrono) y <code>false<\/code> en tu petici\u00f3n, pero esto \u00faltimo ya est\u00e1 obsoleto.<\/p>\n<\/aside>\n\n<h4>C\u00f3mo enviar una solicitud GET en JavaScript utilizando XMLHttpRequest<\/h4>\n<p>Utilizas la petici\u00f3n GET cuando quieres recuperar datos de un servidor. Para enviar una solicitud GET con \u00e9xito utilizando XMLHttpRequest en JavaScript, debes asegurarte de que lo siguiente se hace correctamente:<\/p>\n<ol>\n<li>Crea un nuevo objeto XMLHttpRequest.<\/li>\n<li>Abre una conexi\u00f3n especificando el tipo de petici\u00f3n y el punto final (la URL del servidor).<\/li>\n<li>Env\u00eda la petici\u00f3n.<\/li>\n<li>Espera la respuesta del servidor.<\/li>\n<\/ol>\n<p>Ahora que hemos visto algunos de los pasos para enviar una solicitud POST utilizando XMLHttpRequest, veamos un ejemplo de c\u00f3digo\u02d0<\/p>\n<pre><code class=\"language-js\">const xhr = new XMLHttpRequest();\nxhr.open(\"GET\", \"https:\/\/jsonplaceholder.typicode.com\/users\");\nxhr.send();\nxhr.responseType = \"json\";\nxhr.onload = () =&gt; {\n  if (xhr.readyState == 4 && xhr.status == 200) {\n    const data = xhr.response;\n    console.log(data);\n  } else {\n    console.log(`Error: ${xhr.status}`);\n  }\n};<\/code><\/pre>\n<p>Desglosaremos el c\u00f3digo anterior para ayudarte a entender lo que ocurre aqu\u00ed.<\/p>\n<p>Lo primero que hicimos fue crear un nuevo objeto XMLHttpRequest y almacenarlo en una variable llamada <code>xhr<\/code>. Esto es:<\/p>\n<pre><code class=\"language-js\">const xhr = new XMLHttpRequest();<\/code><\/pre>\n<p>A continuaci\u00f3n, especificamos el tipo de petici\u00f3n (GET) y el punto final al que se enviar\u00e1 la petici\u00f3n (en este caso,\u00bb<a href=\"https:\/\/jsonplaceholder.typicode.com\/users\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/jsonplaceholder.typicode.com\/users<\/a>\u00ab)\u02d0<\/p>\n<pre><code class=\"language-js\">xhr.open(\"GET\", \"https:\/\/jsonplaceholder.typicode.com\/users\");<\/code><\/pre>\n<p>Para enviar la petici\u00f3n al servidor, utilizamos el m\u00e9todo <code> send()<\/code>.<\/p>\n<p>Cuando el servidor devuelve los datos, puedes especificar el formato en el que se devuelven los datos.<\/p>\n<p>En la mayor\u00eda de los casos, se utiliza JSON. As\u00ed que nos aseguramos de que nuestros datos se devuelvan en JSON a\u00f1adiendo esto:<\/p>\n<pre><code class=\"language-js\">xhr.responseType = \"json\";<\/code><\/pre>\n<p>En este punto, hemos enviado con \u00e9xito una petici\u00f3n GET. Lo siguiente es escuchar lo que dice el servidor utilizando un escuchador de eventos:<\/p>\n<pre><code class=\"language-js\">xhr.onload = () =&gt; {\n  if (xhr.readyState == 4 && xhr.status == 200) {\n    const data = xhr.response;\n    console.log(data);\n  } else {\n    console.log(`Error: ${xhr.status}`);\n  }\n};<\/code><\/pre>\n<p>En el c\u00f3digo anterior, utilizamos el escuchador de eventos <code>onload<\/code>. Utilizando una sentencia <code>if<\/code>, comprobamos el estado de la respuesta del servidor.<\/p>\n<p>Si el estado del cliente es 4 (DONE) y si el c\u00f3digo de estado es 200 (successful), los datos se registrar\u00e1n en la consola. En caso contrario, aparecer\u00e1 un mensaje de error mostrando el estado de error.<\/p>\n<p>Si has seguido hasta este punto sin ning\u00fan error, deber\u00edas tener una matriz de objetos en tu consola\u02d0<\/p>\n<pre><code class=\"language-js\">[{\u2026}, {\u2026}, {\u2026}, {\u2026}, {\u2026}, {\u2026}, {\u2026}, {\u2026}, {\u2026}, {\u2026}]<\/code><\/pre>\n<p>Estos son los datos recuperados del servidor.<\/p>\n<h4>C\u00f3mo enviar una petici\u00f3n POST en JavaScript utilizando XMLHttpRequest<\/h4>\n<p>Con la petici\u00f3n POST, puedes enviar nueva informaci\u00f3n (datos) al servidor\/base de datos como un objeto. El objeto puede ser informaci\u00f3n sobre un nuevo usuario, una nueva entrada en la lista de tareas, o cualquier otra cosa que necesites registrar.<\/p>\n<p>El ejemplo de c\u00f3digo que ver\u00e1s en esta secci\u00f3n es similar al de la secci\u00f3n anterior. La principal diferencia es que las peticiones POST requieren cierta informaci\u00f3n que suele almacenarse en un objeto antes de ser enviada al servidor.<\/p>\n<p>Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-js\">const xhr = new XMLHttpRequest();\nxhr.open(\"POST\", \"https:\/\/jsonplaceholder.typicode.com\/posts\");\nxhr.setRequestHeader(\"Content-Type\", \"application\/x-www-form-urlencoded\");\nconst body = JSON.stringify({\n  title: \"Hello World\",\n  body: \"My POST request\",\n  userId: 900,\n});\nxhr.onload = () =&gt; {\n  if (xhr.readyState == 4 && xhr.status == 201) {\n    console.log(JSON.parse(xhr.responseText));\n  } else {\n    console.log(`Error: ${xhr.status}`);\n  }\n};\nxhr.send(body);<\/code><\/pre>\n<p>En el c\u00f3digo anterior, la informaci\u00f3n que se enviar\u00e1 al servidor se almacena en una variable llamada <code>body<\/code>. Contiene tres propiedades\u02d0 <code>title<\/code>, <code>body<\/code>, y <code>userId<\/code>.<\/p>\n<p>Ten en cuenta que la variable <code>body<\/code> que contiene el objeto debe ser convertida en un objeto JSON antes de ser enviada al servidor. La conversi\u00f3n se realiza mediante el m\u00e9todo <code>JSON.stringify()<\/code>.<\/p>\n<p>Para asegurarte de que el objeto JSON se env\u00eda al servidor, se pasa como par\u00e1metro al m\u00e9todo <code>send()<\/code>:<\/p>\n<pre><code class=\"language-js\">xhr.send(body);<\/code><\/pre>\n<h4>C\u00f3mo enviar una solicitud PATCH en JavaScript utilizando XMLHttpRequest<\/h4>\n<p>La petici\u00f3n PATCH se utiliza para actualizar las propiedades especificadas de un objeto. Esto es diferente del m\u00e9todo PUT, que actualiza la totalidad de un objeto.<\/p>\n<p>Aqu\u00ed tienes un ejemplo de solicitud PATCH utilizando XMLHttpRequest en JavaScript:<\/p>\n<pre><code class=\"language-js\">const xhr = new XMLHttpRequest();\nxhr.open(\"PATCH\", \"https:\/\/jsonplaceholder.typicode.com\/posts\/101\");\nxhr.setRequestHeader(\"Content-type\", \"application\/json; charset=utf-8\");\nconst body = JSON.stringify({\n  body: \"My PATCH request\",\n});\nxhr.onload = () =&gt; {\n  var data = JSON.parse(xhr.responseText);\n  if (xhr.readyState == 4 && xhr.status == \"200\") {\n    console.log(data);\n  } else {\n    console.log(`Error: ${xhr.status}`);\n  }\n};\nxhr.send(body);<\/code><\/pre>\n<p>El c\u00f3digo anterior, si tiene \u00e9xito, registrar\u00e1 la parte del objeto que se ha actualizado y enviado al servidor.<\/p>\n<h4>C\u00f3mo enviar una solicitud DELETE en JavaScript utilizando XMLHttpRequest<\/h4>\n<p>Como su nombre indica, el m\u00e9todo DELETE se utiliza para eliminar datos de un servidor. Esto es igual para cualquier m\u00e9todo HTTP de JavaScript.<\/p>\n<p>En la mayor\u00eda de los casos, tendr\u00e1s que especificar el ID de los datos que quieres eliminar. El ID suele ser un par\u00e1metro en el punto final\/URL.<\/p>\n<p>Veamos un ejemplo de solicitud DELETE\u02d0<\/p>\n<pre><code class=\"language-js\">const xhr = new XMLHttpRequest();\nxhr.open(\"DELETE\", \"https:\/\/jsonplaceholder.typicode.com\/posts\/3\");\nxhr.onload = function () {\n  var data = JSON.parse(xhr.responseText);\n  if (xhr.readyState == 4 && xhr.status == \"200\") {\n    console.log(data);\n  } else {\n    console.log(`Error: ${xhr.status}`);\n  }\n};\nxhr.send();<\/code><\/pre>\n<p>El c\u00f3digo anterior eliminar\u00e1 un objeto con una entrada con el ID 3 especificado en el endpoint (\u00ab<a href=\"https:\/\/jsonplaceholder.typicode.com\/posts\/3\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/jsonplaceholder.typicode.com\/posts\/3<\/a>\u00ab).<\/p>\n<h3>2. C\u00f3mo hacer una petici\u00f3n HTTP en JavaScript con jQuery<\/h3>\n<p>jQuery simplifica el proceso de obtenci\u00f3n de datos de los servidores haciendo la sintaxis m\u00e1s corta y sencilla.<\/p>\n<p>En esta secci\u00f3n, ver\u00e1s c\u00f3mo hacer peticiones <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-http3\/\">HTTP<\/a> utilizando diferentes m\u00e9todos de jQuery.<\/p>\n<h4>C\u00f3mo enviar una petici\u00f3n GET en JavaScript utilizando jQuery<\/h4>\n<p>jQuery nos proporciona el m\u00e9todo <code>$.get()<\/code> para enviar solicitudes GET a los servidores. El m\u00e9todo toma dos par\u00e1metros: la URL al servidor y una funci\u00f3n de devoluci\u00f3n de llamada que se ejecuta si la petici\u00f3n tiene \u00e9xito.<\/p>\n<p>Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-js\">$.get(\"https:\/\/jsonplaceholder.typicode.com\/users\", (data, status) =&gt; {\n  console.log(data);\n});<\/code><\/pre>\n<p>Como se puede ver en el c\u00f3digo anterior, el m\u00e9todo <code>$.get()<\/code> toma como par\u00e1metros la URL (<a href=\"https:\/\/jsonplaceholder.typicode.com\/users\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/jsonplaceholder.typicode.com\/users<\/a>) y una funci\u00f3n an\u00f3nima de devoluci\u00f3n de llamada.<\/p>\n<p>A trav\u00e9s de la funci\u00f3n de devoluci\u00f3n de llamada, puedes acceder a los datos de la solicitud y al estado de la misma. En nuestro caso, registramos los datos en la consola.<\/p>\n<p>As\u00ed de sencillo es enviar una petici\u00f3n GET con jQuery.<\/p>\n<h4>C\u00f3mo enviar una solicitud POST en JavaScript utilizando jQuery<\/h4>\n<p>Para enviar una solicitud POST con jQuery, utilizamos el m\u00e9todo <code>$.post()<\/code>. Toma tres par\u00e1metros: la URL, los datos que se enviar\u00e1n al servidor y una funci\u00f3n de devoluci\u00f3n de llamada.<\/p>\n<pre><code class=\"language-js\">const body = JSON.stringify({\n  title: \"Hello World\",\n  body: \"My POST request\",\n  userId: 900,\n});\n$.post(\"https:\/\/jsonplaceholder.typicode.com\/users\", body, (data, status) =&gt; {\n  console.log(data);\n});<\/code><\/pre>\n<p>En el c\u00f3digo anterior, creamos un objeto para enviarlo al servidor y lo almacenamos en una variable llamada <code>body<\/code>. Esta variable se pas\u00f3 como segundo par\u00e1metro en el m\u00e9todo <code>$.post()<\/code>.<\/p>\n<p>Utilizando la funci\u00f3n de devoluci\u00f3n de llamada, registramos el resultado de la petici\u00f3n en la consola.<\/p>\n<h3>3. C\u00f3mo hacer peticiones as\u00edncronas en jQuery utilizando el m\u00e9todo $.ajax()<\/h3>\n<p>Antes de proceder al env\u00edo de peticiones PATCH y DELETE, vamos a hablar del m\u00e9todo <code>$.ajax()<\/code>.<\/p>\n<p>El m\u00e9todo <code>$.ajax()<\/code> en jQuery se utiliza para realizar peticiones as\u00edncronas.<\/p>\n<p>La sintaxis es diferente a la de los dem\u00e1s.<\/p>\n<p>As\u00ed es como har\u00edas una petici\u00f3n GET utilizando el m\u00e9todo <code>$.ajax()<\/code>:<\/p>\n<pre><code class=\"language-js\">$.ajax({\n  url: \"https:\/\/jsonplaceholder.typicode.com\/users\",\n  type: \"GET\",\n  success: function (result) {\n    console.log(result);\n  },\n});<\/code><\/pre>\n<p>El m\u00e9todo <code>$.ajax()<\/code> tiene diferentes par\u00e1metros que podemos utilizar.<\/p>\n<p>En el c\u00f3digo anterior, el par\u00e1metro <code>url<\/code> especifica la URL al servidor, el par\u00e1metro <code>type<\/code> especifica el tipo de solicitud, y el par\u00e1metro <code>success<\/code> llama a una funci\u00f3n de devoluci\u00f3n de llamada si la solicitud tiene \u00e9xito.<\/p>\n<p>En la siguiente secci\u00f3n, ver\u00e1s c\u00f3mo enviar solicitudes PATCH y DELETE utilizando el m\u00e9todo <code>$.ajax()<\/code> de jQuery.<\/p>\n<h4>C\u00f3mo enviar una solicitud PATCH en JavaScript utilizando el m\u00e9todo $.ajax() de jQuery<\/h4>\n<p>En esta secci\u00f3n, ver\u00e1s c\u00f3mo enviar solicitudes PATCH utilizando el m\u00e9todo <code>$.ajax()<\/code> de jQuery.<\/p>\n<p>Este es el c\u00f3digo:<\/p>\n<pre><code class=\"language-js\">const body = JSON.stringify({\n  body: \"My PATCH request\",\n});\n$.ajax({\n  url: \"https:\/\/jsonplaceholder.typicode.com\/posts\/101\",\n  type: \"PATCH\",\n  data: body,\n  success: function (result) {\n    console.log(result);\n  },\n});<\/code><\/pre>\n<p>En el c\u00f3digo anterior, la propiedad a actualizar se almacena en la variable <code>body<\/code>. \u00c9sta se utiliza como valor del par\u00e1metro <code>data<\/code>.<\/p>\n<p>Si la solicitud tiene \u00e9xito, se ejecutar\u00e1 la funci\u00f3n del par\u00e1metro <code>success<\/code>.<\/p>\n<h4>C\u00f3mo enviar una solicitud DELETE en JavaScript utilizando el m\u00e9todo $.ajax() de jQuery<\/h4>\n<p>Enviar una solicitud DELETE utilizando el m\u00e9todo <code>$.ajax()<\/code> de jQuery s\u00f3lo requiere unas pocas l\u00edneas de c\u00f3digo.<\/p>\n<p>Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-js\">$.ajax({\n  url: \"https:\/\/jsonplaceholder.typicode.com\/posts\/3\",\n  type: \"DELETE\",\n  success: function (result) {\n    console.log(result)\n  },\n});<\/code><\/pre>\n<p>Como se puede ver arriba, todo lo que tuvimos que hacer fue especificar la URL con el ID del objeto a eliminar, el tipo de solicitud y una funci\u00f3n que se ejecuta si la solicitud tiene \u00e9xito.<\/p>\n<h4>C\u00f3mo utilizar el m\u00e9todo $.getJSON en jQuery<\/h4>\n<p>El m\u00e9todo <code>$.getJSON<\/code> proporciona una forma m\u00e1s corta de enviar solicitudes GET.<\/p>\n<p>Para realizar una petici\u00f3n con \u00e9xito, s\u00f3lo tienes que especificar la URL y la funci\u00f3n de devoluci\u00f3n de llamada. Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-js\">$.getJSON(\"https:\/\/jsonplaceholder.typicode.com\/users\", function (result) {\n  console.log(result)\n});<\/code><\/pre>\n<p>En el c\u00f3digo anterior, hemos pasado la URL al servidor y la funci\u00f3n que se ejecuta despu\u00e9s de que la petici\u00f3n tenga \u00e9xito como par\u00e1metros del m\u00e9todo <code>$.getJSON<\/code>.<\/p>\n<p>El c\u00f3digo anterior registrar\u00e1 en la consola una matriz de objetos con informaci\u00f3n del usuario.<\/p>\n<h3>4. C\u00f3mo hacer una petici\u00f3n HTTP en JavaScript utilizando la API Fetch<\/h3>\n<p>La API <code>fetch<\/code> es una de las formas m\u00e1s populares de interactuar con los servidores utilizando JavaScript. Es una API nativa de JavaScript que tiene soporte para promesas al hacer peticiones.<\/p>\n<p>La sintaxis para utilizar la API <code>fetch<\/code> es muy f\u00e1cil de entender, como ver\u00e1s en las secciones siguientes.<\/p>\n<h4>C\u00f3mo enviar una solicitud GET en JavaScript utilizando la API Fetch<\/h4>\n<p>El env\u00edo de una solicitud GET utilizando la API <code>fetch<\/code> s\u00f3lo requiere la URL. \u00c9sta devuelve una promesa a la que puedes acceder utilizando el m\u00e9todo <code>then()<\/code> o las palabras clave <code>async<\/code> y <code>await<\/code>.<\/p>\n<p>Veamos un ejemplo:<\/p>\n<pre><code class=\"language-js\">fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n.then((response) =&gt; response.json())\n.then((json) =&gt; console.log(json));<\/code><\/pre>\n<p>En el c\u00f3digo anterior, pasamos la URL al m\u00e9todo <code>fetch<\/code>; \u00e9ste devuelve una promesa. A continuaci\u00f3n, accedimos a la respuesta del servidor mediante el m\u00e9todo <code>then()<\/code>. La respuesta se convirti\u00f3 en un objeto JSON mediante el m\u00e9todo <code>response.json()<\/code>.<\/p>\n<p>Tras obtener la respuesta, utilizamos otro m\u00e9todo <code>then()<\/code> para registrar los datos en la consola.<\/p>\n<h4>C\u00f3mo enviar una solicitud POST en JavaScript utilizando la API Fetch<\/h4>\n<p>El m\u00e9todo fetch tiene un segundo par\u00e1metro que nos permite especificar el cuerpo (datos a enviar) y el tipo de solicitud a enviar. Este segundo par\u00e1metro nos permite enviar peticiones POST y PATCH.<\/p>\n<p>Echa un vistazo a este c\u00f3digo de ejemplo:<\/p>\n<pre><code class=\"language-js\">fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\", {\n  method: \"POST\",\n  body: JSON.stringify({\n    title: \"Hello World\",\n    body: \"My POST request\",\n    userId: 900,\n  }),\n  headers: {\n    \"Content-type\": \"application\/json; charset=UTF-8\",\n  },\n})\n.then((response) =&gt; response.json())\n.then((json) =&gt; console.log(json));<\/code><\/pre>\n<p>En el c\u00f3digo anterior, a\u00f1adimos opciones de solicitud en el segundo par\u00e1metro del m\u00e9todo <code>fetch<\/code>. <code>method<\/code> se utiliz\u00f3 para especificar el tipo de solicitud, <code>body<\/code> especific\u00f3 los datos que se enviar\u00edan al servidor y <code>headers<\/code> se utiliz\u00f3 para especificar que enviar\u00edamos datos JSON al servidor.<\/p>\n<p>Como hicimos antes al enviar una petici\u00f3n GET, se accedi\u00f3 a la promesa\/respuesta devuelta utilizando el m\u00e9todo <code>then()<\/code>.<\/p>\n<h4>C\u00f3mo enviar una solicitud PUT en JavaScript utilizando la API Fetch<\/h4>\n<p>En otras secciones en las que enviamos una petici\u00f3n para actualizar un objeto en el servidor, hicimos uso de PATCH. En esta secci\u00f3n, utilizaremos PUT, que te permite actualizar la totalidad de un objeto.<\/p>\n<p>Aqu\u00ed tienes un ejemplo que utiliza la API <code>fetch<\/code>:<\/p>\n<pre><code class=\"language-js\">fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\/1\", {\n  method: \"PUT\",\n  body: JSON.stringify({\n    id: 1,\n    title: \"My PUT request\",\n    body: \"Updating the entire object\",\n    userId: 1,\n  }),\n  headers: {\n    \"Content-type\": \"application\/json; charset=UTF-8\",\n  },\n})\n.then((response) =&gt; response.json())\n.then((json) =&gt; console.log(json));<\/code><\/pre>\n<p>Como estamos enviando una solicitud PUT, se nos pide que proporcionemos los datos que se van a actualizar, que se pasan como valor a la opci\u00f3n de solicitud <code>body<\/code>.<\/p>\n<p>Tambi\u00e9n especificamos el ID del objeto a actualizar como \u00faltimo par\u00e1metro de la URL. Si la petici\u00f3n se ejecuta correctamente, deber\u00edas ver el objeto actualizado registrado en la consola.<\/p>\n<h4>C\u00f3mo enviar una solicitud DELETE en JavaScript utilizando la API Fetch<\/h4>\n<p>Enviar una solicitud DELETE es bastante sencillo: todo lo que tienes que hacer es especificar el ID del objeto que se va a eliminar. Puedes utilizar el m\u00e9todo <code>then()<\/code> para recibir la respuesta del servidor, como hemos hecho con las otras peticiones.<\/p>\n<p>Aqu\u00ed tienes un ejemplo r\u00e1pido:<\/p>\n<pre><code class=\"language-js\">fetch(\"https:\/\/jsonplaceholder.typicode.com\/posts\/3\", {\n  method: \"DELETE\",\n});<\/code><\/pre>\n<p>El c\u00f3digo anterior eliminar\u00e1 un objeto con un ID de 3.<\/p>\n<h3>5. C\u00f3mo hacer una petici\u00f3n HTTP en JavaScript usando Axios<\/h3>\n<p>Axios es una biblioteca de terceros basada en promesas para enviar peticiones HTTP. Al igual que la mayor\u00eda de los clientes HTTP modernos, simplifica el proceso de env\u00edo de solicitudes a un servidor.<\/p>\n<p>En esta secci\u00f3n, aprender\u00e1s a enviar peticiones GET, POST, PUT y DELETE a un servidor utilizando Axios.<\/p>\n<p>Ten en cuenta que Axios no est\u00e1 integrado en JavaScript: tendr\u00e1s que instalarlo por separado para poder utilizar su funcionalidad. Para instalar Axios en tu proyecto, ejecuta el siguiente comando en el <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-npm\/\">terminal de tu proyecto<\/a>:<\/p>\n<pre><code class=\"language-js\">npm install axios<\/code><\/pre>\n<h4>C\u00f3mo enviar una solicitud GET en JavaScript utilizando Axios<\/h4>\n<p>Para enviar una solicitud GET utilizando Axios, s\u00f3lo tienes que pasar la URL al m\u00e9todo <code>get()<\/code>, que devuelve una promesa. Se puede acceder a la respuesta devuelta por la promesa mediante el m\u00e9todo <code>then()<\/code>.<\/p>\n<p>Veamos un ejemplo:<\/p>\n<pre><code class=\"language-js\">axios.get(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n.then((response) =&gt; console.log(response.data))\n.catch((error) =&gt; console.log(error));<\/code><\/pre>\n<p>El c\u00f3digo anterior registrar\u00e1 una matriz de objetos que contiene los datos devueltos por el servidor. Te dar\u00e1s cuenta de que no hemos tenido que cambiar los objetos devueltos a objetos JSON \u2014 Axios se encarga de esto bajo el cap\u00f3, y puedes acceder a los datos utilizando <code>response.data<\/code>.<\/p>\n<p>Para detectar cualquier error, utilizamos el m\u00e9todo <code>catch()<\/code>.<\/p>\n<h4>C\u00f3mo enviar una solicitud POST en JavaScript con Axios<\/h4>\n<p>La petici\u00f3n POST en Axios toma dos par\u00e1metros: la URL y los datos a enviar al servidor. Puedes almacenar los datos en una variable o pasarlos directamente como par\u00e1metro.<\/p>\n<p>A continuaci\u00f3n te explicamos c\u00f3mo hacerlo:<\/p>\n<pre><code class=\"language-js\">axios.post(\"https:\/\/jsonplaceholder.typicode.com\/posts\", {\n  title: \"POST request with Axios\",\n  body: \"POST request\",\n  userId: 10,\n})\n.then(function (response) {\n  console.log(response.data);\n})\n.then((error) =&gt; console.log(error))<\/code><\/pre>\n<p>En el ejemplo anterior, estamos enviando datos al servidor. Los datos se pasan como segundo par\u00e1metro al m\u00e9todo <code>post()<\/code>.<\/p>\n<p>Si la solicitud se env\u00eda con \u00e9xito, ver\u00e1s el resultado registrado en la consola.<\/p>\n<h4>C\u00f3mo enviar una solicitud PUT en JavaScript con Axios<\/h4>\n<p>Enviar una solicitud PUT con Axios es similar a enviar una solicitud POST. Para enviar una petici\u00f3n PUT, debes especificar la URL (incluyendo el ID del objeto a actualizar) y los datos a actualizar como segundo par\u00e1metro en el m\u00e9todo <code>put()<\/code>.<\/p>\n<p>El ejemplo siguiente actualizar\u00e1 un objeto con un ID de 10:<\/p>\n<pre><code class=\"language-js\">axios.put(\"https:\/\/jsonplaceholder.typicode.com\/posts\/10\", {\n  title: \"PUT request with Axios\",\n  body: \"PUT request\",\n  userId: 10,\n})\n.then(function (response) {\n  console.log(response.data);\n})\n.then((error) =&gt; console.log(error))<\/code><\/pre>\n<h4>C\u00f3mo enviar una solicitud DELETE en JavaScript con Axios<\/h4>\n<p>Para enviar una solicitud DELETE, debes especificar el ID del objeto a eliminar en la URL.<\/p>\n<p>Como siempre, tienes que especificar la URL junto con el ID del objeto que se va a borrar.<\/p>\n<p>Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-js\">axios.delete(\"https:\/\/jsonplaceholder.typicode.com\/posts\/10\")\n.then(function (response) {\n  console.log(response);\n})\n.then((error) =&gt; console.log(error))<\/code><\/pre>\n<h3>6. C\u00f3mo hacer una petici\u00f3n HTTP en JavaScript usando SuperAgent<\/h3>\n<p>SuperAgent es una de las bibliotecas m\u00e1s antiguas construidas para realizar peticiones HTTP en JavaScript. Al igual que Axios, admite promesas y tiene m\u00e9todos preconstruidos para enviar diversas peticiones HTTP a los servidores.<\/p>\n<p>Para utilizar SuperAgent, inst\u00e1lalo con el siguiente comando:<\/p>\n<pre><code class=\"language-js\">npm install superagent<\/code><\/pre>\n<p>Empezaremos con un ejemplo de solicitud GET.<\/p>\n<h4>C\u00f3mo enviar una petici\u00f3n GET en JavaScript con SuperAgent<\/h4>\n<p>SuperAgent nos proporciona un m\u00e9todo <code>get()<\/code> para enviar solicitudes GET. La URL se pasa como par\u00e1metro del m\u00e9todo.<\/p>\n<p>La promesa devuelta por la petici\u00f3n puede evaluarse entonces con el m\u00e9todo <code>end()<\/code>, como se ve en este ejemplo:<\/p>\n<pre><code class=\"language-js\">superagent\n.get(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n.end((error, response) =&gt; {\n  console.log(response.body);\n});<\/code><\/pre>\n<h4>C\u00f3mo enviar una solicitud POST en JavaScript utilizando el SuperAgent<\/h4>\n<p>Al enviar una solicitud POST con SuperAgent, pasas los datos que se van a enviar al servidor como par\u00e1metro del m\u00e9todo <code>send()<\/code> de SuperAgent:<\/p>\n<pre><code class=\"language-js\">superagent\n.post(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n.send({\n  title: \"POST request with SuperAgent\",\n  body: \"POST request\",\n  userId: 10,\n})\n.set(\"X-API-Key\", \"foobar\")\n.set(\"accept\", \"json\")\n.end((err, res) =&gt; {\n  console.log(res.body);\n});<\/code><\/pre>\n<p>En el c\u00f3digo anterior, la URL se pas\u00f3 como par\u00e1metro del m\u00e9todo <code>post()<\/code>. Los datos a enviar se pasaron al m\u00e9todo <code>send()<\/code>. Utilizando el m\u00e9todo <code>end()<\/code>, obtuvimos el resultado de la respuesta del servidor.<\/p>\n<h4>C\u00f3mo enviar una solicitud PUT en JavaScript utilizando el Superagente<\/h4>\n<p>Puedes enviar una solicitud PUT en SuperAgent utilizando el m\u00e9todo <code>put()<\/code>. Al igual que en el ejemplo de la \u00faltima secci\u00f3n, los datos a actualizar se pasar\u00edan como par\u00e1metro al m\u00e9todo <code>send()<\/code>.<\/p>\n<p>Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-js\">superagent\n.put(\"https:\/\/jsonplaceholder.typicode.com\/posts\/10\")\n.send({\n  title: \"PUT request with SuperAgent\",\n  body: \"PUT request\",\n  userId: 10,\n})\n.set(\"X-API-Key\", \"foobar\")\n.set(\"accept\", \"json\")\n.end((err, res) =&gt; {\n  console.log(res.body);\n});<\/code><\/pre>\n<h4>C\u00f3mo enviar una solicitud de borrado en JavaScript con el Superagente<\/h4>\n<p>Para enviar una solicitud de borrado, s\u00f3lo tienes que especificar el ID del objeto a borrar en la URL. \u00c9ste se utilizar\u00e1 como par\u00e1metro en el m\u00e9todo <code>delete()<\/code>.<\/p>\n<pre><code class=\"language-js\">superagent\n.delete(\"https:\/\/jsonplaceholder.typicode.com\/posts\/10\")\n.end((err, res) =&gt; {\n  console.log(res.body);\n});<\/code><\/pre>\n<h3>7. C\u00f3mo hacer una petici\u00f3n HTTP en JavaScript utilizando Qwest<\/h3>\n<p>Qwest es una biblioteca AJAX para interactuar con servidores. Actualmente est\u00e1 archivada en <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-github\/\">GitHub<\/a> \u2014 el creador dej\u00f3 de mantener la biblioteca con la aparici\u00f3n de la API <code>fetch<\/code> y Axios.<\/p>\n<p>Qwest tambi\u00e9n admite el uso de promesas.<\/p>\n<p>En las siguientes subsecciones, ver\u00e1s c\u00f3mo enviar solicitudes GET, POST, PUT y DELETE utilizando Qwest.<\/p>\n<h4>C\u00f3mo enviar una solicitud GET en JavaScript utilizando Qwest<\/h4>\n<p>Qwest tiene un m\u00e9todo <code>get()<\/code> que puede utilizarse para enviar solicitudes GET. A continuaci\u00f3n te explicamos c\u00f3mo utilizarlo:<\/p>\n<pre><code class=\"language-js\">qwest.get(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n\n.then((xhr, response) =&gt; console.log(response));<\/code><\/pre>\n<h4>C\u00f3mo enviar una solicitud POST en JavaScript utilizando Qwest<\/h4>\n<p>Como segundo par\u00e1metro, se pasar\u00e1n al m\u00e9todo <code>post()<\/code> los datos que se enviar\u00e1n al servidor. El primer par\u00e1metro es la URL.<\/p>\n<p>Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-js\">qwest.post(\"https:\/\/jsonplaceholder.typicode.com\/posts\", {\n  title: 'POST request with Qwest',\n  body: 'POST request',\n  userId: 30\n})\n.then(function(xhr, response) {\n  console.log(response)\n})\n.catch(function(e, xhr, response) {\n  console.log(e)\n});<\/code><\/pre>\n<h4>C\u00f3mo enviar una solicitud PUT en JavaScript utilizando Qwest<\/h4>\n<p>La sintaxis aqu\u00ed es la misma que la de la secci\u00f3n anterior. Lo \u00fanico que tienes que cambiar es el tipo de solicitud y, a continuaci\u00f3n, especificar el ID del objeto a actualizar junto con los datos con los que quieres actualizar el objeto.<\/p>\n<p>Echa un vistazo a este ejemplo:<\/p>\n<pre><code class=\"language-js\">qwest.put(\"https:\/\/jsonplaceholder.typicode.com\/posts\/30\", {\n  title: 'PUT request with Qwest',\n  body: 'PUT request',\n  userId: 30\n})\n.then(function(xhr, response) {\n  console.log(response)\n})\n.catch(function(e, xhr, response) {\n  console.log(e)\n});<\/code><\/pre>\n<p>Observa que el ID se especifica en la URL y no en el objeto que se env\u00eda al servidor.<\/p>\n<h4>C\u00f3mo enviar una solicitud DELETE en JavaScript utilizando Qwest<\/h4>\n<p>Como es habitual, para eliminar un objeto de un servidor, tienes que especificar la URL y el ID del objeto a eliminar. Tanto la URL como el ID del objeto a eliminar se pasar\u00e1n como par\u00e1metro al m\u00e9todo <code>delete()<\/code> de Qwest.<\/p>\n<p>Aqu\u00ed tienes un ejemplo:<\/p>\n<pre><code class=\"language-js\">qwest.delete(\"https:\/\/jsonplaceholder.typicode.com\/posts\/30\")\n.then(function(xhr, response) {\n  console.log(response)\n})\n.catch(function(e, xhr, response) {\n  console.log(e)\n});<\/code><\/pre>\n<p>Una vez que la solicitud se ejecute con \u00e9xito, se eliminar\u00e1 un objeto con el ID 30.<\/p>\n<h2>Resumen<\/h2>\n<p>Nuestra capacidad para interactuar con los servidores utilizando JavaScript ha evolucionado a lo largo de los a\u00f1os. Con una comunidad creciente y activa de <a href=\"https:\/\/kinqsta.com\/es\/blog\/desarrollador-de-frontend\/\">desarrolladores de JavaScript<\/a>, se siguen haciendo cambios constantes y se introducen nuevas herramientas para hacer el proceso m\u00e1s sencillo y f\u00e1cil.<\/p>\n<p>Los m\u00e9todos que se exponen en este tutorial no s\u00f3lo se aplican a los servidores remotos, sino que tambi\u00e9n pueden utilizarse para interactuar con tus propios servidores cuando construyas aplicaciones web de pila completa. Tambi\u00e9n funcionan con numerosas <a href=\"https:\/\/kinqsta.com\/es\/blog\/bibliotecas-javascript\/\">bibliotecas y frameworks de JavaScript<\/a>.<\/p>\n\n<p>En este tutorial, te hemos ense\u00f1ado a realizar peticiones HTTP en JavaScript. Hemos dado varios ejemplos y explicaciones que mostraban c\u00f3mo enviar peticiones GET, POST, PUT\/PATCH y DELETE utilizando m\u00e9todos incorporados en JavaScript y librer\u00edas de terceros.<\/p>\n<p>Construir y desplegar un sitio web puede ser una tarea tediosa, independientemente de tus conocimientos. Pero Kinsta lo hace f\u00e1cil y sin esfuerzo con DevKinsta. Utilizado por m\u00e1s de 25.000 desarrolladores, dise\u00f1adores web y aut\u00f3nomos, DevKinsta ofrece un entorno local para el desarrollo de temas y plugins de WordPress, entre otros. <a href=\"https:\/\/kinqsta.com\/es\/devkinsta\/\">\u00a1Compru\u00e9balo!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La interacci\u00f3n entre el frontend y el backend de los sitios web es posible a trav\u00e9s de las peticiones HTTP. Funcionalidades como la actualizaci\u00f3n de un &#8230;<\/p>\n","protected":false},"author":240,"featured_media":58227,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[1182,830,867,403,414],"topic":[1297],"class_list":["post-58226","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-http-requests","tag-http-status-codes","tag-javascript","tag-web-development","tag-webdev","topic-tutoriales-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gu\u00eda de Peticiones HTTP en JavaScript<\/title>\n<meta name=\"description\" content=\"La Base de Conocimientos de Kinsta ayuda a responder preguntas sobre cualquier tema, desde consultas relacionadas con la cuenta y la facturaci\u00f3n, hasta preguntas generales sobre WordPress y soporte t\u00e9cnico.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gu\u00eda de Peticiones HTTP en JavaScript\" \/>\n<meta property=\"og:description\" content=\"La Base de Conocimientos de Kinsta ayuda a responder preguntas sobre cualquier tema, desde consultas relacionadas con la cuenta y la facturaci\u00f3n, hasta preguntas generales sobre WordPress y soporte t\u00e9cnico.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-18T07:55:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:31:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/10\/javascript-http-request.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ihechikara Abba\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"La Base de Conocimientos de Kinsta ayuda a responder preguntas sobre cualquier tema, desde consultas relacionadas con la cuenta y la facturaci\u00f3n, hasta preguntas generales sobre WordPress y soporte t\u00e9cnico.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/10\/javascript-http-request.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ihechikara Abba\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/\"},\"author\":{\"name\":\"Ihechikara Abba\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26\"},\"headline\":\"Gu\u00eda de Peticiones HTTP en JavaScript\",\"datePublished\":\"2022-10-18T07:55:44+00:00\",\"dateModified\":\"2025-10-01T19:31:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/\"},\"wordCount\":3764,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/10\/javascript-http-request.png\",\"keywords\":[\"http requests\",\"HTTP Status Codes\",\"JavaScript\",\"web development\",\"webdev\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/\",\"name\":\"Gu\u00eda de Peticiones HTTP en JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/10\/javascript-http-request.png\",\"datePublished\":\"2022-10-18T07:55:44+00:00\",\"dateModified\":\"2025-10-01T19:31:10+00:00\",\"description\":\"La Base de Conocimientos de Kinsta ayuda a responder preguntas sobre cualquier tema, desde consultas relacionadas con la cuenta y la facturaci\u00f3n, hasta preguntas generales sobre WordPress y soporte t\u00e9cnico.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/10\/javascript-http-request.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/10\/javascript-http-request.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutoriales JavaScript\",\"item\":\"https:\/\/kinqsta.com\/es\/secciones\/tutoriales-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gu\u00eda de Peticiones HTTP en JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/es\/#website\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26\",\"name\":\"Ihechikara Abba\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/483df106a6ba0c29683578302f74008c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/483df106a6ba0c29683578302f74008c?s=96&d=mm&r=g\",\"caption\":\"Ihechikara Abba\"},\"description\":\"Ihechikara is a software developer and technical writer. He enjoys writing articles on web technologies, programming, and IT-related topics. Connect with Ihechikara on Twitter.\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/author\/ihechivinabba\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Gu\u00eda de Peticiones HTTP en JavaScript","description":"La Base de Conocimientos de Kinsta ayuda a responder preguntas sobre cualquier tema, desde consultas relacionadas con la cuenta y la facturaci\u00f3n, hasta preguntas generales sobre WordPress y soporte t\u00e9cnico.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/","og_locale":"es_ES","og_type":"article","og_title":"Gu\u00eda de Peticiones HTTP en JavaScript","og_description":"La Base de Conocimientos de Kinsta ayuda a responder preguntas sobre cualquier tema, desde consultas relacionadas con la cuenta y la facturaci\u00f3n, hasta preguntas generales sobre WordPress y soporte t\u00e9cnico.","og_url":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2022-10-18T07:55:44+00:00","article_modified_time":"2025-10-01T19:31:10+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/10\/javascript-http-request.png","type":"image\/png"}],"author":"Ihechikara Abba","twitter_card":"summary_large_image","twitter_description":"La Base de Conocimientos de Kinsta ayuda a responder preguntas sobre cualquier tema, desde consultas relacionadas con la cuenta y la facturaci\u00f3n, hasta preguntas generales sobre WordPress y soporte t\u00e9cnico.","twitter_image":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/10\/javascript-http-request.png","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Ihechikara Abba","Tiempo de lectura":"18 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/"},"author":{"name":"Ihechikara Abba","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26"},"headline":"Gu\u00eda de Peticiones HTTP en JavaScript","datePublished":"2022-10-18T07:55:44+00:00","dateModified":"2025-10-01T19:31:10+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/"},"wordCount":3764,"publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/10\/javascript-http-request.png","keywords":["http requests","HTTP Status Codes","JavaScript","web development","webdev"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/","url":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/","name":"Gu\u00eda de Peticiones HTTP en JavaScript","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/10\/javascript-http-request.png","datePublished":"2022-10-18T07:55:44+00:00","dateModified":"2025-10-01T19:31:10+00:00","description":"La Base de Conocimientos de Kinsta ayuda a responder preguntas sobre cualquier tema, desde consultas relacionadas con la cuenta y la facturaci\u00f3n, hasta preguntas generales sobre WordPress y soporte t\u00e9cnico.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#primaryimage","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/10\/javascript-http-request.png","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2022\/10\/javascript-http-request.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/es\/blog\/javascript-peticion-http\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Tutoriales JavaScript","item":"https:\/\/kinqsta.com\/es\/secciones\/tutoriales-javascript\/"},{"@type":"ListItem","position":3,"name":"Gu\u00eda de Peticiones HTTP en JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/es\/#website","url":"https:\/\/kinqsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/ac373ce22a016949523f7e464fdcae26","name":"Ihechikara Abba","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/483df106a6ba0c29683578302f74008c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/483df106a6ba0c29683578302f74008c?s=96&d=mm&r=g","caption":"Ihechikara Abba"},"description":"Ihechikara is a software developer and technical writer. He enjoys writing articles on web technologies, programming, and IT-related topics. Connect with Ihechikara on Twitter.","url":"https:\/\/kinqsta.com\/es\/blog\/author\/ihechivinabba\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/58226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/comments?post=58226"}],"version-history":[{"count":13,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/58226\/revisions"}],"predecessor-version":[{"id":65194,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/58226\/revisions\/65194"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/58226\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/58226\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/58226\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/58226\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/58226\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/58226\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/58226\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/58226\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/58226\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/58226\/translations\/dk"},{"href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/58226\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media\/58227"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media?parent=58226"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/tags?post=58226"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/topic?post=58226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}