🚀 JavaScript Fetch API & AJAX Tutorial

Fetch API lets you make HTTP requests (AJAX) easily to load data dynamically without reloading the page.

📚 Example: Fetch JSON Data

// Fetch data from JSONPlaceholder API
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => {
    console.log('Post title:', data.title);
    document.getElementById('fetchOutput').innerText = JSON.stringify(data, null, 2);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

Output will appear here...

🛠️ Example: POST Data with Fetch

// POST data to JSONPlaceholder (fake API)
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'My New Post',
    body: 'This is the content of the post.',
    userId: 123
  })
})
  .then(response => response.json())
  .then(data => {
    console.log('Created post:', data);
    document.getElementById('postOutput').innerText = JSON.stringify(data, null, 2);
  })
  .catch(error => {
    console.error('POST error:', error);
  });

Output will appear here...

⚡ Quick Tips

Use fetch(url) to get data. It returns a Promise.
Use response.json() to parse JSON response.
For POST/PUT requests, add options with method, headers, and body.
Always handle errors with .catch() or try-catch in async/await.
Modern browsers support Fetch natively — no extra libraries needed.