জাভাস্ক্রিপ্টে ফেচ/এক্সএমএলএইচটিটিপি রিকোয়েস্ট
এই প্রবন্ধটি জাভাস্ক্রিপ্টে ফেচ/এক্সএমএলএইচটিটিপি রিকোয়েস্ট ব্যাখ্যা করে।
YouTube Video
javascript-html-fetch-xhr.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 1em;
14 padding-bottom: 10em;
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background-color: #f7f9fc;
17 color: #333;
18 line-height: 1.6;
19 }
20
21 .container {
22 max-width: 800px;
23 margin: 0 auto;
24 padding: 1em;
25 background-color: #ffffff;
26 border: 1px solid #ccc;
27 border-radius: 10px;
28 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
29 }
30
31 .container-flex {
32 display: flex;
33 flex-wrap: wrap;
34 gap: 2em;
35 max-width: 1000px;
36 margin: 0 auto;
37 padding: 1em;
38 background-color: #ffffff;
39 border: 1px solid #ccc;
40 border-radius: 10px;
41 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
42 }
43
44 .left-column, .right-column {
45 flex: 1 1 200px;
46 min-width: 200px;
47 }
48
49 h1, h2 {
50 font-size: 1.2rem;
51 color: #007bff;
52 margin-top: 0.5em;
53 margin-bottom: 0.5em;
54 border-left: 5px solid #007bff;
55 padding-left: 0.6em;
56 background-color: #e9f2ff;
57 }
58
59 button {
60 display: block;
61 margin: 1em auto;
62 padding: 0.75em 1.5em;
63 font-size: 1rem;
64 background-color: #007bff;
65 color: white;
66 border: none;
67 border-radius: 6px;
68 cursor: pointer;
69 transition: background-color 0.3s ease;
70 }
71
72 button:hover {
73 background-color: #0056b3;
74 }
75
76 #output {
77 margin-top: 1em;
78 background-color: #1e1e1e;
79 color: #0f0;
80 padding: 1em;
81 border-radius: 8px;
82 min-height: 200px;
83 font-family: Consolas, monospace;
84 font-size: 0.95rem;
85 overflow-y: auto;
86 white-space: pre-wrap;
87 }
88
89 .highlight {
90 outline: 3px solid #ffc107; /* yellow border */
91 background-color: #fff8e1; /* soft yellow background */
92 transition: background-color 0.3s ease, outline 0.3s ease;
93 }
94
95 .active {
96 background-color: #28a745; /* green background */
97 color: #fff;
98 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
99 transition: background-color 0.3s ease, box-shadow 0.3s ease;
100 }
101 </style>
102</head>
103<body>
104 <div class="container">
105 <h1>JavaScript Console</h1>
106 <button id="executeBtn">Execute</button>
107 <div id="output"></div>
108 </div>
109
110 <script>
111 // Override console.log to display messages in the #output element
112 (function () {
113 // Override console.log
114 const originalLog = console.log;
115 console.log = function (...args) {
116 originalLog.apply(console, args);
117 const message = document.createElement('div');
118 message.textContent = args.map(String).join(' ');
119 output.appendChild(message);
120 };
121
122 // Override console.error
123 const originalError = console.error;
124 console.error = function (...args) {
125 originalError.apply(console, args);
126 const message = document.createElement('div');
127 message.textContent = args.map(String).join(' ');
128 message.style.color = 'red'; // Color error messages red
129 output.appendChild(message);
130 };
131 })();
132
133 document.getElementById('executeBtn').addEventListener('click', () => {
134 // Prevent multiple loads
135 if (document.getElementById('externalScript')) return;
136
137 const script = document.createElement('script');
138 script.src = 'javascript-html-fetch-xhr.js';
139 script.id = 'externalScript';
140 //script.onload = () => console.log('javascript-html-fetch-xhr.js loaded and executed.');
141 //script.onerror = () => console.log('Failed to load javascript-html-fetch-xhr.js.');
142 document.body.appendChild(script);
143 });
144 </script>
145</body>
146</html>জাভাস্ক্রিপ্টে ফেচ/এক্সএমএলএইচটিটিপি রিকোয়েস্ট
জাভাস্ক্রিপ্টে ফেচ এবং এক্সএমএলএইচটিটিপি রিকোয়েস্ট (XHR) উভয়ই HTTP রিকোয়েস্ট পাঠানো এবং সার্ভার থেকে ডেটা সংগ্রহের জন্য ব্যবহৃত হয়।
Fetch API
ফেচ API হলো HTTP রিকোয়েস্ট পরিচালনার একটি আধুনিক পদ্ধতি, যা XHR-এর উত্তরসূরি হিসেবে ডিজাইন করা হয়েছে। এটি প্রমিসের উপর ভিত্তি করে একটি অ্যাসিঙ্ক্রোনাস API, যা সহজ এবং আরও নমনীয় রিকোয়েস্ট পরিচালনা সম্ভব করে তোলে।
ব্যবহার
1fetch('http://127.0.0.1:3000/example.json')
2 .then((response) => {
3 if (!response.ok) {
4 throw new Error('HTTP error: ' + response.status);
5 }
6 return response.json(); // Parse the response as JSON
7 })
8 .then((data) => {
9 console.log(data); // Use the fetched data
10 console.log(JSON.stringify(data));
11 })
12 .catch((error) => {
13 console.error('An error occurred:', error); // Error handling
14 });Fetch APIব্যবহার করে এই কোডটি নির্দিষ্ট URL-এ GET অনুরোধ পাঠায়, প্রতিক্রিয়াটি JSON হিসেবে প্রক্রিয়া করে এবং ফলাফল প্রদর্শন করে অথবা কোনো ত্রুটি দেখায়।
বৈশিষ্ট্যসমূহ
Fetch API-এর নিম্নলিখিত বৈশিষ্ট্য রয়েছে:।
- প্রমিজ-ভিত্তিক প্রমিজ ব্যবহার করে এসিনক্রোনাস অপারেশনগুলি পরিচালনা করা যায়, যা কোডকে আরও পরিষ্কার এবং সহজপাঠ্য করে তোলে।
- সহজে ত্রুটি ব্যবস্থাপনা
catchব্লক ব্যবহার করে সহজেই ত্রুটি হ্যান্ডেল করা যায়। response.json()-এর মতো মেথড দিয়ে পার্সিং** প্রতিক্রিয়া ডেটা সহজেই JSON অথবা টেক্সট ফর্ম্যাটে প্রক্রিয়া করা যায়।- CORS সুবিধা
Fetchক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) নিয়মের ভিত্তিতে কাজ করে। - নমনীয় অনুরোধ কনফিগারেশন শুধুমাত্র GET/POST নয়, এছাড়াও PUT ও DELETE-এর মতো HTTP মেথডও সহজেই কনফিগার করা যায়।
উদাহরণ: POST রিকোয়েস্ট
1fetch('http://127.0.0.1:3000/example.json', {
2 method: 'POST',
3 headers: {
4 'Content-Type': 'application/json'
5 },
6 body: JSON.stringify({ name: 'Alice', age: 25 }) // Send the request body as JSON
7 })
8 .then(response => response.json())
9 .then(data => console.log(JSON.stringify(data)))
10 .catch(error => console.error('Error:', error));- এই কোডটি JSON ডেটা সহ একটি POST অনুরোধ পাঠায় এবং সার্ভার থেকে JSON প্রতিক্রিয়া গ্রহণ করে ও প্রদর্শন করে।
অসুবিধাসমূহ
Fetch API-এর কিছু অসুবিধাও আছে:।
- ব্রাউজার সামঞ্জস্যতা
পুরানো ব্রাউজারগুলি (বিশেষ করে IE11)
Fetch APIসমর্থন করে না। - সূক্ষ্ম নিয়ন্ত্রণ করা কঠিন XHR-এর তুলনায়, এটি প্রগ্রেস ইভেন্টের মতো নিম্ন-স্তরের নিয়ন্ত্রণের জন্য উপযুক্ত নয়।
XMLHttpRequest（XHR）
XMLHttpRequest একটি API, যা দীর্ঘদিন ধরে HTTP রিকোয়েস্ট পরিচালনার জন্য ব্যবহৃত হয়ে আসছে এবং AJAX (অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট ও এক্সএমএল)-এর ভিত্তি হিসেবে ব্যাপকভাবে ব্যবহৃত হয়েছে। এটি অ্যাসিঙ্ক্রোনাস যোগাযোগ সক্ষম করে, যা পুরো পেজটি রিলোড না করেই সার্ভার থেকে ডেটা সংগ্রহ করতে দেয়।
ব্যবহার
1const xhr = new XMLHttpRequest();
2xhr.open('GET', 'http://127.0.0.1:3000/example.json', true);
3xhr.onreadystatechange = function() {
4 if (xhr.readyState === 4 && xhr.status === 200) {
5 const data = JSON.parse(xhr.responseText); // Parse the response as JSON
6 console.log(data); // Use the data
7 console.log(JSON.stringify(data));
8 }
9};
10xhr.send(); // Send the request
XMLHttpRequestব্যবহার করে এই কোডটি GET অনুরোধ পাঠায়, পাওয়া JSON প্রতিক্রিয়া পার্স করে এবং তা প্রদর্শন করে।
বৈশিষ্ট্যসমূহ
XMLHttpRequest-এর নিম্নলিখিত বৈশিষ্ট্য আছে:।
- কলব্যাক-ভিত্তিক
onreadystatechange-এর মতো কলব্যাক ফাংশন অনুরোধের সম্পূর্ণতা বা অগ্রগতি পর্যবেক্ষণ করতে ব্যবহৃত হয়। - স্টেটাস কোড এবং রেডি স্টেট পর্যবেক্ষণ
xhr.readyStateএবংxhr.statusব্যবহার করে অনুরোধের অবস্থা পরীক্ষা করা যায়। - বিস্তৃত কম্প্যাটিবিলিটি এটি পুরানো ব্রাউজারেও কাজ করে।
- অনুরোধের অগ্রগতি পর্যবেক্ষণ
xhr.upload.onprogress-এর মতো ইভেন্ট ব্যবহার করে অগ্রগতি দেখা যায়।
উদাহরণ: POST রিকোয়েস্ট
1const xhr = new XMLHttpRequest();
2xhr.open('POST', 'http://127.0.0.1:3000/example.json', true);
3xhr.setRequestHeader('Content-Type', 'application/json');
4xhr.onreadystatechange = function() {
5 if (xhr.readyState === 4 && xhr.status === 200) {
6 const data = JSON.parse(xhr.responseText);
7 console.log(data);
8 console.log(JSON.stringify(data));
9 }
10};
11xhr.send(JSON.stringify({ name: 'Alice', age: 25 })); // Send the data
XMLHttpRequestব্যবহার করে এই কোডটি JSON ডেটাসহ POST অনুরোধ পাঠায়, প্রতিক্রিয়া গ্রহণ করে এবং তা প্রদর্শন করে।
অসুবিধাসমূহ
XMLHttpRequest-এর কয়েকটি অসুবিধাও রয়েছে:।
- কোড জটিলতা কলব্যাক ফাংশন দিয়ে এসিনক্রোনাস প্রসেস পরিচালনা করা কিছুটা জটিল হয়ে যায়।
- ন্যাটিভ প্রমিজ সাপোর্ট নেই ডিফল্টভাবে Promises সাপোর্ট না করার কারণে, এসিনক্রোনাস প্রসেসিং কিছুটা জটিল ও দীর্ঘ হয়ে যায়।
Fetch API এবং XMLHttpRequest এর মধ্যে তুলনা।
| বৈশিষ্ট্যসমূহ | Fetch API |
XMLHttpRequest (XHR) |
|---|---|---|
| অ্যাসিঙ্ক্রোনাস প্রসেসিং | প্রমিস দিয়ে সহজ | কলব্যাক ফাংশনের প্রয়োজন। |
| ত্রুটি পরিচালনা | .catch() দিয়ে পরিচালনাযোগ্য |
readyState স্ট্যাটাস পরীক্ষা করুন। |
| অগ্রগতির ইভেন্ট | সমর্থিত নয় | onprogress এর মাধ্যমে পরিচালিত। |
| ক্রস-অরিজিন সাপোর্ট | CORS স্বয়ংক্রিয়ভাবে সমর্থন করে | CORS সমর্থন করে। |
| ব্রাউজার সমর্থন | IE11 এবং পুরনো সংস্করণে সমর্থিত নয় | পুরানো ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ। |
| নিয়ন্ত্রণের সূক্ষ্মতা | সহজ এবং স্বজ্ঞাত | সূক্ষ্ম নিয়ন্ত্রণের অনুমতি দেয়। |
সারসংক্ষেপ
- Fetch API প্রমিসের উপর ভিত্তি করে সহজ এবং নমনীয় HTTP অনুরোধ প্রদান করে এবং আধুনিক ব্রাউজারে এটি সুপারিশ করা হয়।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।