AJAX-এ fetch এর সাথে কাজ করার মূলসূত্র

এখন দেখা যাক, কিভাবে AJAX ব্যবহার করে পৃষ্ঠার একটি অংশ লোড করতে হয়। আমাদের পৃষ্ঠায় index.html একটি div এবং একটি বাটন থাকুক (এখানে body-এর বিষয়বস্তু দেখানো হয়েছে):

<div></div>
<button>click me</button>

আমাদের কাছে ajax.html নামেও একটি পৃষ্ঠা থাকুক, যেখানে তিনটি অনুচ্ছেদ রয়েছে (পৃষ্ঠার ট্যাগ ছাড়া, শুধুমাত্র অনুচ্ছেদ):

<p>1</p>
<p>2</p>
<p>3</p>

আসুন এমন করি যাতে index.html পৃষ্ঠার বাটনে ক্লিক করলে div-এর ভিতরে ajax.html পৃষ্ঠার বিষয়বস্তু লোড হয়।

এজন্য প্রথমে আমাদের উপাদানগুলির রেফারেন্স ভেরিয়েবলে পেতে হবে:

let div    = document.querySelector('div');
let button = document.querySelector('button');

আসুন বাটনে একটি ক্লিক হ্যান্ডলার সংযুক্ত করি:

button.addEventListener('click', function() {
	// এখানে AJAX রিকোয়েস্ট কার্যকর করা হবে
});

এখন AJAX রিকোয়েস্ট কার্যকর করা যাক। এর জন্য fetch ফাংশন ব্যবহার করা হয়, যা প্যারামিটার হিসাবে সেই পৃষ্ঠার ঠিকানা পায় যার বিষয়বস্তু আমরা পেতে চাই। আমাদের সার্ভারে ajax.html পৃষ্ঠার ঠিকানা নির্দেশ করি:

button.addEventListener('click', function() {
	let result = fetch('/ajax.html'); 
});

fetch তার ফলাফল হিসাবে একটি প্রমিস ফিরিয়ে দেবে। কারণ হলো, AJAX এর মাধ্যমে পৃষ্ঠা অনুরোধ করা একটি অ্যাসিঙ্ক্রোনাস অপারেশন, কারণ সার্ভার আমাদের উত্তর দেওয়ার আগে কিছু সময় কেটে যাবে।

আসুন প্রমিসের ফলাফল পাই:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// সার্ভারের উত্তর response ভেরিয়েবলে রয়েছে
	});
});

অন必要な変数を এড়িয়ে সরল করা যাক:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(function(response) {
		
	});
});

অ্যারো ফাংশন ব্যবহার করে সরল করা যাক:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		
	});
});

আরও পাঠযোগ্য আকারে উপস্থাপন করা যাক:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			
		}
	);
});

response ভেরিয়েবলে Response ক্লাসের একটি bastante জটিল অবজেক্ট রয়েছে:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // Response ক্লাসের অবজেক্ট
	});
});

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

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // Promise আউটপুট করবে
		}
	);
});

পৃষ্ঠার টেক্সটে পৌঁছানোর জন্য, response.text থেকে প্রাপ্ত প্রমিসটিকে আবারও প্রক্রিয়া করতে হবে:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // পৃষ্ঠার টেক্সট
		}
	);
});

সুতরাং, আমরা finalmente অনুরোধকৃত পৃষ্ঠার টেক্সট পেয়েছি এবং উদাহরণস্বরূপ, এটিকে আমাদের div-এ লিখতে পারি:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			div.innerHTML = text;
		}
	);
});

তিনটি বাটন এবং একটি div দেওয়া আছে। সার্ভারে তিনটি পৃষ্ঠা দেওয়া আছে। এমন করুন যাতে প্রতিটি বাটন div-এ সংশ্লিষ্ট পৃষ্ঠা লোড করে।

ধরুন সার্ভারে পাঁচটি পৃষ্ঠা আছে। ধরুন বাটনের প্রথম ক্লিকে প্রথম পৃষ্ঠা লোড হয়, দ্বিতীয় ক্লিকে দ্বিতীয় পৃষ্ঠা, এবং এইভাবে চলতে থাকে, যতক্ষণ না পৃষ্ঠাগুলি শেষ হয়।