ajax2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX 2</title>
</head>
<body>
  <button id="button1">Get User</button>
  <button id="button2">Get Users</button>
  <br>
  <br>
  <br>
  <h1>User</h1>
  <div id="user"></div>
  <br>
  <h1>Users</h1>
  <div id="users"></div>


  <script>
    document.getElementById('button1').addEventListener('click', loadUser)
    document.getElementById('button2').addEventListener('click', loadUsers)

    const usersDiv = document.getElementById('users')

    //Tekil kullanıcı örneği
    function loadUser(){
      const xhr = new XMLHttpRequest()

      xhr.open('GET', 'user.json', true)

      xhr.onload = function(){
        if(this.status == 200) {
          const user = JSON.parse(this.responseText)

          let output = ''

          output += '<ul>' +
                    '<li>' + user.id + '</li>' +
                    '<li>' + user.name + '</li>' +
                    '<li>' + user.email + '</li>' +
                    '</ul>' 

          document.getElementById('user').innerHTML= output

        }
      }

      xhr.send()
    }

    //Çoğul kullanıcı örneği
    function loadUsers(){
      const xhr = new XMLHttpRequest()

      xhr.open('GET', 'users.json', true)

      xhr.onload = function(){
        if(this.status == 200) {
          const users = JSON.parse(this.responseText)

          console.log(users)

          let output = ''
          users.forEach(function(user,index){
            output += '<div>' + user.id + '</div>' +
                      '<div>' + user.name + '</div>' +
                      '<div>' + user.email + '</div>' 
          });
          console.log(output)

          usersDiv.innerHTML = output

          
        }
      }

      xhr.send()
    }
  </script>
</body>
</html>