JSONP এর মাধ্যমে Ajax Request তৈরি

Web Development - অ্যাজাক্স (Ajax) - Ajax এবং JSONP (Ajax এবং JSONP এর মাধ্যমে Cross-Domain Request) |

JSONP ব্যবহার করে Ajax Request তৈরি করা একটি কার্যকর পদ্ধতি, যা Cross-Domain Request এর সমস্যা সমাধান করে। JSONP মূলত একটি GET রিকোয়েস্ট ব্যবহার করে ডেটা রিকোয়েস্ট করে এবং তা callback function এর মাধ্যমে প্রসেস করে। JSONP এর মাধ্যমে Ajax রিকোয়েস্ট তৈরি করতে হলে একটি <script> ট্যাগ তৈরি করতে হয় এবং সেটি ডকুমেন্টে অ্যাড করা হয়। এরপর সার্ভার JSON ডেটা রেসপন্স হিসেবে ফেরত পাঠায়, যা জাভাস্ক্রিপ্ট ফাংশনের মাধ্যমে প্রসেস হয়।

JSONP এর মাধ্যমে Ajax Request তৈরি করার উদাহরণ

নিচে একটি উদাহরণ দেওয়া হলো যেখানে JSONP ব্যবহার করে একটি Ajax রিকোয়েস্ট তৈরি করা হয়েছে এবং সেই ডেটা প্রসেস করা হয়েছে।

উদাহরণ: JSONP এর মাধ্যমে Ajax Request (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP Ajax Request Example</title>
</head>
<body>
    <h1>JSONP Example</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- JSONP ডেটা এখানে দেখানো হবে -->
    </div>

    <script>
        // Callback function যা JSONP রেসপন্স হ্যান্ডল করবে
        function handleResponse(data) {
            var container = document.getElementById('data-container');
            container.innerHTML = 'Name: ' + data.name + ', Age: ' + data.age;
        }

        // JSONP রিকোয়েস্ট পাঠানোর ফাংশন
        function fetchData() {
            // <script> ট্যাগ তৈরি করা
            var script = document.createElement('script');

            // JSONP রিকোয়েস্ট URL সেট করা
            // এখানে callback=handleResponse ব্যবহার করা হয়েছে
            script.src = 'https://example.com/api?callback=handleResponse';

            // ডকুমেন্টে <script> ট্যাগ অ্যাড করা
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

উদাহরণের বিশ্লেষণ

১. Callback Function:

handleResponse ফাংশনটি সার্ভার থেকে JSONP রেসপন্স পাওয়ার পরে এক্সিকিউট হয়।
এই ফাংশনটি ডেটা প্রসেস করে এবং HTML এ রেন্ডার করে।

২. Script Tag Creation:

fetchData() ফাংশনটি একটি <script> ট্যাগ তৈরি করে এবং সেটি ডকুমেন্টে অ্যাড করে।
script.src এ JSONP রিকোয়েস্টের URL সেট করা হয়েছে, যেখানে callback প্যারামিটার হিসেবে handleResponse পাস করা হয়েছে।

৩. Server Response:

সার্ভার থেকে JSONP রেসপন্স সরাসরি জাভাস্ক্রিপ্ট ফাংশন কল করে এমনভাবে আসে, যেমন:

handleResponse({
   "name": "John Doe",
   "age": 30
});

এই রেসপন্স handleResponse ফাংশনকে কল করে এবং ডেটা প্রসেস করে।

সার্ভার সাইড JSONP রেসপন্স

সার্ভার সাইডে JSONP রেসপন্স তৈরি করতে, সার্ভারকে callback প্যারামিটার অনুযায়ী রেসপন্স দিতে হবে। উদাহরণস্বরূপ, যদি callback হিসেবে handleResponse পাঠানো হয়, তাহলে সার্ভার থেকে রেসপন্সটি হতে পারে:

<?php
// প্যারামিটার সংগ্রহ করা
$callback = $_GET['callback'];

// JSON ডেটা তৈরি করা
$data = array(
    "name" => "John Doe",
    "age" => 30
);

// JSONP রেসপন্স তৈরি করা
header('Content-Type: application/javascript');
echo $callback . '(' . json_encode($data) . ');';
?>

ব্যাখ্যা:

সার্ভার থেকে প্যারামিটার (callback) সংগ্রহ করা হয়েছে।
JSON ডেটা তৈরি করা হয়েছে এবং json_encode() ফাংশন ব্যবহার করে JSON ফরম্যাটে কনভার্ট করা হয়েছে।
JSONP রেসপন্সে callback ফাংশন (handleResponse) কল করা হয়েছে এবং JSON ডেটা তার প্যারামিটার হিসেবে পাঠানো হয়েছে।

JSONP এর মাধ্যমে Ajax Request এর সুবিধা

Cross-Domain Request সমাধান:
- JSONP ব্যবহার করে Cross-Domain Request করা যায়, যা সাধারণ Ajax রিকোয়েস্টে Same-Origin Policy এর কারণে সম্ভব নয়।
সহজ Implementation:
- JSONP রিকোয়েস্ট তৈরি করতে শুধু একটি <script> ট্যাগ এবং একটি callback function প্রয়োজন, যা সহজ এবং কার্যকর পদ্ধতি।
Immediate Execution:
- JSONP এর মাধ্যমে রেসপন্স সরাসরি ক্লায়েন্ট সাইডে এক্সিকিউট হয়, যা দ্রুত ডেটা প্রসেস করতে সাহায্য করে।

JSONP এখনও অনেক ক্ষেত্রে ব্যবহার করা হয়, তবে নিরাপত্তা এবং ফ্লেক্সিবিলিটির জন্য আধুনিক অ্যাপ্লিকেশনগুলোতে CORS (Cross-Origin Resource Sharing) বেশি ব্যবহৃত হয়। CORS Ajax রিকোয়েস্টের জন্য আরও বেশি নিরাপত্তা এবং নিয়ন্ত্রণ প্রদান করে।

Mark as Completed

Content added By

Md. Nasir Uddin (Raju)

JSONP এর মাধ্যমে Ajax Request তৈরি

JSONP এর মাধ্যমে Ajax Request তৈরি