<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX ile Veri Çekme</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #data {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>AJAX ile Dinamik Veri Çekme</h1>
    <button id="fetch-data">Verileri Getir</button>
    <div id="data"></div>

<script>
        document.getElementById('fetch-data').addEventListener('click', function() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var data = JSON.parse(xhr.responseText);
                    var output = '<h2>API Verileri:</h2>';
                    data.forEach(function(item) {
                        output += '<h3>' + item.title + '</h3><p>' + item.body + '</p>';
                    });
                    document.getElementById('data').innerHTML = output;
                } else {
                    console.error('Hata:', xhr.statusText);
                }
            };
            xhr.onerror = function() {
                console.error('İstek hatası');
            };
            xhr.send();
        });
    </script>
</body>
</html>

About THIS CODE (CANVASOR.NET):