AJAX နိဒါန်း
သင်လုပ်နိုင်သောကြောင့် AJAX သည် developer ၏အိပ်မက်ဖြစ်သည်၊
- စာမျက်နှာကို တင်ပြီးနောက် ဝဘ်ဆာဗာမှ ဒေတာကို ဖတ်ပါ။
- စာမျက်နှာကို ပြန်မတင်ဘဲ ဝဘ်စာမျက်နှာကို အပ်ဒိတ်လုပ်ပါ။
- ဒေတာကို နောက်ခံတွင် ဝဘ်ဆာဗာသို့ ပို့ပါ။
AJAX ဥပမာ
Let AJAX change this text
AJAX နမူနာ ရှင်းပြထားသည်။
HTML စာမျက်နှာ
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
HTML စာမျက်နှာတွင် <div> ကဏ္ဍနှင့် <button> ပါရှိသည်။
<div> အပိုင်းကို ဆာဗာတစ်ခုမှ အချက်အလက်ပြသရန် အသုံးပြုသည်။
<button> သည် function တစ်ခုကို ခေါ်သည် (ကလစ်နှိပ်လျှင်)။
လုပ်ဆောင်ချက်သည် ဝဘ်ဆာဗာတစ်ခုမှ အချက်အလက်ကို တောင်းဆိုပြီး ၎င်းကို ပြသသည်-
လုပ်ဆောင်ချက် loadDoc()
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
AJAX ဆိုတာဘာလဲ။
AJAX = တစ်ပြိုင်နက်တည်း J avaScript A နှင့် X ML ။
AJAX သည် ပရိုဂရမ်းမင်းဘာသာစကားမဟုတ်ပါ။
AJAX သည် ပေါင်းစပ်မှုကိုသာ အသုံးပြုသည်-
- ဘရောက်ဆာတွင် ပါ၀င်သော
XMLHttpRequest
အရာတစ်ခု (ဝဘ်ဆာဗာတစ်ခုမှ ဒေတာတောင်းခံရန်) - JavaScript နှင့် HTML DOM (ဒေတာကိုပြသရန် သို့မဟုတ် အသုံးပြုရန်)
AJAX သည် လွဲမှားသောအမည်တစ်ခုဖြစ်သည်။ AJAX အပလီကေးရှင်းများသည် ဒေတာပို့ဆောင်ရန် XML ကို အသုံးပြုသော်လည်း ဒေတာကို ရိုးရိုးစာသား သို့မဟုတ် JSON စာသားအဖြစ် ပို့ဆောင်ရာတွင် တူညီပါသည်။
AJAX သည် မြင်ကွင်းနောက်ကွယ်ရှိ ဝဘ်ဆာဗာတစ်ခုနှင့် ဒေတာဖလှယ်ခြင်းဖြင့် ဝဘ်စာမျက်နှာများကို တပြိုင်နက် အပ်ဒိတ်လုပ်ခွင့်ပြုသည်။ ဆိုလိုသည်မှာ စာမျက်နှာတစ်ခုလုံးကို ပြန်မတင်ဘဲ ဝဘ်စာမျက်နှာ၏ အစိတ်အပိုင်းများကို အပ်ဒိတ်လုပ်ရန် ဖြစ်နိုင်သည်။
AJAX ဘယ်လိုအလုပ်လုပ်လဲ။
- 1. ဝဘ်စာမျက်နှာတစ်ခုတွင် ဖြစ်ရပ်တစ်ခု ဖြစ်ပေါ်သည် (စာမျက်နှာကို တင်ထားပြီး၊ ခလုတ်တစ်ခုကို နှိပ်ထားသည်)
- 2. XMLHttpRequest object တစ်ခုကို JavaScript မှ ဖန်တီးထားသည်။
- 3. XMLHttpRequest object သည် ဝဘ်ဆာဗာတစ်ခုထံသို့ တောင်းဆိုချက်တစ်ခု ပေးပို့သည်။
- 4. ဆာဗာသည် တောင်းဆိုချက်ကို လုပ်ဆောင်သည်။
- 5. ဆာဗာသည် ဝဘ်စာမျက်နှာသို့ တုံ့ပြန်မှုကို ပေးပို့သည်။
- 6. တုံ့ပြန်မှုကို JavaScript ဖြင့်ဖတ်သည်။
- 7. သင့်လျော်သောလုပ်ဆောင်ချက် (စာမျက်နှာအပ်ဒိတ်ကဲ့သို့) ကို JavaScript မှလုပ်ဆောင်သည်။
ခေတ်မီဘရောက်ဆာများ (Fetch API)
ခေတ်မီဘရောက်ဆာများသည် XMLHttpRequest Object အစား Fetch API ကိုသုံးနိုင်သည်။
Fetch API မျက်နှာပြင်သည် ဝဘ်ဘရောက်ဆာများကို ဝဘ်ဆာဗာများသို့ HTTP တောင်းဆိုမှုများကို ပြုလုပ်ခွင့်ပြုသည်။
အကယ်၍ သင်သည် XMLHttpRequest Object ကိုအသုံးပြုပါက၊ Fetch သည် ပိုမိုရိုးရှင်းသောနည်းလမ်းဖြင့် အလားတူလုပ်ဆောင်နိုင်သည်။