JavaScript Bangla Tutorial-82 : Calling Api From Javascript | Xmlhttprequest

JavaScript Bangla Tutorial-82 : Calling Api From Javascript | Xmlhttprequest

এই জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল-82 তে আমরা এপি এবং এক্সএমএলএচটিপিওর জগতে প্রবেশ করছি। এপি, অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস, বিভিন্ন সফ্টওয়্যার অ্যাপ্লিকেশনগুলির মধ্যে যেতে সাহায্য করে। ওয়েব উন্নতির সাহায্যে, এপিগুলি সাধারণভাবে একটি পরিষ্কৃত উপাদান থেকে ডেটা অনুমোদন এবং একটি ওয়েবপৃষ্ঠার বাস্তবায়নের উপায় সরবরাহ করতে ব্যবহৃত হয় যাতে পুরোটা পৃষ্ঠা রিফ্রেশ করতে হয় না। এই প্রক্রিয়াটির মধ্যে XMLHttpRequest একটি গুরুত্বপূর্ণ প্রযুক্তি, যেটি জাভাস্ক্রিপ্ট থেকে এইচটিটিপিও অনুরোধ করার উপায় সরবরাহ করে। এই টিউটোরিয়াল শেষ হওয়ার পরে, আপনি XMLHttpRequest ব্যবহার করে এপি আহ্বান করার পদ্ধতিতে সুস্থ ধারণা অর্জন করতে পারবেন এবং আপনার ওয়েব প্রকল্পের ইন্টারয়াক্টিভিটি বৃদ্ধি দেওয়ার দিকে একদম নিশ্চিত হবেন।

জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল-82 : জাভাস্ক্রিপ্ট থেকে এপি আহ্বান করা | এক্সএমএলএচটিপিও

এপি গুলি ওয়েব অ্যাপ্লিকেশনগুলির বাইরের ডেটা সোর্স থেকে তথ্য প্রাপ্ত করতে এক নতুন দিক দেয়। আপনি আপডেট করতে পারেন সময়ের আবশ্যকতা ছাড়াই ওয়েবপেজের সামগ্রিক বিষয়বস্তু। এই অবস্থানে, আমরা এক্সএমএলএচটিপিও ব্যবহার করে এপি আহ্বান করতে এইচটিটিপিওর উপর নির্ভর করছি।

প্রাক্তন

এপি আহ্বান করার আগে, আমরা নিম্নলিখিত ধারণাগুলির একটি মৌলিক ধারণা থাকার নিশ্চিত হওয়ার জন্য নিশ্চিত করি:

• জাভাস্ক্রিপ্ট মৌলিক
• অসময় প্রোগ্রামিং
• এইচটিপি প্রোটোকল

ধাপ 1: একটি এক্সএমএলএচটিপিও অবজেক্ট তৈরি করা

এপি অনুরোধ করতে, আমাদের প্রথমে একটি XMLHttpRequest অবজেক্টের একটি ইনস্ট্যান্স তৈরি করতে হয়। এই অবজেক্টটি আমাদেরকে বিনা সামগ্রিক ওয়েবপেজটি রিফ্রেশ করাই সম্ভব HTTP অনুরোধ প্রেরণ এবং প্রতিক্রিয়া প্রাপ্ত করতে ব্যবহার করে।

let xhr = new XMLHttpRequest();

ধাপ 2: একটি GET অনুরোধ তৈরি করা

সর্বাধিক এপি আহ্বান করার মাধ্যমে একটি GET অনুরোধ প্রেরণ করার সময় URL একটি বিশিষ্ট URL-এ এবং প্রতিক্রিয়া প্রাপ্তির জন্য তথ্য প্রেরণ করা প্রয়োজন। চলুন দেখা যাক কীভাবে আমরা XMLHttpRequest ব্যবহার করে একটি সাধারণ GET অনুরোধ তৈরি করতে পারি।

xhr.open("GET", "https://api.example.com/data", true);
xhr.send();

এই উদাহরণে, আমরা "https://api.example.com/data" একটি GET অনুরোধ প্রেরণ করছি। open মেথডটি অনুরোধ শুরু করে এবং send মেথডটি অনুরোধটি সার্ভারে প্রেরণ করে।

ধাপ 3: প্রতিক্রিয়া প্রস্তুত করা

একবার অনুরোধটি প্রেরণ হয়ে গেছে, আমরা সার্ভার থেকে প্রতিক্রিয়া প্রস্তুত করতে হবে। এটি আমরা load ইভেন্টের জন্য একটি ইভেন্ট শ্রোতা নির্ধারণ করে প্রয়োগ করি।

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        let response = JSON.parse(xhr.responseText);
        // প্রতিক্রিয়া ডেটা প্রক্রিয়া করুন
    } else {
        console.error("অনুরোধ ব্যর্থ হয়েছে স্থিতি:", xhr.status);
    }
};

