{"id":631,"date":"2023-11-15T08:24:41","date_gmt":"2023-11-15T11:24:41","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=631"},"modified":"2023-11-15T08:30:12","modified_gmt":"2023-11-15T11:30:12","slug":"comunicacion-con-el-servidor","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/comunicacion-con-el-servidor\/","title":{"rendered":"Comunicaci\u00f3n con el Servidor"},"content":{"rendered":"\n

Introducci\u00f3n a Ajax, Fetch API y Axios<\/em><\/p>\n\n\n\n

Comunicaci\u00f3n con el Servidor en Aplicaciones Web<\/strong> La comunicaci\u00f3n con el servidor es esencial en el desarrollo de aplicaciones web, especialmente en el contexto de comercio electr\u00f3nico. Permite a las aplicaciones obtener y enviar datos al servidor, lo que posibilita la actualizaci\u00f3n de informaci\u00f3n en tiempo real y la interacci\u00f3n con bases de datos y servicios web externos.<\/p>\n\n\n\n

Ajax (Asynchronous JavaScript and XML)<\/strong> Ajax es una tecnolog\u00eda que permite realizar solicitudes al servidor en segundo plano sin necesidad de recargar la p\u00e1gina completa. Esta t\u00e9cnica se basa en JavaScript y el objeto XMLHttpRequest para enviar y recibir datos de manera as\u00edncrona.<\/p>\n\n\n\n

Ejemplo de solicitud Ajax con JavaScript puro:<\/p>\n\n\n\n

var xhr = new XMLHttpRequest();\r\nxhr.open(\"GET\", \"https:\/\/api.ejemplo.com\/data\", true);\r\nxhr.onreadystatechange = function() {\r\n  if (xhr.readyState === 4 && xhr.status === 200) {\r\n    var data = JSON.parse(xhr.responseText);\r\n    console.log(data);\r\n  }\r\n};\r\nxhr.send();\r\n<\/code><\/pre>\n\n\n\n
Fetch API<\/strong> La Fetch API es una interfaz moderna para realizar solicitudes de red en JavaScript. Proporciona una forma m\u00e1s simple y promisificada de trabajar con solicitudes y respuestas HTTP.<\/p>\n\n\n\n
Ejemplo de solicitud con Fetch API:<\/p>\n\n\n\n
fetch(\"https:\/\/api.ejemplo.com\/data\")\r\n  .then(response => response.json())\r\n  .then(data => console.log(data))\r\n  .catch(error => console.error(error));\r\n<\/code><\/pre>\n\n\n\n
Axios<\/strong> Axios es una biblioteca JavaScript que simplifica a\u00fan m\u00e1s las solicitudes HTTP. Es muy utilizada en el desarrollo frontend y backend debido a su facilidad de uso y su capacidad para manejar peticiones y respuestas de manera eficiente.<\/p>\n\n\n\n
Ejemplo de solicitud con Axios:<\/p>\n\n\n\n
axios.get(\"https:\/\/api.ejemplo.com\/data\")\r\n  .then(response => console.log(response.data))\r\n  .catch(error => console.error(error));\r\n<\/code><\/pre>\n\n\n\n
Ejercicio Pr\u00e1ctico: Consulta de Productos<\/em><\/p>\n\n\n\n
Ejercicio: Crea una p\u00e1gina web que permita a los usuarios buscar productos de un cat\u00e1logo. Implementa una funci\u00f3n de b\u00fasqueda que utilice Fetch API para obtener resultados de una API de productos en tiempo real y muestre los resultados en la p\u00e1gina.<\/p>\n\n\n\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n    #buscador {\r\n      width: 300px;\r\n      padding: 5px;\r\n    }\r\n    #resultados {\r\n      margin-top: 10px;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <input type=\"text\" id=\"buscador\" placeholder=\"Buscar productos\">\r\n  <div id=\"resultados\"><\/div>\r\n  <script>\r\n    const buscador = document.getElementById(\"buscador\");\r\n    const resultados = document.getElementById(\"resultados\");\r\n\r\n    buscador.addEventListener(\"input\", function() {\r\n      const consulta = buscador.value;\r\n      fetch(`https:\/\/api.ejemplo.com\/productos?q=${consulta}`)\r\n        .then(response => response.json())\r\n        .then(data => {\r\n          resultados.innerHTML = \"\";\r\n          data.forEach(producto => {\r\n            const elemento = document.createElement(\"div\");\r\n            elemento.textContent = producto.nombre;\r\n            resultados.appendChild(elemento);\r\n          });\r\n        })\r\n        .catch(error => console.error(error));\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n\n\n\n
Este ejercicio pr\u00e1ctico permitir\u00e1 a los lectores comprender c\u00f3mo realizar solicitudes al servidor, procesar respuestas y mostrar datos en una p\u00e1gina web. La comunicaci\u00f3n con el servidor es esencial en aplicaciones de comercio electr\u00f3nico para obtener informaci\u00f3n de productos, carros de compra y m\u00e1s.<\/p>\n\n\n\n
Obtenci\u00f3n de Datos del Servidor<\/strong> La obtenci\u00f3n de datos del servidor es fundamental para mostrar informaci\u00f3n actualizada en una aplicaci\u00f3n web. Puedes usar Fetch API o Axios para realizar solicitudes GET al servidor y obtener datos en formato JSON, por ejemplo.<\/p>\n\n\n\n
Ejemplo de obtenci\u00f3n de datos de productos con Fetch API:<\/p>\n\n\n\n
fetch(\"https:\/\/api.ejemplo.com\/productos\")\r\n  .then(response => response.json())\r\n  .then(data => console.log(data))\r\n  .catch(error => console.error(error));\r\n<\/code><\/pre>\n\n\n\n
Env\u00edo de Datos al Servidor<\/strong> El env\u00edo de datos al servidor es necesario para realizar acciones como agregar productos al carrito de compras, enviar informaci\u00f3n de inicio de sesi\u00f3n, o completar un proceso de compra. Las solicitudes POST son comunes para enviar datos al servidor.<\/p>\n\n\n\n
Ejemplo de env\u00edo de datos al servidor con Fetch API:<\/p>\n\n\n\n
const datos = {\r\n  productoId: 123,\r\n  cantidad: 2,\r\n  usuarioId: 456\r\n};\r\n\r\nfetch(\"https:\/\/api.ejemplo.com\/agregar-al-carrito\", {\r\n  method: \"POST\",\r\n  headers: {\r\n    \"Content-Type\": \"application\/json\"\r\n  },\r\n  body: JSON.stringify(datos)\r\n})\r\n.then(response => response.json())\r\n.then(data => console.log(data))\r\n.catch(error => console.error(error));\r\n<\/code><\/pre>\n\n\n\n
Ejercicio Pr\u00e1ctico: Cargar Datos de Productos desde una API<\/em><\/p>\n\n\n\n
Ejercicio: Crea una p\u00e1gina web que cargue y muestre datos de productos desde una API. Los usuarios deben ver una lista de productos con su nombre, precio y una imagen. Implementa una funci\u00f3n que utilice Fetch API para obtener los datos de la API de productos y mostrarlos en la p\u00e1gina.<\/p>\n\n\n\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n    .producto {\r\n      border: 1px solid #ccc;\r\n      padding: 10px;\r\n      margin: 10px;\r\n      display: inline-block;\r\n    }\r\n    .producto img {\r\n      max-width: 100px;\r\n      max-height: 100px;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <h1>Lista de Productos<\/h1>\r\n  <div id=\"productos\"><\/div>\r\n  <script>\r\n    const productosContainer = document.getElementById(\"productos\");\r\n\r\n    fetch(\"https:\/\/api.ejemplo.com\/productos\")\r\n      .then(response => response.json())\r\n      .then(data => {\r\n        data.forEach(producto => {\r\n          const productoDiv = document.createElement(\"div\");\r\n          productoDiv.classList.add(\"producto\");\r\n\r\n          const nombre = document.createElement(\"h2\");\r\n          nombre.textContent = producto.nombre;\r\n\r\n          const precio = document.createElement(\"p\");\r\n          precio.textContent = \"Precio: $\" + producto.precio;\r\n\r\n          const imagen = document.createElement(\"img\");\r\n          imagen.src = producto.imagen;\r\n\r\n          productoDiv.appendChild(nombre);\r\n          productoDiv.appendChild(precio);\r\n          productoDiv.appendChild(imagen);\r\n          productosContainer.appendChild(productoDiv);\r\n        });\r\n      })\r\n      .catch(error => console.error(error));\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n\n\n\n
Este ejercicio pr\u00e1ctico permitir\u00e1 a los lectores comprender c\u00f3mo cargar datos de un servidor y mostrarlos en una p\u00e1gina web. La obtenci\u00f3n y env\u00edo de datos son esenciales en aplicaciones de comercio electr\u00f3nico para mantener actualizada la informaci\u00f3n de productos y realizar acciones como agregar al carrito.<\/p>\n","protected":false},"excerpt":{"rendered":"
Introducci\u00f3n a Ajax, Fetch API y Axios Comunicaci\u00f3n con el Servidor en Aplicaciones Web La comunicaci\u00f3n con el servidor es esencial en el desarrollo de aplicaciones web, especialmente en el contexto de comercio electr\u00f3nico. Permite a las aplicaciones obtener y enviar datos al servidor, lo que posibilita la actualizaci\u00f3n de informaci\u00f3n en tiempo real y la […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[33],"tags":[],"class_list":["post-631","post","type-post","status-publish","format-standard","hentry","category-javascript-y-otras-hierbas"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"Introducci\u00f3n a Ajax, Fetch API y Axios Comunicaci\u00f3n con el Servidor en Aplicaciones Web La comunicaci\u00f3n con el servidor es esencial en el desarrollo de aplicaciones web, especialmente en el contexto de comercio electr\u00f3nico. Permite a las aplicaciones obtener y enviar datos al servidor, lo que posibilita la actualizaci\u00f3n de informaci\u00f3n en tiempo real y la…","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=631"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/631\/revisions"}],"predecessor-version":[{"id":632,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/631\/revisions\/632"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}