AJAX - ဆာဗာ တစ်ခုထံ တောင်းဆိုချက် တစ်ခု ပေးပို့ပါ။
XMLHttpRequest object ကို server တစ်ခုနှင့် data ဖလှယ်ရန်အတွက် အသုံးပြုပါသည်။
ဆာဗာတစ်ခုထံ တောင်းဆိုချက်တစ်ခု ပေးပို့ပါ။
ဆာဗာတစ်ခုထံ တောင်းဆိုချက်တစ်ခုပေးပို့ရန်၊ ကျွန်ုပ်တို့သည် XMLHttpRequest object ၏ 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) |
ရယူပါ သို့မဟုတ် ပို့စ်တင်မလား။
GET သည် POST ထက် ပိုမိုရိုးရှင်းပြီး မြန်ဆန်ပြီး ကိစ္စအများစုတွင် အသုံးပြုနိုင်သည်။
သို့သော်၊ POST တောင်းဆိုချက်များကို အမြဲသုံးပါ-
- ကက်ရှ်ဖိုင်သည် ရွေးချယ်စရာတစ်ခုမဟုတ်ပါ (ဆာဗာတွင် ဖိုင်တစ်ခု သို့မဟုတ် ဒေတာဘေ့စ်ကို အပ်ဒိတ်လုပ်ပါ)။
- ဆာဗာသို့ ဒေတာ အများအပြား ပေးပို့ခြင်း (POST တွင် အရွယ်အစား ကန့်သတ်ချက်များ မရှိပါ။)
- အသုံးပြုသူထည့်သွင်းမှုပေးပို့ခြင်း (အမည်မသိစာလုံးများပါရှိသော) POST သည် GET ထက် ပိုမိုခိုင်မာပြီး လုံခြုံသည်။
တောင်းဆိုချက်များရယူပါ။
ရိုးရှင်းသော GET တောင်းဆိုချက်-
ဥပမာ
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
အထက်ဖော်ပြပါ ဥပမာတွင်၊ သင်သည် ကက်ရှ်ရလဒ်ကို ရရှိနိုင်သည်။ ၎င်းကိုရှောင်ရှားရန်၊ URL တွင် သီးသန့် ID တစ်ခုထည့်ပါ-
ဥပမာ
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
GET နည်းလမ်းဖြင့် အချက်အလက်များ ပေးပို့လိုပါက URL သို့ အချက်အလက်ကို ထည့်ပါ-
ဥပမာ
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
ပို့စ်တင်ရန် တောင်းဆိုမှုများ
ရိုးရှင်းသော POST တောင်းဆိုချက်
ဥပမာ
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
HTML ဖောင်ကဲ့သို့ ဒေတာတင်ရန်၊ setRequestHeader() ဖြင့် HTTP ခေါင်းစီးကို ထည့်ပါ။ send() method တွင် သင်ပေးပို့လိုသော ဒေတာကို သတ်မှတ်ပါ-
ဥပမာ
xhttp.open("POST", "demo_post2.asp", true);
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 |
url - ဆာဗာရှိ ဖိုင်တစ်ခု
open() method ၏ url parameter သည် server တစ်ခုပေါ်ရှိ ဖိုင်တစ်ခု၏လိပ်စာဖြစ်သည်-
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 များကိုလုပ်ဆောင်ပါ။
- တုံ့ပြန်မှုအဆင်သင့်ဖြစ်ပြီးနောက် တုံ့ပြန်မှုကို ကိုင်တွယ်ပါ။
onreadystatechange အိမ်ခြံမြေ
XMLHttpRequest object ဖြင့် တောင်းဆိုချက်အဖြေတစ်ခုရရှိသောအခါတွင် လုပ်ဆောင်ရမည့်လုပ်ဆောင်ချက်ကို သင်သတ်မှတ်နိုင်ပါသည်။
လုပ်ဆောင်ချက်ကို XMLHttpResponse object ၏ onreadystatechange ပိုင်ဆိုင်မှု တွင် သတ်မှတ်ထားသည် -
ဥပမာ
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
အထက်နမူနာတွင် အသုံးပြုထားသော "ajax_info.txt" ဖိုင်သည် ရိုးရှင်းသော စာသားဖိုင်ဖြစ်ပြီး ဤကဲ့သို့ တွေ့ရသည်-
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
နောက်အခန်းတွင် onreadystatechange အကြောင်း ပိုမိုလေ့လာနိုင်ပါမည်။
ထပ်တူကျသော တောင်းဆိုမှု
တစ်ပြိုင်နက်တည်း တောင်းဆိုမှုကို လုပ်ဆောင်ရန် 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 မှ လုပ်ဆောင်ခြင်းကို ရပ်သွားသောကြောင့် အကြံပြုထားခြင်းမရှိပါ။ ဆာဗာသည် အလုပ်များနေပါက သို့မဟုတ် နှေးပါက၊ အပလီကေးရှင်းသည် ရပ်သွားလိမ့်မည် သို့မဟုတ် ရပ်သွားမည်ဖြစ်သည်။
Synchronous XMLHttpRequest သည် ဝဘ်စံနှုန်းမှ ဖယ်ရှားခြင်းလုပ်ငန်းစဉ်တွင် ရှိနေသော်လည်း ဤလုပ်ငန်းစဉ်သည် နှစ်ပေါင်းများစွာ ကြာနိုင်ပါသည်။
ခေတ်မီ developer ကိရိယာများသည် တစ်ပြိုင်နက်တည်း တောင်းဆိုမှုများကို အသုံးပြုခြင်းနှင့် ပတ်သက်၍ သတိပေးရန် တွန်းအားပေးပြီး ၎င်းသည် InvalidAccessError ခြွင်းချက်တစ်ခု ဖြစ်ပေါ်သည့်အခါတွင် စွန့်ပစ်ခြင်း ဖြစ်နိုင်သည်။