hanancs/first.md

## first.md

      
    Raw
  

              first.md
            
          
    All possible ways of making HTTP client requests in JS

1. AJAX - jQuery

2. Axios

3. Fetch

4. Superagent

5. XHR

94 libraries you can play around


## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- <script src="scriptfetch.js"></script> -->
    <!-- <script src="scriptxhr.js"></script> -->
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>

    <div class="d-flex justify-content-center">
        <div class="spinner-border" role="status" id="loading">
            <span class="sr-only">Loading...</span>
        </div>
    </div>

    <h1>Registered Employees</h1>

    <table id="employees"></table>

</body>

<!-- Axios -->

<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="scriptaxios.js"></script> -->

<!-- Ajax -jQuery -->

<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scriptajax.js"></script> -->

<script src="https://unpkg.com/superagent"></script>
<script src="scriptsuperagent.js"></script>


</html>

## scriptajax.js
const api_url = "https://jsonplaceholder.typicode.com/users";

async function getapi(url) {
    await $(document).ready(function () {
        $.ajax({
            url: url,
            type: "GET",
            success: function (result) {
                console.log(result);
                let data = result;
                if (result) {
                    hideloader();
                }
                show(data);
            },
            error: function (error) {
                console.log(error);
            }
        });
    });
}

// Calling that async function
getapi(api_url);

// Function to hide the loader
function hideloader() {
    document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
    let tab =
        `<tr>
          <th>Name</th>
          <th>Office</th>
          <th>Position</th>
          <th>Salary</th>
         </tr>`;

    // Loop to access all rows
    for (let r of data) {
        tab += `<tr>
    <td>${r.name} </td>
    <td>${r.username}</td>
    <td>${r.email}</td>
    <td>${r.website}</td>
</tr>`;
    }
    // Setting innerHTML as tab variable
    document.getElementById("employees").innerHTML = tab;
}

## scriptaxios.js
const api_url = "https://jsonplaceholder.typicode.com/users";

//https://masteringjs.io/tutorials/axios/data To change axios response type
// https://axios-http.com/docs/intro

async function getapi(url) {
    try {
        const response = await axios.get(url);
        console.log(response.data);
        let data = response.data;
        if (response) {
            hideloader();
        }
        show(data);
    } catch (error) {
        console.error(error);
    }
}

// Calling that async function
getapi(api_url);

// Function to hide the loader
function hideloader() {
    document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
    let tab =
        `<tr>
          <th>Name</th>
          <th>Office</th>
          <th>Position</th>
          <th>Salary</th>
         </tr>`;

    // Loop to access all rows
    for (let r of data) {
        tab += `<tr>
    <td>${r.name} </td>
    <td>${r.username}</td>
    <td>${r.email}</td>
    <td>${r.website}</td>
</tr>`;
    }
    // Setting innerHTML as tab variable
    document.getElementById("employees").innerHTML = tab;
}

## scriptfetch.js
const api_url = "https://jsonplaceholder.typicode.com/users";

// Defining async function
async function getapi(url) {
    // Storing response
    const response = await fetch(url);
    // Storing data in form of JSON
    var data = await response.json();
    console.log(data);
    if (response) {
        hideloader();
    }
    show(data);
}
// Calling that async function
getapi(api_url);

// Function to hide the loader
function hideloader() {
    document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
    let tab =
        `<tr>
          <th>Name</th>
          <th>Office</th>
          <th>Position</th>
          <th>Salary</th>
         </tr>`;

    // Loop to access all rows
    for (let r of data) {
        tab += `<tr>
    <td>${r.name} </td>
    <td>${r.username}</td>
    <td>${r.email}</td>
    <td>${r.website}</td>
</tr>`;
    }
    // Setting innerHTML as tab variable
    document.getElementById("employees").innerHTML = tab;
}

## scriptsuperagent.js
const api_url = "https://jsonplaceholder.typicode.com/users";

//https://visionmedia.github.io/superagent/

function getapi(url) {
    (async () => {
        try {
            const res = await superagent.get(url);
            console.log(res.body);
            let data = res.body;
            if (res) {
                hideloader();
            }
            show(data);
        } catch (err) {
            console.error(err);
        }
    })();
}

// Calling that async function
getapi(api_url);

// Function to hide the loader
function hideloader() {
    document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
    let tab =
        `<tr>
          <th>Name</th>
          <th>Office</th>
          <th>Position</th>
          <th>Salary</th>
         </tr>`;

    // Loop to access all rows
    for (let r of data) {
        tab += `<tr>
    <td>${r.name} </td>
    <td>${r.username}</td>
    <td>${r.email}</td>
    <td>${r.website}</td>
</tr>`;
    }
    // Setting innerHTML as tab variable
    document.getElementById("employees").innerHTML = tab;
}

## scriptxhr.js
const api_url = "https://jsonplaceholder.typicode.com/users";

// Defining async function
async function getapi(url) {
    // Storing response
    let request = await new XMLHttpRequest();
    request.open("GET", url);
    request.send();
    request.onload = () => {
        // console.log(request);
        if (request.status === 200) {
            // by default the response comes in the string format, we need to parse the data into JSON
            // Storing data in form of JSON
            var data = JSON.parse(request.response);
            console.log(data);
            if (request) {
                hideloader();
            }
            show(data);
        } else {
            console.log(`error ${request.status} ${request.statusText}`);
        }
    };
}
// Calling that async function
getapi(api_url);

