{"id":7657,"date":"2022-01-04T18:40:57","date_gmt":"2022-01-04T18:40:57","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7657"},"modified":"2022-01-04T18:40:57","modified_gmt":"2022-01-04T18:40:57","slug":"scroll-infinito-con-javascript-nativo-usando-fetch","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/","title":{"rendered":"Scroll infinito con JavaScript nativo usando fetch"},"content":{"rendered":"<p>Hac\u00eda mucho tiempo que quer\u00eda hablar sobre como se puede implementar la funcionalidad de <strong>scroll infinito<\/strong> en una lista de elementos que pudiera haber en cualquier p\u00e1gina Web.<\/p>\n<p>El <strong>scroll infinito<\/strong> es una t\u00e9cnica que permite al usuario interactuar con el rat\u00f3n o <em>mouse<\/em> desplaz\u00e1ndose con el scroll hac\u00eda abajo para cargar nuevo contenido din\u00e1mico.<\/p>\n<p>De esta manera, el scroll se hace infinito y el tiempo de carga inicial mejora considerablemente.<\/p>\n<p>No yendo muy lejos, por ejemplo, una plataforma Ecommerce tiene que mostrar productos por categor\u00edas si o si. Normalmente, suelen funcionar con paginaci\u00f3n ya sea con PHP o JavaScript.Te<\/p>\n<p>\u00bfTe has planteado que tal ser\u00eda la paginaci\u00f3n de productos con <strong>scroll infinito<\/strong>?<\/p>\n<p>El <strong>scroll infinito <\/strong>tambi\u00e9n lo utilizan plataformas como Facebook, Twitter o Tik Tok para ir mostrando noticias o publicaciones a medida que se va avanzando con el scroll del rat\u00f3n.<\/p>\n<p>Las redes sociales son un escenario ideal, al menos nos han acostumbrado a eso pero,\u00a0 es que quiz\u00e1 si hubiera una paginaci\u00f3n en estos sitios webs con tanto contenido que requiere clic del usuario para mostrar m\u00e1s informaci\u00f3n, es m\u00e1s probable que se acaben cansando y no naveguen tanto.<\/p>\n<p>Las p\u00e1ginas webs de una sola p\u00e1gina cada vez son m\u00e1s tendencia y no es casualidad.<\/p>\n<p>\u00bfNo tienes la sensaci\u00f3n de que el <strong>scroll infinito<\/strong> mejora la navegaci\u00f3n?<\/p>\n<p>El <strong>scroll infinito<\/strong> puede ser un excelente recurso para mostrar tu contenido pero debes emplearlo de forma correcta.<\/p>\n<p>Antes de decidir a la ligera que deseas emplear el <strong>scroll infinito<\/strong>, debes tener muy en cuenta sus ventajas e inconvenientes.<\/p>\n<h2>Ventajas del scroll infinito<\/h2>\n<ul>\n<li>Hace que los usuarios est\u00e9n pendientes y esto hace que aumente el tiempo de navegaci\u00f3n.<\/li>\n<li>Aumenta el tiempo de sesi\u00f3n.<\/li>\n<li>Se ha estudiado que los usuarios llegan a elementos que con paginaci\u00f3n jam\u00e1s llegar\u00edan.<\/li>\n<li>Perfecto para pantallas t\u00e1ctiles.<\/li>\n<li>Ideal para dispositivos m\u00f3viles.<\/li>\n<li>Ideal para el contenido visual.<\/li>\n<li>Es m\u00e1s atractivo y moderno.<\/li>\n<\/ul>\n<h2>Inconvenientes del scroll infinito<\/h2>\n<ul>\n<li>Problemas con el pie de p\u00e1gina que pr\u00e1cticamente no se muestra hasta el final del contenido.<\/li>\n<li>Organizaci\u00f3n del contenido inexistente.<\/li>\n<li>Encontrar un elemento en concreto es dif\u00edcil. Por ejemplo, en paginaci\u00f3n cl\u00e1sica si que es posible acceder a una p\u00e1gina para acceder a un elemento.<\/li>\n<li>Problemas de tiempos con carga de im\u00e1genes grandes en cada iteraci\u00f3n.<\/li>\n<\/ul>\n<p>En este art\u00edculo vas a aprender como implementar un sistema de <strong>scroll infinito<\/strong> en tu p\u00e1gina web utilizando simplemente <strong>JavaScript <\/strong>y llamadas as\u00edncronas al servidor.<\/p>\n<h2>C\u00f3digo HTML<\/h2>\n<p>En la plantilla o archivo HTML tan solo voy a agregar una lista de elementos vac\u00eda:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/ul.html\"><span class=\"kw2\">ul<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;items row&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/ul.html\"><span class=\"kw2\">ul<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>Para la parte visual, me apoyar\u00e9 con el dise\u00f1o de Bootstrap 4.<\/p>\n<p>Por eso estoy declarando una lista desordenada &lt;ul&gt; con la clase .row para definir una fila.<\/p>\n<p>La clases \u00abitems\u00bb la usar\u00e9 para acceder a la lista mediante <strong>JavaScript<\/strong>.<\/p>\n<h2>C\u00f3digo JavaScript<\/h2>\n<p>Atento a este apartado porque la clave del asunto est\u00e1 en entender el c\u00f3digo <strong>JavaScript<\/strong> que en definitiva es el conducto que consulta los datos del servidor para mostrarlos en la pantalla.<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span class=\"kw2\">var<\/span> start <span class=\"sy0\">=<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw2\">var<\/span> limit <span class=\"sy0\">=<\/span> <span class=\"nu0\">12<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw2\">var<\/span> endItems <span class=\"sy0\">=<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\nwindow.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'scroll'<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>window.<span class=\"me1\">scrollY<\/span> <span class=\"sy0\">==<\/span> document.<span class=\"me1\">documentElement<\/span>.<span class=\"me1\">scrollHeight<\/span> <span class=\"sy0\">-<\/span> window.<span class=\"me1\">innerHeight<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        getItems<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\nwindow.<span class=\"kw3\">onload<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    getItems<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span>\n&nbsp;\n<span class=\"kw2\">function<\/span> getItems<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>endItems<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"kw1\">return<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>  \n&nbsp;\n    let params <span class=\"sy0\">=<\/span> <span class=\"kw2\">new<\/span> FormData<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    params.<span class=\"me1\">append<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'start'<\/span><span class=\"sy0\">,<\/span> start<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    params.<span class=\"me1\">append<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'limit'<\/span><span class=\"sy0\">,<\/span> limit<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    fetch<span class=\"br0\">&#40;<\/span><span class=\"st0\">'ajax.php'<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span>\n        method<span class=\"sy0\">:<\/span> <span class=\"st0\">'post'<\/span><span class=\"sy0\">,<\/span>\n        body<span class=\"sy0\">:<\/span> params<span class=\"sy0\">,<\/span>\n    <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">then<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>response<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>response.<span class=\"me1\">ok<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n            <span class=\"kw1\">return<\/span> response.<span class=\"me1\">json<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n            <span class=\"kw1\">throw<\/span> <span class=\"st0\">'Error en llamada al servidor'<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span>\n    <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">then<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>items<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>items.<span class=\"me1\">endItems<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n            endItems <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n            <span class=\"kw2\">var<\/span> html <span class=\"sy0\">=<\/span> <span class=\"st0\">''<\/span><span class=\"sy0\">;<\/span>\n            items.<span class=\"me1\">forEach<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>element<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n                html <span class=\"sy0\">+=<\/span> `\n                    <span class=\"sy0\">&lt;<\/span>li <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;col-lg-3&quot;<\/span><span class=\"sy0\">&gt;<\/span>\n                        <span class=\"sy0\">&lt;<\/span>div <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card mb-3&quot;<\/span><span class=\"sy0\">&gt;<\/span>\n                            <span class=\"sy0\">&lt;<\/span>div <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-body&quot;<\/span><span class=\"sy0\">&gt;<\/span>\n                                <span class=\"sy0\">&lt;<\/span>h5 <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-title&quot;<\/span><span class=\"sy0\">&gt;<\/span>$<span class=\"br0\">&#123;<\/span>element.<span class=\"kw3\">name<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">&lt;\/<\/span>h5<span class=\"sy0\">&gt;<\/span>\n                                <span class=\"sy0\">&lt;<\/span>p <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-text&quot;<\/span><span class=\"sy0\">&gt;<\/span>$<span class=\"br0\">&#123;<\/span>element.<span class=\"me1\">description<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n                                <span class=\"sy0\">&lt;<\/span>p <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-text&quot;<\/span><span class=\"sy0\">&gt;<\/span>Cantidad<span class=\"sy0\">:<\/span> $<span class=\"br0\">&#123;<\/span>element.<span class=\"me1\">quantity<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n                                <span class=\"sy0\">&lt;<\/span>p <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-text&quot;<\/span><span class=\"sy0\">&gt;<\/span>Precio<span class=\"sy0\">:<\/span> $<span class=\"br0\">&#123;<\/span>element.<span class=\"me1\">price<\/span><span class=\"br0\">&#125;<\/span> \u20ac<span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n                                <span class=\"sy0\">&lt;<\/span>p <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-text&quot;<\/span><span class=\"sy0\">&gt;<\/span>Total<span class=\"sy0\">:<\/span> $<span class=\"br0\">&#123;<\/span>element.<span class=\"me1\">price<\/span> <span class=\"sy0\">*<\/span> element.<span class=\"me1\">quantity<\/span><span class=\"br0\">&#125;<\/span> \u20ac<span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n                                <span class=\"sy0\">&lt;<\/span>a href<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#&quot;<\/span> <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;btn btn-primary&quot;<\/span><span class=\"sy0\">&gt;<\/span>Comprar ahora<span class=\"sy0\">&lt;\/<\/span>a<span class=\"sy0\">&gt;<\/span>\n                            <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n                        <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n                    <span class=\"sy0\">&lt;\/<\/span>li<span class=\"sy0\">&gt;<\/span>\n                `<span class=\"sy0\">;<\/span>\n            <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n            <span class=\"kw2\">const<\/span> current_items <span class=\"sy0\">=<\/span> document.<span class=\"me1\">querySelector<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;.items&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n            current_items.<span class=\"me1\">innerHTML<\/span> <span class=\"sy0\">+=<\/span> html<span class=\"sy0\">;<\/span>\n            start <span class=\"sy0\">+=<\/span> limit<span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span>\n    <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"kw1\">catch<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>error<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        console.<span class=\"me1\">log<\/span><span class=\"br0\">&#40;<\/span>error<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><\/pre><\/div><\/div>\n<p>En este c\u00f3digo estoy definiendo 3 variables globales:<\/p>\n<ul>\n<li><em>start<\/em>: para definir el inicio del l\u00edmite de la consulta SQL en la base de datos. Inicialmente, la iniciamos en 0 para conseguir los primeros registros. Esta variable ir\u00e1 cambiando su valor a medida que hacemos <em>scroll<\/em> con el rat\u00f3n.<\/li>\n<li><em>limit<\/em>: se usa para definir el n\u00famero de elementos por p\u00e1gina. En este caso nos interesa que sea 12 para mostrar 3 filas en 4 columnas.<\/li>\n<li><em>endItems<\/em>: es una variable booleana que uso para identificar cuando estamos en el final de la lista de elementos. Inicialmente, empieza en <em>false<\/em>.<\/li>\n<\/ul>\n<p>A continuaci\u00f3n, capturamos el evento de <em>scroll<\/em> para comprobar cuando hemos llegado a la parte de abajo con el siguiente trozo de c\u00f3digo:<\/p>\n<div id=\"wpshdo_3\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_3\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_3\"><\/a><a id=\"wpshat_3\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_3\"  onClick=\"javascript:wpsh_toggleBlock(3)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_code(3)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_print(3)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_3\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">window.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'scroll'<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>window.<span class=\"me1\">scrollY<\/span> <span class=\"sy0\">==<\/span> document.<span class=\"me1\">documentElement<\/span>.<span class=\"me1\">scrollHeight<\/span> <span class=\"sy0\">-<\/span> window.<span class=\"me1\">innerHeight<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        getItems<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>La funci\u00f3n getItems() es la que se encargar\u00e1 de ir a buscar al servidor la informaci\u00f3n para retornar de vuelta los elementos que tocan.<\/p>\n<p>L\u00f3gicamente, como hemos definido nuestra lista vac\u00eda en el HTML, al cargar la p\u00e1gina llamaremos tambi\u00e9n a nuestra funci\u00f3n <em>getItems():<\/em><\/p>\n<div id=\"wpshdo_4\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_4\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_4\"><\/a><a id=\"wpshat_4\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_4\"  onClick=\"javascript:wpsh_toggleBlock(4)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_4\" onClick=\"javascript:wpsh_code(4)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_4\" onClick=\"javascript:wpsh_print(4)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_4\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">window.<span class=\"kw3\">onload<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    getItems<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><\/pre><\/div><\/div>\n<p>En la funci\u00f3n getItems() lo primero que hacemos es comprobar si hemos llegado al final de la lista. Si es as\u00ed, p\u00e1ramos la ejecuci\u00f3n.<\/p>\n<div id=\"wpshdo_5\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_5\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_5\"><\/a><a id=\"wpshat_5\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_5\"  onClick=\"javascript:wpsh_toggleBlock(5)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_5\" onClick=\"javascript:wpsh_code(5)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_5\" onClick=\"javascript:wpsh_print(5)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_5\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\"><span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>endItems<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">return<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><\/pre><\/div><\/div>\n<p>En caso contrario, preparamos los par\u00e1metros que deseamos enviar al servidor con:<\/p>\n<div id=\"wpshdo_6\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_6\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_6\"><\/a><a id=\"wpshat_6\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_6\"  onClick=\"javascript:wpsh_toggleBlock(6)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_6\" onClick=\"javascript:wpsh_code(6)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_6\" onClick=\"javascript:wpsh_print(6)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_6\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">let params <span class=\"sy0\">=<\/span> <span class=\"kw2\">new<\/span> FormData<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\nparams.<span class=\"me1\">append<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'start'<\/span><span class=\"sy0\">,<\/span> start<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\nparams.<span class=\"me1\">append<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'limit'<\/span><span class=\"sy0\">,<\/span> limit<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>Para hacer la llamada al servidor uso fetch de la siguiente manera:<\/p>\n<div id=\"wpshdo_7\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_7\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_7\"><\/a><a id=\"wpshat_7\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_7\"  onClick=\"javascript:wpsh_toggleBlock(7)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_7\" onClick=\"javascript:wpsh_code(7)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_7\" onClick=\"javascript:wpsh_print(7)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_7\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">fetch<span class=\"br0\">&#40;<\/span><span class=\"st0\">'ajax.php'<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span>\n    method<span class=\"sy0\">:<\/span> <span class=\"st0\">'post'<\/span><span class=\"sy0\">,<\/span>\n    body<span class=\"sy0\">:<\/span> params<span class=\"sy0\">,<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">then<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>response<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>response.<span class=\"me1\">ok<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"kw1\">return<\/span> response.<span class=\"me1\">json<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"kw1\">throw<\/span> <span class=\"st0\">'Error en llamada al servidor'<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">then<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>items<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>items.<span class=\"me1\">endItems<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        endItems <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"kw2\">var<\/span> html <span class=\"sy0\">=<\/span> <span class=\"st0\">''<\/span><span class=\"sy0\">;<\/span>\n        items.<span class=\"me1\">forEach<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>element<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n            html <span class=\"sy0\">+=<\/span> `\n                <span class=\"sy0\">&lt;<\/span>li <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;col-lg-3&quot;<\/span><span class=\"sy0\">&gt;<\/span>\n                    <span class=\"sy0\">&lt;<\/span>div <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card mb-3&quot;<\/span><span class=\"sy0\">&gt;<\/span>\n                        <span class=\"sy0\">&lt;<\/span>div <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-body&quot;<\/span><span class=\"sy0\">&gt;<\/span>\n                            <span class=\"sy0\">&lt;<\/span>h5 <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-title&quot;<\/span><span class=\"sy0\">&gt;<\/span>$<span class=\"br0\">&#123;<\/span>element.<span class=\"kw3\">name<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">&lt;\/<\/span>h5<span class=\"sy0\">&gt;<\/span>\n                            <span class=\"sy0\">&lt;<\/span>p <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-text&quot;<\/span><span class=\"sy0\">&gt;<\/span>$<span class=\"br0\">&#123;<\/span>element.<span class=\"me1\">description<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n                            <span class=\"sy0\">&lt;<\/span>p <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-text&quot;<\/span><span class=\"sy0\">&gt;<\/span>Cantidad<span class=\"sy0\">:<\/span> $<span class=\"br0\">&#123;<\/span>element.<span class=\"me1\">quantity<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n                            <span class=\"sy0\">&lt;<\/span>p <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-text&quot;<\/span><span class=\"sy0\">&gt;<\/span>Precio<span class=\"sy0\">:<\/span> $<span class=\"br0\">&#123;<\/span>element.<span class=\"me1\">price<\/span><span class=\"br0\">&#125;<\/span> \u20ac<span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n                            <span class=\"sy0\">&lt;<\/span>p <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;card-text&quot;<\/span><span class=\"sy0\">&gt;<\/span>Total<span class=\"sy0\">:<\/span> $<span class=\"br0\">&#123;<\/span>element.<span class=\"me1\">price<\/span> <span class=\"sy0\">*<\/span> element.<span class=\"me1\">quantity<\/span><span class=\"br0\">&#125;<\/span> \u20ac<span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n                            <span class=\"sy0\">&lt;<\/span>a href<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#&quot;<\/span> <span class=\"kw2\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;btn btn-primary&quot;<\/span><span class=\"sy0\">&gt;<\/span>Comprar ahora<span class=\"sy0\">&lt;\/<\/span>a<span class=\"sy0\">&gt;<\/span>\n                        <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n                    <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n                <span class=\"sy0\">&lt;\/<\/span>li<span class=\"sy0\">&gt;<\/span>\n            `<span class=\"sy0\">;<\/span>\n        <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n        <span class=\"kw2\">const<\/span> current_items <span class=\"sy0\">=<\/span> document.<span class=\"me1\">querySelector<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;.items&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        current_items.<span class=\"me1\">innerHTML<\/span> <span class=\"sy0\">+=<\/span> html<span class=\"sy0\">;<\/span>\n        start <span class=\"sy0\">+=<\/span> limit<span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"kw1\">catch<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>error<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    console.<span class=\"me1\">log<\/span><span class=\"br0\">&#40;<\/span>error<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>La funci\u00f3n <strong>fetch de JavaScript<\/strong> proporciona una interfaz para acceder y manipular partes del canal HTTP mediante peticiones y respuestas. Algo muy parecido a <strong>Ajax <\/strong>o <strong>XMLHttpRequest<\/strong> pero en versi\u00f3n moderna.<\/p>\n<p>En este caso le pasamos un m\u00e9todo \u00abpost\u00bb y un body con los par\u00e1metros que queremos trasladar al servidor.<\/p>\n<p>Una vez enviado los datos, con <em>then<\/em> capturamos la respuesta del servidor.<\/p>\n<p>Si la respuesta es correcta, retornamos la respuesta con json.<\/p>\n<p>En caso contrario, mostrar\u00edamos al usuario un error de servidor.<\/p>\n<p>Volvemos a usar <em>then<\/em> para recibir los datos del servidor, en este caso, los nuevos items o la variable booleana indicada.<\/p>\n<p>Si no hemos llegado al fin, mostramos los elementos que llegan del servidor.<\/p>\n<h2>C\u00f3digo PHP<\/h2>\n<p>En el archivo <em>ajax.php<\/em> que se est\u00e1 invocando en el <em>fetch<\/em> tenemos lo siguiente:<\/p>\n<div id=\"wpshdo_8\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_8\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_8\"><\/a><a id=\"wpshat_8\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_8\"  onClick=\"javascript:wpsh_toggleBlock(8)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_8\" onClick=\"javascript:wpsh_code(8)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_8\" onClick=\"javascript:wpsh_print(8)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_8\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"php\" style=\"font-family:monospace;\">try <span class=\"br0\">&#123;<\/span>\n    <span class=\"re0\">$connexion<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">new<\/span> PDO<span class=\"br0\">&#40;<\/span>\n        <span class=\"st0\">&quot;mysql:host=your-website.com;dbname=databasename&quot;<\/span><span class=\"sy0\">,<\/span>\n        <span class=\"st0\">&quot;usuario&quot;<\/span><span class=\"sy0\">,<\/span>\n        <span class=\"st0\">&quot;contrase\u00f1a&quot;<\/span><span class=\"sy0\">,<\/span>\n        <a href=\"http:\/\/www.php.net\/array\"><span class=\"kw3\">array<\/span><\/a><span class=\"br0\">&#40;<\/span>PDO<span class=\"sy0\">::<\/span><span class=\"me2\">ATTR_ERRMODE<\/span> <span class=\"sy0\">=&gt;<\/span> PDO<span class=\"sy0\">::<\/span><span class=\"me2\">ERRMODE_EXCEPTION<\/span><span class=\"sy0\">,<\/span> PDO<span class=\"sy0\">::<\/span><span class=\"me2\">MYSQL_ATTR_INIT_COMMAND<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"st0\">&quot;SET NAMES utf8&quot;<\/span><span class=\"br0\">&#41;<\/span>\n    <span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n<span class=\"br0\">&#125;<\/span> catch <span class=\"br0\">&#40;<\/span>PDOException <span class=\"re0\">$e<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">echo<\/span> <span class=\"re0\">$e<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">getMessage<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span>\n&nbsp;\n<span class=\"re0\">$start<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$_POST<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'start'<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\n<span class=\"re0\">$limit<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$_POST<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'limit'<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\ntry <span class=\"br0\">&#123;<\/span>\n    <span class=\"re0\">$statement<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$connexion<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">prepare<\/span><span class=\"br0\">&#40;<\/span>\n        <span class=\"st_h\">'SELECT *\n        FROM products \n        ORDER BY products_id DESC \n        LIMIT '<\/span><span class=\"sy0\">.<\/span><span class=\"br0\">&#40;<\/span>int<span class=\"br0\">&#41;<\/span><span class=\"re0\">$start<\/span><span class=\"sy0\">.<\/span><span class=\"st_h\">','<\/span><span class=\"sy0\">.<\/span><span class=\"br0\">&#40;<\/span>int<span class=\"br0\">&#41;<\/span><span class=\"re0\">$limit<\/span>\n    <span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    <span class=\"re0\">$statement<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">setFetchMode<\/span><span class=\"br0\">&#40;<\/span>PDO<span class=\"sy0\">::<\/span><span class=\"me2\">FETCH_ASSOC<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"re0\">$statement<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">execute<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    <span class=\"re0\">$items<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$statement<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">fetchAll<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><a href=\"http:\/\/www.php.net\/is_array\"><span class=\"kw3\">is_array<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"re0\">$items<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">&amp;&amp;<\/span> <a href=\"http:\/\/www.php.net\/count\"><span class=\"kw3\">count<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"re0\">$items<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">&gt;<\/span> 0<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <a href=\"http:\/\/www.php.net\/die\"><span class=\"kw3\">die<\/span><\/a><span class=\"br0\">&#40;<\/span><a href=\"http:\/\/www.php.net\/json_encode\"><span class=\"kw3\">json_encode<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"re0\">$items<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n        <a href=\"http:\/\/www.php.net\/die\"><span class=\"kw3\">die<\/span><\/a><span class=\"br0\">&#40;<\/span><a href=\"http:\/\/www.php.net\/json_encode\"><span class=\"kw3\">json_encode<\/span><\/a><span class=\"br0\">&#40;<\/span><a href=\"http:\/\/www.php.net\/array\"><span class=\"kw3\">array<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"st_h\">'reachedMax'<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw4\">true<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n<span class=\"br0\">&#125;<\/span> catch <span class=\"br0\">&#40;<\/span>PDOException <span class=\"re0\">$e<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span>\n    <a href=\"http:\/\/www.php.net\/die\"><span class=\"kw3\">die<\/span><\/a><span class=\"br0\">&#40;<\/span><a href=\"http:\/\/www.php.net\/json_encode\"><span class=\"kw3\">json_encode<\/span><\/a><span class=\"br0\">&#40;<\/span><a href=\"http:\/\/www.php.net\/array\"><span class=\"kw3\">array<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"st_h\">'error'<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"re0\">$e<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">getMessage<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><\/pre><\/div><\/div>\n<p>Hacemos un intento de conexi\u00f3n a la base de datos con PDO donde <i>basededatos <\/i>debe ser el nombre de tu base de datos, <em>usuario<\/em> debe ser el nombre de usuario de la base de datos y <em>contrase\u00f1a<\/em> debe ser la contrase\u00f1a para acceder a la base de datos.<\/p>\n<p>Si se consigue conectar con la base de datos, recibimos los par\u00e1metros <em>start<\/em> y <em>limit<\/em> para intentar ejecutar la consulta que toque en funci\u00f3n de estos par\u00e1metros.<\/p>\n<p>Si la consulta arroja informaci\u00f3n, retornamos al <strong>JavaScript<\/strong> el array de elementos que toca mostrar.<\/p>\n<p>Si la consulta arroja la variable endItems en true, se finaliza la ejecuci\u00f3n y ahora la funci\u00f3n getItems() no ejecutar\u00e1 la llamada as\u00edncrona.<\/p>\n<p style=\"text-align: center;\"><a class=\"btn btn-secondary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/javascript\/infinite-scroll\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i class=\"fa fa-eye\"><\/i> Ver demo<\/a> <a class=\"btn btn-primary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/javascript\/infinite-scroll\/infinite-scroll.zip\"><i class=\"fa fa-download\"><\/i> Descargar<\/a><\/p>\n<h2>Conclusi\u00f3n<\/h2>\n<p>El <strong>scroll infinito<\/strong> puede ser un muy buen recurso para tu p\u00e1gina web si se utiliza de la manera adecuada.<\/p>\n<p>En seg\u00fan que tipo de proyectos es indispensable o requerido pero para otros puede ser opcional.<\/p>\n<p>Bas\u00e1ndome tan solo en sus ventajas e inconvenientes creo que vale la pena implementarlo.<\/p>\n<p>\u00bfTu qu\u00e9 opinas?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El scroll infinito puede ser un buen recurso para tu p\u00e1gina web si se utiliza de forma correcta. Aprende como implementarlo con JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":7659,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[60],"class_list":["post-7657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-scroll"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Scroll infinito con JavaScript nativo usando fetch - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"El scroll infinito puede ser un buen recurso para tu p\u00e1gina web si se utiliza de forma correcta. Aprende como implementarlo con JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scroll infinito con JavaScript nativo usando fetch - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"El scroll infinito puede ser un buen recurso para tu p\u00e1gina web si se utiliza de forma correcta. Aprende como implementarlo con JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-04T18:40:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/infinite-scroll-js.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/\",\"name\":\"Scroll infinito con JavaScript nativo usando fetch - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/infinite-scroll-js.png\",\"datePublished\":\"2022-01-04T18:40:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"El scroll infinito puede ser un buen recurso para tu p\u00e1gina web si se utiliza de forma correcta. Aprende como implementarlo con JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/infinite-scroll-js.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/infinite-scroll-js.png\",\"width\":250,\"height\":250,\"caption\":\"Scroll infinito con JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scroll infinito con JavaScript nativo usando fetch\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scroll infinito con JavaScript nativo usando fetch - Jose Aguilar Blog","description":"El scroll infinito puede ser un buen recurso para tu p\u00e1gina web si se utiliza de forma correcta. Aprende como implementarlo con JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Scroll infinito con JavaScript nativo usando fetch - Jose Aguilar Blog","og_description":"El scroll infinito puede ser un buen recurso para tu p\u00e1gina web si se utiliza de forma correcta. Aprende como implementarlo con JavaScript.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2022-01-04T18:40:57+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/infinite-scroll-js.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/","url":"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/","name":"Scroll infinito con JavaScript nativo usando fetch - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/infinite-scroll-js.png","datePublished":"2022-01-04T18:40:57+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"El scroll infinito puede ser un buen recurso para tu p\u00e1gina web si se utiliza de forma correcta. Aprende como implementarlo con JavaScript.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/infinite-scroll-js.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/01\/infinite-scroll-js.png","width":250,"height":250,"caption":"Scroll infinito con JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/scroll-infinito-con-javascript-nativo-usando-fetch\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Scroll infinito con JavaScript nativo usando fetch"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7657"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7657\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7659"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}