AJAX ရှိ fetch နှင့် အလုပ်လုပ်ခြင်းအခြေခံများ

AJAX ကို အသုံးပြု၍ ဝဘ်စာမျက်နှာ၏ အစိတ်အပိုင်းတစ်ခုကို မည်သို့တင်ရမည်ကို ယခု ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့၏ စာမျက်နှာ index.html တွင် div တစ်ခုနှင့် ခလုတ်တစ်ခု တည်ရှိပါစေ (ဤနေရာတွင် body ၏ အကြောင်းအရာကို ပြသထားသည်)။

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

ကျွန်ုပ်တို့တွင် ajax.html စာမျက်နှာလည်း ရှိပါစေ၊ ၎င်းတွင် အတွဲသုံးခု တည်ရှိသည် (စာမျက်နှာ tag များမပါ၊ ရိုးရိုးအတွဲများသာ)။

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

�လုတ်ကို နှိပ်လိုက်သောအခါ index.html စာမျက်နှာရှိ div ထဲသို့ ajax.html စာမျက်နှာ၏ အကြောင်းအရာများ လာရောက်တင်သည်အထိ ပြုလုပ်ကြပါစို့။

ဤအတွက် အရင်ဆုံး ကျွန်ုပ်တို့၏ element များဆီသို့ လင့်ခ်များကို variable များထဲတွင် ရယူကြပါစို့။

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

ခလုတ်ပေါ်တွင် ကလစ်ဖြစ်ရပ်တစ်ခု ထည့်ကြပါစို့။

button.addEventListener('click', function() {
	// ဤနေရာတွင် AJAX တောင်းဆိုချက်ကို လုပ်ဆောင်ပါမည်
});

ယခု AJAX တောင်းဆိုချက်ကို လုပ်ဆောင်ကြပါစို့။ ဤအတွက် fetch function ကို အသုံးပြုပါသည်၊ ၎င်းသည် ကျွန်ုပ်တို့ရယူလိုသော အကြောင်းအရာရှိသည့် စာမျက်နှာ၏ လိပ်စာကို parameter အဖြစ် လက်ခံပါသည်။ ကျွန်ုပ်တို့၏ ဆာဗာပေါ်ရှိ ajax.html စာမျက်နှာ၏ လိပ်စာကို ထည့်သွင်းပါ။

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

fetch သည် ၎င်း၏ရလဒ်အဖြစ် promise ကို ပြန်ပေးပါလိမ့်မည်။ အကြောင်းမှာ AJAX မှတစ်ဆင့် စာမျက်နှာတောင်းဆိုခြင်းသည် asynchronous လုပ်ဆောင်ချက်တစ်ခု ဖြစ်သောကြောင့်ဖြစ်သည်၊ အဘယ့်ကြောင့်ဆိုသော် စာမျက်နှာက ကျွန်ုပ်တို့အာ�ု ပြန်ဖြေရန် အချိန်အနည်းငယ် ကြာမြင့်ပါလိမ့်မည်။

Promise ၏ရလဒ်ကို ရယူကြပါစို့။

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// ဆာဗာ၏အဖြေသည် response variable တွင် တည်ရှိသည်
	});
});

မလိုအပ်သော variable ကို ဖယ်ရှားခြင်းဖြင့် ရိုးရှင်းအောင်ပြုလုပ်ပါ။

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

မြှားပုံစံ function ကို အသုံးပြု၍ ရိုးရှင်းအောင်ပြုလုပ်ပါ။

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

ပိုမိုဖတ်ရလွယ်သော ပုံစံဖြင့် ကိုယ်စားပြုပါ။

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

Variable response ထဲတွင် Response class ရှိ object တစ်ခု လုံလောက်စွာ ရှုပ်ထွေးနေသည်။

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // Response class ၏ object
	});
});

ဤ object ကို နက်နက်နဲနဲ ကျွန်ုပ်တို့ လေ့လာပါမည်၊ ယခုအတွက် အရှင်းဆုံးကို ရယူရန် လိုအပ်သည် - တောင်းဆိုထားသော စာမျက်နှာ၏ စာသားကို ရယူပါ။ ဤအတွက် ဤ object ထဲတွင် text method တစ်ခု တည်ရှိသည်။ သို့သော် ဤ method သည် စာမျက်နှာ၏ စာသားကို ပြန်မပေးဘဲ၊ ၎င်း၏စာသားပါသော promise ကို ပြန်ပေးပါသည်။

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // Promise ကို ပြသပါလိမ့်မည်
		}
	);
});

စာမျက်နှာ၏ စာသားဆီသို့ ရောက်ရှိရန်၊ response.text မှ ရရှိသော promise ကို နောက်ထပ်တစ်ကြိမ် ကိုင်တွယ်ရန် လိုအပ်သည်။

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 ထဲသို့ သက်ဆိုင်ရာ စာမျက်နှာကို တင်ရန် ပြုလုပ်ပါ။

�ာဗာပေါ်တွင် စာမျက်နှာငါးခု ရှိပါစေ။ ခလုတ်ကို ပထမအကြိမ် နှိပ်ခြင်းသည် ပထမစာမျက်နှာကို တင်ပြီး၊ ဒုတိယအကြိမ် နှိပ်ခြင်းသည် ဒုတိယစာမျက်နှာကို တင်သည်အထိ၊ စာမျက်နှာများ ကုန်ဆုံးသည်အထိ ပြုလုပ်ပါ။