light mode
night mode
On This Page

Ajax এর মাধ্যমে JSON Data Request করা

OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax এর মাধ্যমে JSON ডেটা রিকোয়েস্ট করা হলো ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের একটি সাধারণ এবং গুরুত্বপূর্ণ প্রক্রিয়া। Ajax ব্যবহার করে আমরা একটি API কল করতে পারি এবং JSON ফরম্যাটে ডেটা রিসিভ করে তা প্রসেস করতে পারি। নিচে একটি উদাহরণ সহ JSON ডেটা রিকোয়েস্ট করার ধাপগুলো এবং এর ব্যাখ্যা দেওয়া হলো।

উদাহরণ: Ajax এর মাধ্যমে JSON Data Request করা

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>JSON Data Request Example</title>
</head>
<body>
    <h1>Fetch JSON Data Using Ajax</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- JSON ডেটা এখানে দেখানো হবে -->
    </div>

    <script src="app.js"></script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • এখানে একটি HTML পেজ তৈরি করা হয়েছে যেখানে একটি শিরোনাম (<h1>), একটি বোতাম (<button>), এবং একটি <div> এলিমেন্ট রয়েছে।
  • "Fetch Data" বোতামে ক্লিক করলে fetchData() ফাংশন কল হবে, যা Ajax রিকোয়েস্ট করে JSON ডেটা নিয়ে আসবে।
  • data-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে Ajax রিকোয়েস্টের মাধ্যমে প্রাপ্ত JSON ডেটা দেখানো হবে।

JavaScript (app.js):

function fetchData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // GET রিকোয়েস্ট ওপেন করা
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সম্পূর্ণ এবং সফল কিনা তা চেক করা
            var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
            document.getElementById("data-container").innerHTML = `
                <h2>${data.title}</h2>
                <p>${data.body}</p>
            `;
        } else if (xhr.readyState === 4) {
            // যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
            document.getElementById("data-container").innerHTML = "Error fetching data!";
        }
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

বিস্তারিত ব্যাখ্যা:

  ১. XMLHttpRequest অবজেক্ট তৈরি করা:

  • fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।

  ২. রিকোয়েস্ট ওপেন করা:

  • xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে।
  • "https://jsonplaceholder.typicode.com/posts/1" URL এ একটি JSON ডেটা ফেচ করা হবে। এটি একটি ডেমো API যা JSON ফরম্যাটে ডেটা প্রদান করে।
  • true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে।

  ৩. রেসপন্স হ্যান্ডলিং:

  • xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 200)।
  • যদি রিকোয়েস্ট সফল হয়, তাহলে JSON ডেটা JSON.parse(xhr.responseText) ব্যবহার করে JavaScript অবজেক্টে কনভার্ট করা হয়েছে।
  • তারপর, HTML ডকুমেন্টের data-container ডিভে সেই ডেটা দেখানো হয়েছে।
  • যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে একটি এরর মেসেজ দেখানো হয়েছে।

  ৪. রিকোয়েস্ট পাঠানো:

  • xhr.send(); মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।

সার্ভার রেসপন্স:

এই উদাহরণে, আমরা একটি JSONPlaceholder API ব্যবহার করেছি, যা একটি ডেমো API এবং নিচের মতো JSON ডেটা প্রদান করে:

{
    "userId": 1,
    "id": 1,
    "title": "Sample Title",
    "body": "This is a sample body text."
}

প্রোগ্রামটি কীভাবে কাজ করে:

  1. যখন ইউজার "Fetch Data" বোতামটি ক্লিক করে, তখন fetchData() ফাংশন কল হয়।
  2. ফাংশনটি একটি Ajax রিকোয়েস্ট পাঠায় এবং সার্ভার থেকে JSON ডেটা রিসিভ করে।
  3. রেসপন্স পাওয়ার পর, JSON ডেটা JavaScript অবজেক্টে কনভার্ট করা হয় এবং তা HTML পেজে ইনজেক্ট করা হয়, ফলে ইউজার পেজ রিলোড ছাড়াই সেই ডেটা দেখতে পারে।

সারসংক্ষেপ:

  • Ajax এর মাধ্যমে JSON ডেটা রিকোয়েস্ট: XMLHttpRequest অবজেক্ট ব্যবহার করে একটি GET রিকোয়েস্ট পাঠানো হয়, এবং সার্ভার থেকে JSON ডেটা রিসিভ করা হয়।
  • JSON ডেটা প্রসেসিং: JSON ডেটা JSON.parse() মেথড দিয়ে JavaScript অবজেক্টে কনভার্ট করা হয়।
  • HTML DOM আপডেট করা: প্রাপ্ত JSON ডেটা ব্যবহার করে HTML পেজে নতুন ডেটা ডায়নামিকভাবে যোগ করা হয়।

এই ধাপগুলো অনুসরণ করে আপনি Ajax এর মাধ্যমে JSON ডেটা রিকোয়েস্ট করতে এবং সেটি প্রসেস করে ওয়েব পেজে দেখাতে পারবেন, যা ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করে তোলে।

আরও দেখুন...

On This Page

or

Don't have an account? Register

Promotion