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

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

public/index.html<div></div>
<button>click me</button>

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

public/ajax.html<p>1</p>
<p>2</p>
<p>3</p>

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

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

public/client.jslet div    = document.querySelector('div');
let button = document.querySelector('button');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      console.log(text); // စာမျက်နှာ၏ စာသား
    }
  );
});

ထို့ကြောင့်၊ ကျွန်ုပ်တို့သည် နောက်ဆုံးတွင် တောင်းဆိုထားသော စာမျက်နှာ၏ စာသားကို ရရှိပြီး၊ ဥပမာအားဖြင့် ၎င်းကို ကျွန်ုပ်တို့၏ div ထဲသို့ ရေးသားနိုင်ပါသည်။

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