{"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 servidor web, usando el protocolo HTTP, no con el protocolo file, d\u00e1ndole simplemente doble click en el archivo. Hay que comenzar a trabajar en un entorno local. Vamos a crear una aplicaci\u00f3n donde vamos a […]<\/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 servidor web, usando el protocolo HTTP, no con el protocolo file, d\u00e1ndole simplemente doble click en el archivo. Hay que comenzar a trabajar en un entorno local. Vamos a crear una aplicaci\u00f3n donde vamos a…","_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}]}}