ধাপ 4: ত্রুটি প্রস্তুতি

সুন্দরভাবে ত্রুটি সম্মতিযুক্ত করা গুরুত্বপূর্ণ। আমরা যেসব নেটওয়ার্ক-সংক্রান্ত সমস্যা ধরতে পারি, এটা সেট করতে error ইভেন্টের জন্য একটি ইভেন্ট শ্রোতা প্রয়োগ করি।

xhr.onerror = function() {
    console.error("অনুরোধ ব্যর্থ হয়েছে");
};

ধাপ 5: ডেটা প্রেরণ (POST অনুরোধ)

এপি গুলি অপসারণ বা আপডেট সম্পর্কিত ক্রিয়ার জন্য ডেটা প্রেরণ আবশ্যক হতে পারে। এটি একটি POST অনুরোধ ব্যবহার করে সম্পাদন বা আপডেট করার জন্য প্রয়োজন।

let requestData = {
    name: "John Doe",
    email: "john@example.com"
};

xhr.open("POST", "https://api.example.com/users", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(requestData));

ধাপ 6: কুয়েরি প্যারামিটার যোগ করা

অনেক এপি প্রতিক্রিয়া স্বপ্রসারণের জন্য কুয়েরি প্যারামিটারগুলি গ্রহণ করে। আমরা এই প্যারামিটারগুলি URL এ যোগ করতে পারি।

let params = "id=123&category=books";

xhr.open("GET", "https://api.example.com/products?" + params, true);
xhr.send();

ধাপ 7: অসময়ী অনুরোধ প্রস্তুতি

অসময়ী অনুরোধগুলি প্রধান থ্রেড ব্লক করতে না, এটি উপর প্রতিক্রিয়া অপেক্ষা করতে সক্ষম হয় যাতে প্রতিক্রিয়া প্রাপ্তির অপেক্ষা করা যায়। এটি একটি মস্ত ব্যবহারকারী অভিজ্ঞতা বজায় রাখার জন্য গুরুত্বপূর্ণ।

Frequently Asked Questions (FAQs)

কি আমি XMLHttpRequest এর বদলে ফেচ ব্যবহার করতে পারি?

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

XMLHttpRequest কি একই মতামত নীতিতে সীমাবদ্ধ?

ডিফল্টভাবে, XMLHttpRequest একই মতামত নীতি মেনে চলে, তবে আপনি সিন্ডিকেট অনুরোধ ব্যবহার করে দ্বিতীয় উপাদান প্রেরণের জন্য CORS শিরোনামগুলি সক্ষম করতে পারেন।

XMLHttpRequest দ্বারা সময়সীমিত অনুরোধ সম্ভব?

হ্যা, কিন্তু এটি সুপরিচিত নয়, কারণ সময়সীমিত অনুরোধ অনুরোধ সম্পূর্ণ হওয়া পর্যন্ত ব্যবহারকারী ইন্টারফেস জমে থাকতে পারে।

ডেটা ফরম্যাট হিসেবে JSON এর বিকল্প কি?

XML একটি বিকল্প ডেটা ফরম্যাট, কিন্তু JSON সরলতা এবং জাভাস্ক্রিপ্ট সাথে সামঞ্জস্যপূর্ণতা সহ আপনার প্রয়োজনীয় তথ্য সরবরাহ করতে বেশি ব্যবহৃত হয়।

কীভাবে আমি বিভিন্ন প্রতিক্রিয়া ফরম্যাট প্রস্তুত করতে পারি?

আপনি প্রয়োজনীয় প্রতিক্রিয়া ফরম্যাটটি নির্দিষ্ট করতে অনুরোধে আপনার আবেগটি সেট করার জন্য Accept হেডার সেট করতে পারেন, যেমন JSON বা XML।

XMLHttpRequest ব্যবহার করার সময় কোনও নিরাপত্তা বিবেচনাগুলি কি?

যদি ব্যবহারকারী দেওয়া ডেটা প্রয়োজনীয়ভাবে পরিশোধ করার আগে তা সঠিকভাবে স্যানাইজ না করা হয় তাহলে সময়ে দ্বারা দেয়া হতে পারে।

সমাপ্তি:

এই জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল-82 এ, আমরা XMLHttpRequest ব্যবহার করে জাভাস্ক্রিপ্ট থেকে এপি আহ্বান করার উপায় সম্পর্কে বিস্তৃত ধারণা পেয়েছি। এই প্রযুক্তি সাহায্যে, আপনি ওয়েব প্রকল্পে ইন্টারয়াক্টিভিটি বৃদ্ধি দেওয়ার সুযোগ পেয়েছেন। আমাদের নেতিবাচক নির্দেশিকা মধ্যে এই টিউটোরিয়াল মাধ্যমে আপনি এখন স্বতস্বত এপি আহ্বান করতে প্রস্তুত হয়ে গেছেন।