light mode
night mode
অ্যাজাক্স (Ajax)

Server Response এবং Data Processing

Web Development - অ্যাজাক্স (Ajax) - Ajax এর মাধ্যমে GET এবং POST Request (GET এবং POST Request Handling with Ajax) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax ব্যবহার করে সার্ভার রেসপন্স এবং ডেটা প্রসেসিং করা হলো একটি গুরুত্বপূর্ণ ধাপ, যেখানে সার্ভার থেকে প্রাপ্ত ডেটা (রেসপন্স) গ্রহণ করা হয় এবং সেটিকে ব্যবহার করে UI বা HTML DOM আপডেট করা হয়। Ajax রিকোয়েস্ট সম্পন্ন হলে XMLHttpRequest অবজেক্টের মাধ্যমে সার্ভার রেসপন্স হ্যান্ডল করা হয়। নিচে Server Response এবং Data Processing এর বিস্তারিত ব্যাখ্যা, উদাহরণ এবং ধাপগুলো তুলে ধরা হলো।

সার্ভার রেসপন্স এবং ডেটা প্রসেসিংয়ের ধাপ:

১. onreadystatechange ইভেন্ট হ্যান্ডলার:

  • Ajax রিকোয়েস্ট পাঠানোর পর, XMLHttpRequest অবজেক্টের onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে রিকোয়েস্টের অবস্থা চেক করা হয়।
  • রিকোয়েস্ট সম্পূর্ণ হলে (readyState === 4), আমরা চেক করি যে রিকোয়েস্ট সফল হয়েছে কিনা (status === 200)।

২. JSON বা প্লেইন টেক্সট রেসপন্স প্রসেস করা:

  • সার্ভার থেকে প্রাপ্ত ডেটা JSON, XML, বা প্লেইন টেক্সট হতে পারে।
  • JSON ডেটা সাধারণত JSON.parse() মেথড দিয়ে JavaScript অবজেক্টে কনভার্ট করা হয়।
  • প্লেইন টেক্সট রেসপন্স সরাসরি ব্যবহার করা যেতে পারে।

৩. HTML DOM আপডেট করা:

  • প্রাপ্ত ডেটা প্রসেস করার পর, JavaScript এর মাধ্যমে HTML DOM আপডেট করা হয়। উদাহরণস্বরূপ, নতুন ডেটা HTML ডিভ বা তালিকায় যোগ করা হয়, অথবা কোনো টেবিল আপডেট করা হয়।

উদাহরণ: Server Response এবং Data Processing

নিচে একটি সম্পূর্ণ উদাহরণ দেওয়া হলো যেখানে সার্ভার থেকে JSON ডেটা প্রাপ্ত এবং তা প্রসেস করা হয়েছে:

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>Server Response Example</title>
</head>
<body>
    <h1>Fetch and Display Data</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- সার্ভার থেকে প্রাপ্ত ডেটা এখানে দেখানো হবে -->
    </div>

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

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) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
            if (xhr.status === 200) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা
                var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
                
                // HTML ডকুমেন্টে ডেটা দেখানো
                document.getElementById("data-container").innerHTML = `
                    <h2>${data.title}</h2>
                    <p>${data.body}</p>
                `;
            } else {
                // যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
                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 রিকোয়েস্ট সেটআপ করা হয়েছে।

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

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

  ৪. এরর ম্যানেজমেন্ট:

  • যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে একটি এরর মেসেজ দেখানো হয়েছে।

৪. সার্ভার রেসপন্স উদাহরণ:

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

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

৫. JSON ডেটা প্রসেসিং এবং DOM আপডেট:

  • সার্ভার থেকে JSON ডেটা পাওয়ার পর, JSON.parse() দিয়ে তা JavaScript অবজেক্টে কনভার্ট করা হয়েছে।
  • তারপর, এই ডেটা HTML ডকুমেন্টের data-container ডিভে ইনজেক্ট করা হয়েছে, যাতে ইউজার পেজ রিলোড ছাড়াই ডেটা দেখতে পারে।

সারসংক্ষেপ:

  • সার্ভার রেসপন্স হ্যান্ডলিং: readyState এবং status চেক করে রিকোয়েস্ট সম্পূর্ণ এবং সফল হয়েছে কিনা যাচাই করা।
  • JSON বা টেক্সট রেসপন্স প্রসেসিং: প্রাপ্ত ডেটা JSON হলে JSON.parse() ব্যবহার করে JavaScript অবজেক্টে কনভার্ট করা এবং তা প্রসেস করা।
  • HTML DOM আপডেট করা: প্রাপ্ত ডেটা ব্যবহার করে HTML DOM ম্যানিপুলেট করা এবং ইউজার ইন্টারফেস আপডেট করা।

এই ধাপগুলো অনুসরণ করে Ajax এর মাধ্যমে সার্ভার থেকে ডেটা ফেচ করে সেটিকে প্রসেস করা এবং UI আপডেট করা সম্ভব। এটি ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করে তোলে।

আরও দেখুন...

Server Response এবং Data Processing

or

Don't have an account? Register

Promotion