প্রিয় ডেভেলপারস, আসসালামু আলাইকুম। আশা করি আপনারা সবাই ভালো আছেন। অনেক সময় প্রজেক্টের প্রয়োজনুসারে Third Party API নিয়ে কাজ করতে হয় এবং UI তে ডাটা লোড করতে হয়। যদিও API শব্দটি Backend এর সাথে জড়িত এবং তা নিয়ে আমরা concern নই। তবে এই API এর সাথে কীভাবে ডিল করলে আমরা আমাদের কাঙ্ক্ষিত ফলাফল অর্জন করতে পারি তা নিয়ে concern। আর এই API এর সাথে ডিল করার কাজটা জাভাস্ক্রিট এর কিছু বিল্ট মেথড আমাদেরকে প্রদান করে, যার মাধ্যমে আমরা অতি সহজে API এর সাথে Interact করতে পারি। তাই আজকের ব্লগে JavaScript এর জনপ্রিয় বিল্ট-ইন মেথড নিয়ে বিস্তারিত শেয়ার করবো। আশা করি আপনাদের ভালো লাগবে, তাহলে চলুন শুরু করা যাক।
জাভাস্ক্রিপ্টে ৪ টি জনপ্রিয় মেথড রয়েছে, যাদের মাধ্যমে Third Party API বা এক্সটারনাল
ওপেন সোর্স থেকে ডাটা নিয়ে আমরা সহজে কাজ করতে পারি। আর সেগুলো নিন্মরুপ -
- XMLHttpRequest
- Fetch
- Using Axios Library
- jQuery AJAX
XMLHttpRequest দিয়ে API Request:
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
xhr.onload = function () {
if (xhr.status === 200) {
let response = JSON.parse(xhr.responseText);
console.log("Title:", response.title);
} else {
console.log("Something went wrong!");
}
};
xhr.send();
HTML এর সাথে XMLHttpRequest এর ব্যবহারঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XMLHttpRequest Example</title>
</head>
<body>
<button onclick="makeRequest()">Make Request</button>
<div id="result"></div>
<script>
function makeRequest() {
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);
xhr.onload = function () {
if (xhr.status === 200) {
var res = JSON.parse(xhr.responseText);
document.getElementById("result").innerHTML =
"<strong>Title:</strong> " + res.name;
} else {
console.log("Something went wrong!");
}
};
xhr.send();
}
</script>
</body>
</html>
Fetch দিয়ে API Request:
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
console.log("Title:", data.title);
})
.catch((error) => {
console.error("Error:", error);
});
HTML এর সাথে fetch এর ব্যবহারঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fetch API Example</title>
</head>
<body>
<script>
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
<!-- Display the title in the body of the document -->
document.body.innerHTML = "<strong>Title:</strong> " + data.title;
})
.catch((error) => {
console.error("Error:", error);
});
</script>
</body>
</html>
Using Axios Library দিয়ে API
Request:
Axios একটি ওপেন সোর্স লাব্রেরি। axios ব্রাউজার এবং নোড
উভয় environment এ কাজ করে। নিন্মে উভয় environment কীভাবে axios ব্যবহার করতে হয়
তা নিয়ে বিস্তারিত উদাহরণসহ আলোচনা করা হলো –
ব্রাউজারে axios ব্যাবহারঃ
প্রথম ধাপঃ axios দিয়ে API Request করার জন্য প্রথমে html ফাইলে axios এর CDN ব্যবহার করতে হবে, axios এর CDN নিম্নরুপ –
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
HTML এর সাথে axios এর ব্যবহারঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Axios API Example</title>
<!-- Include axios library CDN-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<button onclick="makeRequest()">Make Request</button>
<div id="result"></div>
<script>
function makeRequest() {
// Make a GET request using Axios
axios
.get("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => {
// Handle the successful response
document.body.innerHTML =
"<strong>Title:</strong> " + response.data.title;
})
.catch((error) => {
// Handle errors
console.error("Error:", error);
});
}
</script>
</body>
</html>
axios এর সাধারণ ব্যবহারঃ
axios
.get("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => {
<!-- Handle the successful response -->
document.body.innerHTML = "<strong>Title:</strong> " + response.data.title;
})
.catch((error) => {
<!-- Handle errors -->
console.error("Error:", error);
});
নোডে axios ব্যবহারঃ
Node.js এ axios ব্যবহার
করার জন্য axios এর প্যাকেজটি ইন্সটল করতে হবে। axios ইন্সটল করার জন্য
নিম্নের কম্যান্ডটি টারমিনালে রান করুন –
npm install axios
<!-- Import the Axios library -->
const axios = require("axios");
<!-- URL for the API endpoint -->
const apiUrl = "https://jsonplaceholder.typicode.com/posts/1";
<!-- Make a GET request using Axios -->
axios
.get(apiUrl)
.then((res) => {
<!-- Handle the successful response -->
console.log("Title:", res.data.title);
})
.catch((error) => {
<!-- Handle errors -->
console.error("Error:", error.message);
});
jQuery AJAX দিয়ে API Request:
প্রথম ধাপঃ AJAX দিয়ে API Request করার জন্য প্রথমে html ফাইলে AJAX এর CDN ব্যবহার করতে হবে, AJAX এর CDN নিম্নরুপ –
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
HTML এর সাথে jQuery AJAX ব্যবহারঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery AJAX Example</title>
<!-- Include jQuery from CDN -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<button onclick="makeRequest()">Make Request</button>
<div id="result"></div>
<script>
function makeRequest() {
// Make a GET request using jQuery
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
method: "GET",
success: function (data) {
// Handle the successful response
$("#result").html("<strong>Title:</strong> " + data.title);
},
error: function (error) {
// Handle errors
console.error("Error:", error);
},
});
}
</script>
</body>
</html>
jQuery AJAX এর সাধারণ ব্যবহারঃ
<!-- Make a GET request using jQuery -->
<script>
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
method: "GET",
success: function (data) {
// Handle the successful response
$("#result").html("<strong>Title:</strong> " + data.title);
},
error: function (error) {
// Handle errors
console.error("Error:", error);
},
});
</script>
আশা করি আপনি আজকের এই ব্লগটি মনোযোগ সহকারে পড়েছেন। আজকের ব্লগটি আপনার কাছে কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। পোষ্টে উল্লিখিত কোনো অংশ যদি বুঝতে সমস্যা হয়, তাহলে কমেন্ট বক্সে জানিয়ে দিন। ইনশাআল্লাহ্, সমস্যা সমাধানের চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন ব্লগে। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