// Function to hide the loader
function hideloader() {
    document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
    let tab =
        `<tr>
          <th>Name</th>
          <th>Office</th>
          <th>Position</th>
          <th>Salary</th>
         </tr>`;

    // Loop to access all rows
    for (let r of data) {
        tab += `<tr>
    <td>${r.name} </td>
    <td>${r.username}</td>
    <td>${r.email}</td>
    <td>${r.website}</td>
</tr>`;
    }
    // Setting innerHTML as tab variable
    document.getElementById("employees").innerHTML = tab;
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<!-- <script src="scriptfetch.js"></script> -->
	<!-- <script src="scriptxhr.js"></script> -->
	<link rel="stylesheet" href="style.css" />
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>

	<body>

	<div class="d-flex justify-content-center">
	<div class="spinner-border" role="status" id="loading">
	<span class="sr-only">Loading...</span>
	</div>
	</div>

	<h1>Registered Employees</h1>

	<table id="employees"></table>

	</body>

	<!-- Axios -->

	<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="scriptaxios.js"></script> -->

	<!-- Ajax -jQuery -->

	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="scriptajax.js"></script> -->

	<script src="https://unpkg.com/superagent"></script>
	<script src="scriptsuperagent.js"></script>



	</html>
	const api_url = "https://jsonplaceholder.typicode.com/users";

	async function getapi(url) {
	await $(document).ready(function () {
	$.ajax({
	url: url,
	type: "GET",
	success: function (result) {
	console.log(result);
	let data = result;
	if (result) {
	hideloader();
	}
	show(data);
	},
	error: function (error) {
	console.log(error);
	}
	});
	});
	}

	// Calling that async function
	getapi(api_url);

	// Function to hide the loader
	function hideloader() {
	document.getElementById('loading').style.display = 'none';
	}
	// Function to define innerHTML for HTML table
	function show(data) {
	let tab =
	`<tr>
	<th>Name</th>
	<th>Office</th>
	<th>Position</th>
	<th>Salary</th>
	</tr>`;

	// Loop to access all rows
	for (let r of data) {
	tab += `<tr>
	<td>${r.name} </td>
	<td>${r.username}</td>
	<td>${r.email}</td>
	<td>${r.website}</td>
	</tr>`;
	}
	// Setting innerHTML as tab variable
	document.getElementById("employees").innerHTML = tab;
	}
	const api_url = "https://jsonplaceholder.typicode.com/users";

	//https://masteringjs.io/tutorials/axios/data To change axios response type
	// https://axios-http.com/docs/intro

	async function getapi(url) {
	try {
	const response = await axios.get(url);
	console.log(response.data);
	let data = response.data;
	if (response) {
	hideloader();
	}
	show(data);
	} catch (error) {
	console.error(error);
	}
	}

	// Calling that async function
	getapi(api_url);

	// Function to hide the loader
	function hideloader() {
	document.getElementById('loading').style.display = 'none';
	}
	// Function to define innerHTML for HTML table
	function show(data) {
	let tab =
	`<tr>
	<th>Name</th>
	<th>Office</th>
	<th>Position</th>
	<th>Salary</th>
	</tr>`;

	// Loop to access all rows
	for (let r of data) {
	tab += `<tr>
	<td>${r.name} </td>
	<td>${r.username}</td>
	<td>${r.email}</td>
	<td>${r.website}</td>
	</tr>`;
	}
	// Setting innerHTML as tab variable
	document.getElementById("employees").innerHTML = tab;
	}
	const api_url = "https://jsonplaceholder.typicode.com/users";

	// Defining async function
	async function getapi(url) {
	// Storing response
	const response = await fetch(url);
	// Storing data in form of JSON
	var data = await response.json();
	console.log(data);
	if (response) {
	hideloader();
	}
	show(data);
	}
	// Calling that async function
	getapi(api_url);

	// Function to hide the loader
	function hideloader() {
	document.getElementById('loading').style.display = 'none';
	}
	// Function to define innerHTML for HTML table
	function show(data) {
	let tab =
	`<tr>
	<th>Name</th>
	<th>Office</th>
	<th>Position</th>
	<th>Salary</th>
	</tr>`;

	// Loop to access all rows
	for (let r of data) {
	tab += `<tr>
	<td>${r.name} </td>
	<td>${r.username}</td>
	<td>${r.email}</td>
	<td>${r.website}</td>
	</tr>`;
	}
	// Setting innerHTML as tab variable
	document.getElementById("employees").innerHTML = tab;
	}
	const api_url = "https://jsonplaceholder.typicode.com/users";

	//https://visionmedia.github.io/superagent/

	function getapi(url) {
	(async () => {
	try {
	const res = await superagent.get(url);
	console.log(res.body);
	let data = res.body;
	if (res) {
	hideloader();
	}
	show(data);
	} catch (err) {
	console.error(err);
	}
	})();
	}

	// Calling that async function
	getapi(api_url);

	// Function to hide the loader
	function hideloader() {
	document.getElementById('loading').style.display = 'none';
	}
	// Function to define innerHTML for HTML table
	function show(data) {
	let tab =
	`<tr>
	<th>Name</th>
	<th>Office</th>
	<th>Position</th>
	<th>Salary</th>
	</tr>`;

	// Loop to access all rows
	for (let r of data) {
	tab += `<tr>
	<td>${r.name} </td>
	<td>${r.username}</td>
	<td>${r.email}</td>
	<td>${r.website}</td>
	</tr>`;
	}
	// Setting innerHTML as tab variable
	document.getElementById("employees").innerHTML = tab;
	}