Ajax এর মাধ্যমে Custom Error Messages প্রদর্শন করা একটি কার্যকরী পদ্ধতি, যা ব্যবহারকারীদের সঠিক এবং ব্যবহারযোগ্য ত্রুটি বার্তা দেখাতে সাহায্য করে। এর মাধ্যমে ব্যবহারকারী বুঝতে পারে কেন রিকোয়েস্ট ব্যর্থ হয়েছে এবং এর জন্য কী পদক্ষেপ নেওয়া যেতে পারে। নিচে Ajax রিকোয়েস্টে কাস্টম এরর মেসেজ প্রদর্শনের একটি উদাহরণ এবং এর ধাপগুলো আলোচনা করা হলো।
উদাহরণ: Ajax এর মাধ্যমে Custom Error Messages প্রদর্শন করা
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Custom Error Messages Example</title>
</head>
<body>
<h1>Ajax Request with Custom Error Messages</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- ডেটা বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
</div>
<script src="app.js"></script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
- HTML ফাইলে একটি শিরোনাম (
<h1>), একটি বোতাম (<button>), এবং একটি<div>এলিমেন্ট রয়েছে। - "Fetch Data" বোতামে ক্লিক করলে
fetchData()ফাংশন কল হবে, যা Ajax রিকোয়েস্ট করে ডেটা বা ত্রুটি বার্তা দেখাবে। data-containerনামে একটি<div>এলিমেন্ট রয়েছে, যেখানে ডেটা বা ত্রুটি বার্তা দেখানো হবে।
JavaScript (app.js):
function fetchData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// GET রিকোয়েস্ট ওপেন করা
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/101", true); // একটি ভুল URL (404 এরর তৈরি করতে)
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
if (xhr.status === 200) { // রিকোয়েস্ট সফল হলে
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else {
// Custom Error Message
displayCustomErrorMessage(xhr.status);
}
}
};
// ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
xhr.onerror = function() {
document.getElementById("data-container").innerHTML = "Network error occurred! Please check your internet connection.";
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
// কাস্টম এরর মেসেজ প্রদর্শনের ফাংশন
function displayCustomErrorMessage(status) {
var message;
switch (status) {
case 404:
message = "Error 404: The requested resource could not be found.";
break;
case 500:
message = "Error 500: Internal Server Error. Please try again later.";
break;
case 403:
message = "Error 403: Access forbidden. You do not have permission to access this resource.";
break;
default:
message = "An unexpected error occurred. Please try again.";
}
document.getElementById("data-container").innerHTML = message;
}
ব্যাখ্যা:
XMLHttpRequest অবজেক্ট তৈরি করা:
fetchData()ফাংশনে একটিXMLHttpRequestঅবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।
রিকোয়েস্ট ওপেন করা:
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/101", true);মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে। এখানে ইচ্ছাকৃতভাবে একটি ভুল URL ব্যবহার করা হয়েছে, যাতে 404 এরর তৈরি হয়।
onreadystatechange ইভেন্টে কাস্টম এরর মেসেজ হ্যান্ডলিং:
xhr.onreadystatechangeইভেন্টে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং তারপরxhr.statusচেক করা হয়েছে।- যদি
xhr.status === 200না হয়, তাহলেdisplayCustomErrorMessage()ফাংশন কল করা হয়েছে, যা স্ট্যাটাস কোডের উপর ভিত্তি করে কাস্টম এরর মেসেজ দেখায়।
onerror ইভেন্ট হ্যান্ডলার:
- যদি নেটওয়ার্কের কারণে কোনো সমস্যা হয়, যেমন ইন্টারনেট কানেকশন না থাকা, তাহলে
xhr.onerrorইভেন্ট হ্যান্ডলার সেই ত্রুটি হ্যান্ডেল করে এবং একটি কাস্টম মেসেজ দেখায়।
কাস্টম এরর মেসেজ প্রদর্শনের ফাংশন:
displayCustomErrorMessage()ফাংশন স্ট্যাটাস কোডের উপর ভিত্তি করে বিভিন্ন ত্রুটি মেসেজ প্রদর্শন করে:- 404: "The requested resource could not be found."
- 500: "Internal Server Error. Please try again later."
- 403: "Access forbidden. You do not have permission to access this resource."
- Default: "An unexpected error occurred. Please try again."
Error Management এর ধাপগুলো:
- HTTP Status Code চেক করা:
xhr.statusব্যবহার করে সার্ভার থেকে প্রাপ্ত স্ট্যাটাস চেক করা এবং কাস্টম মেসেজ প্রদর্শন করা। onreadystatechangeইভেন্টে ত্রুটি দেখানো: যদিstatus !== 200হয়, তাহলে HTML ডিভে একটি কাস্টম ত্রুটি মেসেজ দেখানো।onerrorইভেন্ট হ্যান্ডলিং: নেটওয়ার্ক সমস্যা হ্যান্ডেল করা এবং উপযুক্ত মেসেজ দেখানো।
সারসংক্ষেপ:
- Ajax রিকোয়েস্টের সময় কাস্টম এরর মেসেজ প্রদর্শনের জন্য
onreadystatechangeএবংonerrorইভেন্ট হ্যান্ডলার ব্যবহার করা হয়। - HTTP Status Code চেক করে কাস্টম মেসেজ প্রদর্শন করা হয়, যা ব্যবহারকারীদের সঠিক তথ্য প্রদান করে এবং তাদের পরবর্তী পদক্ষেপ নিতে সহায়তা করে।
- কাস্টম এরর মেসেজ ওয়েব অ্যাপ্লিকেশনকে আরও ইউজার-ফ্রেন্ডলি এবং রেসপন্সিভ করে তোলে।
এই উদাহরণটি অনুসরণ করে আপনি Ajax রিকোয়েস্টের সময় কাস্টম এরর মেসেজ সঠিকভাবে প্রদর্শন করতে পারবেন, যা আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ব্যবহারযোগ্য করে তুলবে।
Content added By
Read more
