This is an old revision of the document!

Ajax fetch example

AJAX (Asynchronous JavaScript and XML) and async JavaScript both deal with asynchronous behavior in JavaScript, but they are used for different things.

AJAX is a technique that allows a web page to communicate with a server and update its content without refreshing the page. AJAX can be done using vanilla JavaScript (usually with the XMLHttpRequest object or fetch API) or with a library like jQuery (using the $.ajax() function).

AJAX using the fetch API in JavaScript

This code sends a GET request to 'https://api.github.com/users', then logs the returned data to the console.

ajax-fetch.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Fetch API Example</h1>
    <div id="data"></div>
    <script>
      fetch('https://api.github.com/users', {
        method: 'GET',
      })
      .then(response => response.json())
      .then(data => {
        // Convert the data to a string, so we can put it into the HTML
        // This may vary depending on the structure of your data
        let dataStr = JSON.stringify(data, null, 2);
 
        // Find the div by its ID, and put the data into it
        document.getElementById('data').textContent = dataStr;
      })
      .catch((error) => console.error('Error:', error));
    </script>
  </body>
</html>