Riot.js এ AJAX রিকোয়েস্ট করার জন্য আপনি সাধারণ JavaScript এর fetch API বা পুরোনো XMLHttpRequest ব্যবহার করতে পারেন। Riot.js 자체 কোনো AJAX লাইব্রেরি অন্তর্ভুক্ত করে না, তবে এটি JavaScript এর অন্যান্য টুলগুলোর সাথে একত্রে কাজ করতে পারে।
১. fetch API ব্যবহার করে AJAX রিকোয়েস্ট
fetch API হল একটি আধুনিক এবং সহজ পদ্ধতি HTTP রিকোয়েস্ট করার জন্য, এবং এটি সাধারণত পছন্দ করা হয় কারণ এটি প্রমিজ (Promise) ভিত্তিক এবং এর সিনট্যাক্স খুবই পরিষ্কার।
Example: Using fetch for AJAX Request in Riot.js
<!-- AjaxRequest.riot -->
<ajax-request>
<h2>Data from API</h2>
<button onclick={loadData}>Load Data</button>
<div if={loading}>Loading...</div>
<div if={error}>Error: {error}</div>
<ul if={data.length}>
<li each={item in data}>{item.name}</li>
</ul>
<script>
export default {
data: [],
loading: false,
error: '',
// ডাটা লোড করার ফাংশন
loadData() {
this.loading = true;
this.error = ''; // পূর্বের ত্রুটি মুছে ফেলুন
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json()) // JSON রেসপন্সে রূপান্তরিত করা
.then(json => {
this.data = json; // ডাটা কম্পোনেন্টের স্টেটে সেট করা
this.loading = false; // লোডিং স্টেট বন্ধ করা
})
.catch(err => {
this.error = 'Failed to load data'; // ত্রুটি মেসেজ সেট করা
this.loading = false;
});
}
}
</script>
</ajax-request>
এখানে:
loadData: এটিfetchএর মাধ্যমে API থেকে ডাটা নিয়ে আসে। রিকোয়েস্টের আগেloadingস্টেটtrueকরা হয় এবং ডাটা আসলেfalseকরা হয়।.then(response => response.json()): JSON রেসপন্সে রূপান্তরিত করা।.catch(err => {...}): কোনো ত্রুটি হলে, সেই ত্রুটির মেসেজটিerrorস্টেটে সংরক্ষণ করা হয়।<ul>: ডাটা লোড হয়ে গেলে,dataঅ্যারে থেকে আইটেমগুলো লিস্ট হিসেবে প্রদর্শন করা হয়।
২. XMLHttpRequest ব্যবহার করে AJAX রিকোয়েস্ট
যদিও fetch API আধুনিক এবং সহজ, তবে কিছু পুরোনো ব্রাউজারে XMLHttpRequest ব্যবহার করতে হতে পারে। এটি callback ভিত্তিক এবং কিছুটা পুরোনো পদ্ধতি।
Example: Using XMLHttpRequest for AJAX Request in Riot.js
<!-- AjaxRequestXMLHttpRequest.riot -->
<ajax-request>
<h2>Data from API</h2>
<button onclick={loadData}>Load Data</button>
<div if={loading}>Loading...</div>
<div if={error}>Error: {error}</div>
<ul if={data.length}>
<li each={item in data}>{item.name}</li>
</ul>
<script>
export default {
data: [],
loading: false,
error: '',
loadData() {
this.loading = true;
this.error = ''; // পূর্বের ত্রুটি মুছে ফেলুন
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পন্ন হয়েছে
if (xhr.status === 200) { // সফল রিকোয়েস্ট
this.data = JSON.parse(xhr.responseText); // JSON রেসপন্সে রূপান্তরিত করা
this.loading = false;
} else { // ত্রুটি
this.error = 'Failed to load data';
this.loading = false;
}
}
};
xhr.send();
}
}
</script>
</ajax-request>
এখানে:
XMLHttpRequest:GETরিকোয়েস্ট করার জন্য এটি ব্যবহার করা হচ্ছে।xhr.onreadystatechange: রিকোয়েস্টের স্টেট চেক করা হচ্ছে। যখন রিকোয়েস্ট সম্পন্ন হয় (readyState === 4), তখন রেসপন্সের স্ট্যাটাস চেক করেdataআপডেট করা হয়।
৩. AJAX রিকোয়েস্টে POST পদ্ধতি ব্যবহার
POST রিকোয়েস্টের জন্যও আপনি একইভাবে fetch API ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হয়েছে যেখানে একটি ফর্মের মাধ্যমে ডাটা API-তে পাঠানো হচ্ছে।
Example: Sending Data with POST using fetch
<!-- PostData.riot -->
<post-data>
<h2>Submit Data</h2>
<form onsubmit={submitForm}>
<div>
<label for="name">Name:</label>
<input type="text" id="name" ref={nameInput} />
</div>
<button type="submit">Submit</button>
</form>
<div if={loading}>Submitting...</div>
<div if={error}>Error: {error}</div>
<div if={message}>Message: {message}</div>
<script>
export default {
name: '',
loading: false,
error: '',
message: '',
submitForm(e) {
e.preventDefault(); // ফর্মের ডিফল্ট সাবমিট প্রক্রিয়া বন্ধ
const name = this.refs.nameInput.value;
if (!name) {
this.error = 'Name is required!';
return;
}
this.loading = true;
this.error = '';
const data = { name: name };
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
})
.then(response => response.json())
.then(json => {
this.message = 'Data submitted successfully!';
this.loading = false;
})
.catch(err => {
this.error = 'Failed to submit data';
this.loading = false;
});
}
}
</script>
</post-data>
এখানে:
fetchPOST রিকোয়েস্ট:POSTরিকোয়েস্টে ডাটা পাঠানোর জন্যmethod: 'POST'এবংbody: JSON.stringify(data)ব্যবহার করা হয়েছে।- ফর্ম সাবমিট করা: ফর্মের ইনপুট থেকে ডাটা নিয়ে সেটি API-তে পাঠানো হচ্ছে এবং রেসপন্স অনুযায়ী স্টেট আপডেট হচ্ছে।
৪. Axios ব্যবহার করা (ঐচ্ছিক)
আপনি চাইলে Axios লাইব্রেরি ব্যবহার করতে পারেন, যা fetch API এর চেয়ে আরো সহজ এবং বহুমুখী। Axios ব্যবহার করলে আপনি আরও সহজভাবে HTTP রিকোয়েস্ট ম্যানেজ করতে পারবেন।
Example: Using Axios for AJAX Request
<!-- AxiosRequest.riot -->
<axios-request>
<h2>Data from API with Axios</h2>
<button onclick={loadData}>Load Data</button>
<div if={loading}>Loading...</div>
<div if={error}>Error: {error}</div>
<ul if={data.length}>
<li each={item in data}>{item.name}</li>
</ul>
<script>
import axios from 'axios';
export default {
data: [],
loading: false,
error: '',
loadData() {
this.loading = true;
this.error = ''; // পূর্বের ত্রুটি মুছে ফেলুন
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
this.data = response.data; // ডাটা কম্পোনেন্টের স্টেটে সেট করা
this.loading = false; // লোডিং স্টেট বন্ধ করা
})
.catch(err => {
this.error = 'Failed to load data'; // ত্রুটি মেসেজ
this.loading = false;
});
}
}
</script>
</axios-request>
এখানে, Axios দিয়ে API রিকোয়েস্ট করা হয়েছে এবং রেসপন্স পাওয়ার পর UI আপডেট করা হয়েছে।
সারাংশ
Riot.js তে AJAX রিকোয়েস্ট করার জন্য আপনি সহজভাবে JavaScript এর fetch API, XMLHttpRequest, অথবা Axios ব্যবহার করতে পারেন। এইভাবে, আপনি সহজেই API রিকোয়েস্ট করতে পারেন, ডাটা লোড বা পাঠাতে পারেন এবং UI রিফ্রেশ করতে পারেন।
Read more
