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 පිටුවේ ඇති බොත්තම මත ක්ලික් කිරීමෙන් ajax.html පිටුවේ අන්තර්ගතය div එකට පූරණය වන ලෙස කරමු.

මෙය සිදු කිරීම සඳහා, පළමුව අපගේ අංග වෙත යොමු ලබා ගනිමු විචල්ය:

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'); 
});

එහි ප්‍රති result ලයක් ලෙස fetch පොරොන්දුව ආපසු දෙනු ඇත. කාරණය නම්, AJAX හරහා පිටුවක් ඉල්ලීම - මෙය අසමකාලීන මෙහෙයුමකි, එය සිදුවනු ඇත පිටුව අපට ප්‍රතිචාර දක්වන කාලය.

අපි පොරොන්දුවේ ප්‍රති result ලය ලබා ගනිමු:

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 පන්තියේ සංකීර්ණ වස්තුව:

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); // පිටුවේ පාඨය
		}
	);
});

ඉතින්, අවසානයේ අපට ඉල්ලූ පිටුවේ පාඨය ලැබුණි පිටුව සහ අපට කළ හැකිය, උදාහරණයක් ලෙස, එය ලිවීම අපගේ div එකට:

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

බොත්තම් තුනක් සහ div එකක් ලබා දී ඇත. සේවාදායකයා මත ලබා දී ඇත පිටු තුන. එක් එක් බොත්තම් බලන්න div එකට අදාළ පිටුව පූරණය කරයි.

සේවාදායකයා මත පිටු පහක් ඇති බවට ඉඩ දෙන්න. බලන්න බොත්තම මත පළමු ක්ලික් කිරීම පළමු පිටුව පූරණය කරයි පිටුව, දෙවන ක්ලික් කිරීම - දෙවන, සහ එසේ පිටු අවසන් වන තෙක්.