The Fetch API is a modern alternative to XMLHttpRequest. It's easier to use, more flexible, and based on Promises, making it simpler to handle asynchronous requests.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX with Fetch API</title>
</head>
<body>
<button id="fetchDataBtn">Fetch Data</button>
<div id="dataOutput"></div>
<script>
document.getElementById('fetchDataBtn').addEventListener('click', function() {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
document.getElementById('dataOutput').innerHTML = `
<h3>${data.title}</h3>
<p>${data.body}</p>
`;
})
.catch(error => console.error('There was a problem with the fetch operation:', error));
});
</script>
</body>
</html>