Fetch API and AJAX

Here's an example showing how to use the Fetch API to retrieve and post data:

// GET Request using Fetch API
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log('GET:', data))
  .catch(error => console.error('Error:', error));

// POST Request using Fetch API
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'New Post',
    body: 'This is the post content',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log('POST:', data))
  .catch(error => console.error('Error:', error));
          

This code demonstrates:

• Making HTTP GET and POST requests with fetch().
• Using .then() to handle Promise-based responses.
• Converting response to JSON with response.json().
• Sending data with appropriate headers using POST.

AJAX (Asynchronous JavaScript and XML) is a technique for making asynchronous web requests to update parts of a web page without refreshing.

The modern Fetch API simplifies AJAX by using promises. It's cleaner, more powerful, and supports the full suite of HTTP methods (GET, POST, PUT, DELETE, etc.).

• fetch(url, options) initiates a request to the server.
• Responses are returned as Promises and can be converted to JSON using response.json().
• Headers and body content can be customized for POST/PUT requests.

• Fetching data from RESTful APIs (e.g., posts, comments, user profiles).
• Submitting form data asynchronously.
• Creating interactive single-page applications (SPAs).
• Loading content dynamically without page reloads.
• Communicating with serverless backends or databases (e.g., Firebase).