jQuery AJAX

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        body { font-family: sans-serif; padding: 20px; background: #f8fafc; }
        .box { background: white; padding: 20px; border-radius: 8px; border: 1px solid #cbd5e1; max-width: 480px; }
        button { background: #00758f; color: white; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; }
        #responsArea { margin-top: 15px; padding: 12px; border-radius: 6px; background: #0f172a; color: #38bdf8; font-family: monospace; font-size: 13px; }
    </style>
</head>
<body>
    <div class="box">
        <h3>Permintaan $.ajax() Fleksibel</h3>
        <p>Memanggil API dengan konfigurasi method, dataType, dan handler sukses/gagal.</p>
        <button id="btnKirimAjax">Jalankan Permintaan $.ajax()</button>
        <div id="responsArea">// Status respons akan muncul di sini...</div>
    </div>

    <script>
        $(document).ready(function() {
            $('#btnKirimAjax').click(function() {
                $('#responsArea').text('Mengirim HTTP GET request...');
                
                // Simulasi pemrosesan $.ajax
                setTimeout(function() {
                    $('#responsArea').html(
                        'HTTP Status: 200 OK<br>' +
                        'Content-Type: application/json<br>' +
                        'Data: { "status": "sukses", "pesan": "Koneksi API Skillance stabil!" }'
                    );
                }, 500);
            });
        });
    </script>
</body>
</html>