{"id":1566,"date":"2024-08-02T07:24:17","date_gmt":"2024-08-02T05:24:17","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1566"},"modified":"2024-08-02T07:24:17","modified_gmt":"2024-08-02T05:24:17","slug":"002-ajax-objeto-xmlhttprequest","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/15-ajax\/002-ajax-objeto-xmlhttprequest\/","title":{"rendered":"002. AJAX: Objeto XMLHttpRequest"},"content":{"rendered":"\n

Como Ajax<\/strong> trabaja parte con el cliente<\/strong>, parte con el servidor<\/strong>, es muy importante que Ajax<\/strong> lo ejecutemos desde un servidor web<\/strong>, usando el protocolo HTTP<\/strong>, no con el protocolo file<\/strong>, d\u00e1ndole simplemente doble click en el archivo. Hay que comenzar a trabajar en un entorno local<\/strong>. Vamos a crear una aplicaci\u00f3n donde vamos a consumir una API externa<\/strong>.<\/p>\n\n\n\n\n\n\n\n

Para poder traer informaci\u00f3n de un servidor (por ejm una petici\u00f3n a una base de datos<\/strong> o a una API externa<\/strong>), hay una API<\/strong> para comenzar a aprender, que se llama JSONPlaceholder<\/strong><\/a>, este servicio es una API<\/strong> falsa para hacer pruebas y prototipos.<\/p>\n\n\n\n

\n

Nota<\/strong>: podemos consumir tanto APIs p\u00fablicas<\/strong> que tengamos en Internet como archivos JSON<\/strong> que tengamos de manera local.<\/p>\n<\/blockquote>\n\n\n\n

Para que un documento XMLHttpRequest<\/strong> funcione necesitamos dar cuatro pasos:<\/p>\n\n\n\n

    \n
  • La instancia<\/strong>.<\/li>\n\n\n\n
  • Ejecutar un evento<\/strong>, el evento<\/strong> m\u00e1s importante del objeto XMLHttpRequest<\/strong> es readystatechange<\/strong><\/em>, que detecta el resto de eventos. Por lo que hay que hacer una asignaci\u00f3n del evento o eventos si lo queremos manejar de manera independiente.<\/li>\n\n\n\n
  • La instrucci\u00f3n que va a abrir la petici\u00f3n.<\/li>\n\n\n\n
  • El cuarto paso es enviar la petici\u00f3n.<\/li>\n<\/ul>\n\n\n\n

    Resumen<\/h2>\n\n\n\n

    Los 4 pasos que debemos hacer son:<\/p>\n\n\n\n

      \n
    1. Instanciar el objeto XMLHttpRequest<\/em><\/strong>.<\/li>\n\n\n\n
    2. Asignarle el o los eventos<\/strong> que vayamos a estar manipulando de la petici\u00f3n, la l\u00f3gica de la programaci\u00f3n va a ir en la callback<\/strong> de esta fase.<\/li>\n\n\n\n
    3. Abrir la petici\u00f3n, estableciendo el m\u00e9todo y el recurso o la URL<\/strong> o el endpoint<\/strong> con el m\u00e9todo open()<\/em><\/strong>.<\/li>\n\n\n\n
    4. Enviar la petici\u00f3n con el m\u00e9todo sent()<\/em><\/strong>.<\/li>\n<\/ol>\n\n\n\n

      Archivos<\/h2>\n\n\n\n

      Tendremos dos archivos, un archivo ajax.html y un archivo ajax.js, veamos la sintaxis de cada uno de ellos.<\/p>\n\n\n\n

      Sintaxis de ajax.html<\/p>\n\n\n\n

      <!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Ajax<\/title>\n  <\/head>\n  <body>\n    <h1>Ajax<\/h1>\n    <h2>Objeto XMLHttpRequest<\/h2>\n    <ol id=\"xhr\"><\/ol>\n    <br \/><br \/><br \/><br \/><br \/><br \/><br \/><br \/><br \/><br \/>\n    <script src=\"ajax.js\"><\/script>\n  <\/body>\n<\/html><\/pre>\n\n\n\n
      Sintaxis de ajax.js<\/p>\n\n\n\n
      (() => {\n  const xhr = new XMLHttpRequest(),\n    $xhr = document.getElementById(\"xhr\"),\n    $fragment = document.createDocumentFragment();\n  xhr.addEventListener(\"readystatechange\", (e) => {\n    if (xhr.readyState !== 4) return;\n\n    if (xhr.status >= 200 && xhr.status < 300) {\n      let json = JSON.parse(xhr.responseText);\n      json.forEach((el) => {\n        const $li = document.createElement(\"li\");\n        $li.innerHTML = `${el.name} -- ${el.email} -- ${el.phone}`;\n       $fragment.appendChild($li);\n      });\n      $xhr.appendChild($fragment);\n    } else {\n      console.log(\"Error\");\n      let message = xhr.statusText || \"Ocurri\u00f3 un error\";\n      $xhr.innerHTML = `Error ${xhr.status}: ${message}`;\n    }\n  });\n  xhr.open(\"GET\", \"https:\/\/jsonplaceholder.typicode.com\/users\");\n  xhr.send();\n})();<\/pre>\n","protected":false},"excerpt":{"rendered":"
      Como Ajax trabaja parte con el cliente, parte con el servidor, es muy importante que Ajax lo ejecutemos desde un […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1561,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","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":""},"class_list":["post-1566","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Como Ajax trabaja parte con el cliente, parte con el servidor, es muy importante que Ajax lo ejecutemos desde un […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1566"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1566\/revisions"}],"predecessor-version":[{"id":1568,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1566\/revisions\/1568"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1561"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}