====== 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 (Web Browser) ===== This code sends a GET request to 'https://api.github.com/users', then prints the data in the web page:




  
    Fetch API Example

The following script will display the data in a much more cleaner way and also display the avatar image content:




  
    Fetch API Example

To run it, just double click on the html file, it will be opened in the web browser. ===== AJAX using the fetch API in JavaScript (Node.js) ===== We'll need to use node-fetch instead of fetch. \\ To install it:


npm install node-fetch

Output:


added 6 packages, and audited 7 packages in 1s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Then the script should be adapted for node.js:


import fetch from 'node-fetch';

fetch('https://api.github.com/users', {
    method: 'GET',
})
    .then(response => response.json())
    .then(data => {
        data.forEach(user => {
            console.log('Login: ', user.login);
            console.log('ID: ', user.id);
            console.log('Node ID: ', user.node_id);
            console.log('Avatar URL: ', user.avatar_url);
            console.log('Gravatar ID: ', user.gravatar_id);
            console.log('URL: ', user.url);
            console.log('HTML URL: ', user.html_url);
            console.log('Followers URL: ', user.followers_url);
            console.log('Following URL: ', user.following_url);
            console.log('Gists URL: ', user.gists_url);
            console.log('Starred URL: ', user.starred_url);
            console.log('Subscriptions URL: ', user.subscriptions_url);
            console.log('Organizations URL: ', user.organizations_url);
            console.log('Repos URL: ', user.repos_url);
            console.log('Events URL: ', user.events_url);
            console.log('Received Events URL: ', user.received_events_url);
            console.log('Type: ', user.type);
            console.log('Site Admin: ', user.site_admin);
            console.log('\n----------\n');
        });
    })
    .catch((error) => console.error('Error:', error));

To run it:


node ajax-fetch-node.js

===== Using XMLHttpRequest (the traditional AJAX method) to fetch data from a server ===== We use the **XMLHttpRequest** object to send a GET request to the GitHub API, just like we did with Fetch API above. We then use the onload event handler to process the response when it's ready. If the request is successful (status code 200), we parse the response text as JSON, and then create some HTML content that displays the user's name, avatar, and url. If the request fails, we log the response text to the console. Finally, we call the loadUsers function to kick off the AJAX request when the script loads. This will fetch data from the server without a page reload, in true AJAX style!

Node.js can certainly make HTTP requests to APIs or other servers using libraries like axios or node-fetch, or using built-in modules like http or https. These requests are indeed asynchronous, but they're not considered "AJAX requests" because they're not being used to update a web page without a full page refresh. \\ \\ While both AJAX in the browser and HTTP requests in Node.js involve asynchronous operations, they're used in different contexts and for different purposes. So, it's accurate to say that there's no "true AJAX style" in Node.js, even though Node.js certainly supports asynchronous operations and can make HTTP requests.