AJAX - XMLHttp တောင်းဆိုချက်
XMLHttpRequest အရာဝတ္တုကို ဆာဗာတစ်ခုမှ ဒေတာတောင်းခံရန် အသုံးပြုသည်။
ဆာဗာတစ်ခုထံ တောင်းဆိုချက်တစ်ခု ပေးပို့ပါ။
ဆာဗာတစ်ခုထံ တောင်းဆိုချက်တစ်ခုပေးပို့ရန်၊ XMLHttpRequest
ကျွန်ုပ်တို့သည် အရာဝတ္ထု၏ open() နှင့် send() နည်းလမ်းများကို အသုံးပြုသည်-
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Method | Description |
---|---|
open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
send() | Sends the request to the server (used for GET) |
send(string) | Sends the request to the server (used for POST) |
url - ဆာဗာရှိ ဖိုင်တစ်ခု
နည်းလမ်း ၏ url က န့်သတ်ချက် open()
သည် ဆာဗာရှိ ဖိုင်တစ်ခုထံသို့ လိပ်စာတစ်ခုဖြစ်သည်-
xhttp.open("GET", "ajax_test.asp", true);
ဖိုင်သည် .txt နှင့် .xml ကဲ့သို့သော ဖိုင်အမျိုးအစား သို့မဟုတ် .asp နှင့် .php ကဲ့သို့သော ဆာဗာ ဇာတ်ညွှန်းရေးဖိုင်များ (တုံ့ပြန်ချက်ကို ပြန်လည်မပေးပို့မီ ဆာဗာတွင် လုပ်ဆောင်ချက်များကို လုပ်ဆောင်နိုင်သည်)။
Asynchronous - မှန်လား မှားသလား။
ဆာဗာ တောင်းဆိုချက်များကို အချိန်ကိုက် ပေးပို့သင့်သည်။
open() method ၏ async parameter ကို true အဖြစ် သတ်မှတ်သင့်သည်-
xhttp.open("GET", "ajax_test.asp", true);
တပြိုင်နက်တည်း ပေးပို့ခြင်းဖြင့်၊ JavaScript သည် ဆာဗာတုံ့ပြန်မှုကို စောင့်စရာမလိုသော်လည်း၊
- ဆာဗာတုံ့ပြန်မှုကိုစောင့်ဆိုင်းနေစဉ် အခြား script များကိုလုပ်ဆောင်ပါ။
- တုံ့ပြန်မှုအဆင်သင့်ဖြစ်ပြီးနောက် တုံ့ပြန်မှုကို ကိုင်တွယ်ဖြေရှင်းပါ။
async ကန့်သတ်ဘောင်အတွက် မူရင်းတန်ဖိုးမှာ async = true ဖြစ်သည်။
သင့်ကုဒ်မှတတိယပါရာမီတာကို ဘေးကင်းစွာ ဖယ်ရှားနိုင်သည်။
Synchronous XMLHttpRequest (async = false) ကို ဆာဗာတုံ့ပြန်မှု အဆင်သင့်မဖြစ်မချင်း JavaScript မှ လုပ်ဆောင်ခြင်းကို ရပ်သွားသောကြောင့် အကြံပြုထားခြင်းမရှိပါ။ ဆာဗာသည် အလုပ်များနေပါက သို့မဟုတ် နှေးပါက၊ အပလီကေးရှင်းသည် ရပ်သွားလိမ့်မည် သို့မဟုတ် ရပ်သွားမည်ဖြစ်သည်။
ရယူပါ သို့မဟုတ် ပို့စ်တင်မလား။
GET
ထက်ပိုမိုရိုးရှင်းပြီး ပိုမြန်ပြီး POST
ကိစ္စအများစုတွင် အသုံးပြုနိုင်ပါသည်။
သို့သော်၊ POST တောင်းဆိုချက်များကို အမြဲသုံးပါ-
- ကက်ရှ်ဖိုင်သည် ရွေးချယ်စရာတစ်ခုမဟုတ်ပါ (ဆာဗာတွင် ဖိုင်တစ်ခု သို့မဟုတ် ဒေတာဘေ့စ်ကို အပ်ဒိတ်လုပ်ပါ)။
- ဆာဗာသို့ ဒေတာ အများအပြား ပေးပို့ခြင်း (POST တွင် အရွယ်အစား ကန့်သတ်ချက်များ မရှိပါ)။
- အသုံးပြုသူထည့်သွင်းမှုပေးပို့ခြင်း (အမည်မသိစာလုံးများပါရှိသော) POST သည် GET ထက် ပိုမိုခိုင်မာပြီး လုံခြုံသည်။
တောင်းဆိုချက်များရယူပါ။
ရိုးရှင်းသော GET
တောင်းဆိုချက်
ဥပမာ
xhttp.open("GET", "demo_get.asp");
xhttp.send();
အထက်ဖော်ပြပါ ဥပမာတွင်၊ သင်သည် ကက်ရှ်ရလဒ်ကို ရရှိနိုင်သည်။ ၎င်းကိုရှောင်ရှားရန်၊ URL တွင် သီးသန့် ID တစ်ခုထည့်ပါ-
ဥပမာ
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
GET
နည်းလမ်းဖြင့် အချက်အလက်ပေးပို့လိုပါက ၊ အချက်အလက်ကို URL သို့ ထည့်ပါ-
ဥပမာ
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
ဆာဗာသည် ထည့်သွင်းမှုကို မည်သို့အသုံးပြုပုံနှင့် တောင်းဆိုမှုတစ်ခုအား ဆာဗာက တုံ့ပြန်ပုံတို့ကို နောက်အခန်းတွင် ရှင်းပြထားသည်။
ပို့စ်တင်ရန် တောင်းဆိုမှုများ
ရိုးရှင်းသော POST
တောင်းဆိုချက်
ဥပမာ
xhttp.open("POST", "demo_post.asp");
xhttp.send();
HTML ဖောင်ကဲ့သို့ ဒေတာပို့စ်တင်ရန် HTTP ခေါင်းစီးဖြင့် ထည့်ပါ setRequestHeader()
။ send()
နည်းလမ်း တွင် သင်ပေးပို့လိုသောဒေတာကို သတ်မှတ်ပါ -
ဥပမာ
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Method | Description |
---|---|
setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
ထပ်တူကျသော တောင်းဆိုချက်
open()
တစ်ပြိုင်နက်တည်း တောင်းဆိုမှုကို လုပ်ဆောင်ရန် နည်းလမ်း ရှိ တတိယ ဘောင်ကို အောက်ပါသို့ ပြောင်းလဲပါ false
။
xhttp.open("GET", "ajax_info.txt", false);
တစ်ခါတစ်ရံ async = false ကို အမြန်စမ်းသပ်ရန်အတွက် သုံးသည်။ JavaScript ကုဒ်အဟောင်းများတွင် ထပ်တူထပ်မျှ တောင်းဆိုမှုများကိုလည်း တွေ့ရပါမည်။
ကုဒ်သည် ဆာဗာပြီးစီးရန် စောင့်ဆိုင်းနေမည်ဖြစ်သောကြောင့် လုပ်ဆောင်ချက်တစ်ခုအတွက် မလိုအပ် onreadystatechange
ပါ။
ဥပမာ
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Synchronous XMLHttpRequest (async = false) ကို ဆာဗာတုံ့ပြန်မှု အဆင်သင့်မဖြစ်မချင်း JavaScript မှ လုပ်ဆောင်ခြင်းကို ရပ်သွားသောကြောင့် အကြံပြုထားခြင်းမရှိပါ။ ဆာဗာသည် အလုပ်များနေပါက သို့မဟုတ် နှေးပါက၊ အပလီကေးရှင်းသည် ရပ်သွားလိမ့်မည် သို့မဟုတ် ရပ်သွားမည်ဖြစ်သည်။
ခေတ်မီ developer ကိရိယာများသည် ထပ်တူကျသည့် တောင်းဆိုမှုများကို အသုံးပြုခြင်းနှင့် ပတ်သက်၍ သတိပေးရန် တွန်းအားပေးပြီး ၎င်းသည် InvalidAccessError ခြွင်းချက်တစ်ခု ဖြစ်ပေါ်သည့်အခါတွင် ပစ်ချနိုင်သည်။