AJAX - Volání JSON API pomocí XML v CodePen

V tomto článku budeme pracovat na AJAX XMLHttpRequest nejjednodušším způsobem. Může načíst jeden příspěvek a celý příspěvek voláním dat json api. Také použijeme nějaké html, CSS, JavaScript Nejprve se podívejme, co stavíme.

Požadavky

  1. HTML
  2. CSS
  3. JavaScript (DOM, AJAX, API)

Pojďme se tedy vrhnout do projektu

HTML

<body>
 <button id="btn">Get Data</button>
  <p id="p"></p>
</body>

V sekci HTML vytvoříme tlačítko a pod něj vložíme text 'p', který zobrazí data, když klikneme na 'tlačítko'.

nejprve nastavení lišty okna

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background: lightblue;
}

Pojďme navrhnout sadu tlačítek a uživatelského rozhraní pomocí CSS.

button{
  padding: 10px 30px;
  text-transform: capitalize;
  background: #222;
  color: #eee;
  outline: 0;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  margin: 20px 10px;
}
button:active{
  transform: scale(0.97);
}

Tlačítko je nyní připraveno k použití. Po kliknutí na tlačítko se v textu „p“ zobrazí data JSON. Převede se jako neuspořádaný styl seznamu 'ul li'.

ul {
  background: firebrick;
  padding: 20px;
  margin: 0 10px
}
ul li{
  color: lightblue;
}

Náhled
Bez kliknutí

Po kliknutí na tlačítko

Javascript

console.clear();
// external json data from codepen 'https://codepen.io/nakome/pen/DnEvr'
// fake api data 'https://jsonplaceholder.typicode.com/posts/'
const btn = document.getElementById('btn');
const p = document.getElementById('p');

Nejprve vyčistěte konzolu. Poté chyťte tlačítko a prvek p za jejich id.

btn.addEventListener('click', getData);

Do btn byl přidán 'click' Event Listener a vytvořen název funkce 'getData'

function getData (){
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
  // xhr.open('GET', 'https://codepen.io/nakome/pen/DnEvr.js', true);
  xhr.onload = function(){
    if(this.status == 200){
      const data = JSON.parse(this.responseText)
   p.innerHTML = `
   <ul>
   <li>ID: ${data.id}</li>
   <li>Title: ${data.title}</li>
   <li>Body: ${data.body}</li>
   </ul>
   `
    }
  }
  xhr.onerror = function(){
    const error = `404: Not Found`
    console.log(error);
    p.innerHTML = error;
  }
  xhr.send();

}

XMLHttpRequest vložíme do proměnné s názvem 'xhr'. pak funkce 'otevřít' vezme tři parametry 'method', 'url/fileName', 'true/false'.

const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

Poté musíme tento požadavek odeslat funkcí send() ve spodní části.

xhr.send();

Nyní, abychom získali data API, musíme použít název události 'onload'. zde vytvoříme podmínku, pokud je stav roven 200, data budou přijata. Data jsou přijímána metodou responseText. když použijeme data serveru, převedeme je metodou json.parse. A tuto hodnotu vložíme do nové proměnné s názvem 'data'.

 xhr.onload = function(){
    if(this.status == 200){
      const data = JSON.parse(this.responseText)

Zde jsem použil šablonový literál pro čistý kód. 'data' jsou volána jejich id, titulkem a názvem těla v metodě tečkové notace.

p.innerHTML = `
   <ul>
   <li>ID: ${data.id}</li>
   <li>Title: ${data.title}</li>
   <li>Body: ${data.body}</li>
   </ul>
   `

Nakonec vytvořím chybovou funkci, pokud dojde k chybě.

xhr.onerror = function(){
    const error = `404: Not Found`
    console.log(error);
    p.innerHTML = error;

Poznámky

Zde jsem vložil dva různé typy json api. Pracoval jsem na falešném api. Můžete pracovat s oběma.

// external json data from CodePen - 'https://codepen.io/nakome/pen/DnEvr'
// fake api data - 'https://jsonplaceholder.typicode.com/posts/'

CodePen

Celý projekt je v CodePen

Sbalení

Doufám, že se vám článek líbil, pokud ano, tak nezapomeňte stisknout ❤️ a Odebírat. Můžete si jej také uložit do záložek pro pozdější použití. Bylo zábavné vytvořit tento projekt a pokud máte nějaké dotazy nebo návrhy, neváhejte je zahodit. Uvidíme se.
Svou podporu můžete rozšířit tím, že mi dáte hvězdičky na profilu GitHub.😊👇
Github
Portfolio