https://github.com/bchavs12/different_api_calls_js
4 ways to make an API Call in JS and I tested all of them to see the difference between them, and get some fundamentals concepts about HTTP_REQUEST
https://github.com/bchavs12/different_api_calls_js
ajax-request axios fetch-api java xmlhttprequest
Last synced: 10 months ago
JSON representation
4 ways to make an API Call in JS and I tested all of them to see the difference between them, and get some fundamentals concepts about HTTP_REQUEST
- Host: GitHub
- URL: https://github.com/bchavs12/different_api_calls_js
- Owner: bchavs12
- Created: 2024-07-28T00:24:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-29T05:14:00.000Z (over 1 year ago)
- Last Synced: 2025-01-21T05:28:02.843Z (12 months ago)
- Topics: ajax-request, axios, fetch-api, java, xmlhttprequest
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Glossary --> Ajax
- Asynchronous JavaScript and XML (AJAX)
- Web development technique in which a web app fetches content from the server by making asynchronous HTTP requests,
- Ajax can be used to create **Single-page Applications**, in which the entire web app consists of a single document, which uses Ajax to update its content as needed.
## Ajax summary
- Nowadays Fetch()API Is more suitable for modern web applications
- But learn AJAX still be usefull for fundamentals concepts
## XMLHttpRequest: readyState property
```js
console.log("UNSENT", xhr.readyState) // readyState will be 0
xhr.open("GET", "/api", true)
console.log("OPENED", xhr.readyState) // readyState will be 1
xhr.onprogress = () => {
console.log("LOADING", xhr.readyState) // readyState will be 3
}
xhr.onload = () => {
console.log("DONE", xhr.readyState) // readyState will be 4
}
xhr.send(null)
```
# Fetch Request
```js
function fetchUserData(callback) {
fetch(API_URL)
.then((response) => {
if (!response.ok) {
throw new Error(`Network response was not ok: ${response.statusText}`)
}
return response.json()
})
.then((users) => {
users.forEach((user) => {
callback(user)
})
})
}
function userNameList(data) {
const userName = data.name
const li = document.createElement("li")
htmlElementList.appendChild(li)
li.textContent = userName
}
fetchUserData(userNameList)
```