XMLHttpRequest Object _
ခေတ်မီဘရောက်ဆာများအားလုံးတွင် ဆာဗာတစ်ခုမှဒေတာတောင်းခံရန် XMLHttpRequest object တစ်ခုရှိသည်။
အဓိကဘရောက်ဆာအားလုံးတွင် XML ကိုဝင်ရောက်ကြည့်ရှုပြီး ကိုင်တွယ်အသုံးပြုရန် အသင့်ပါရှိသော XML parser တစ်ခုရှိသည်။
XMLHttpRequest Object
ဝဘ်ဆာဗာတစ်ခုမှဒေတာတောင်းဆိုရန် XMLHttpRequest အရာဝတ္တုကို အသုံးပြုနိုင်သည်။
XMLHttpRequest object သည် developer ၏ အိပ်မက် ဖြစ်သည်၊ သင်လုပ်နိုင်သောကြောင့်-
- စာမျက်နှာကို ပြန်မတင်ဘဲ ဝဘ်စာမျက်နှာကို အပ်ဒိတ်လုပ်ပါ။
- စာမျက်နှာကို တင်ပြီးနောက် ဆာဗာတစ်ခုမှ ဒေတာကို တောင်းဆိုပါ။
- စာမျက်နှာကို တင်ပြီးနောက် ဆာဗာတစ်ခုမှ ဒေတာကို ရယူပါ။
- နောက်ခံတွင် ဆာဗာသို့ ဒေတာပို့ပါ။
XMLHttpRequest ဥပမာ
အောက်ဖော်ပြပါ ထည့်သွင်းအကွက်တွင် စာလုံးတစ်လုံးကို ရိုက်ထည့်သောအခါ၊ XMLHttpRequest ကို ဆာဗာသို့ ပေးပို့ပြီး အချို့သော အမည်အကြံပြုချက်များကို ပြန်လည်ပေးပို့သည် (ဆာဗာမှ)
ဥပမာ
Start typing a name in the input field below:
Suggestions:
XMLHttpRequest တစ်ခု ပေးပို့ခြင်း။
ခေတ်မီဘရောက်ဆာများအားလုံးတွင် XMLHttpRequest object တစ်ခုပါရှိသည်။
အသုံးပြုရန်အတွက် ယေဘူယျ JavaScript syntax သည် ဤကဲ့သို့ ဖြစ်သည်-
ဥပမာ
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
XMLHttpRequest Object တစ်ခုကို ဖန်တီးခြင်း။
အထက်ဖော်ပြပါ ဥပမာရှိ ပထမစာကြောင်းသည် XMLHttpRequest object တစ်ခုကို ဖန်တီးသည်-
var xhttp = new XMLHttpRequest();
onreadystatechange ဖြစ်ရပ်
ReadyState ပိုင်ဆိုင်မှုသည် XMLHttpRequest ၏ အခြေအနေကို ထိန်းထားသည် ။
ReadyState ပြောင်းလဲ သည့် အခါတိုင်း onreadystatechange ဖြစ်ရပ်ကို အစပျိုးသည်။
ဆာဗာတောင်းဆိုမှုတစ်ခုအတွင်း ReadyState သည် 0 မှ 4 သို့ပြောင်းသည်-
0: တောင်းဆိုမှုကို အစပြု၍မရ
1- ဆာဗာချိတ်ဆက်မှုကို တည်ထောင်ခဲ့သည်
2- တောင်းဆိုချက် လက်ခံရရှိခဲ့သည်
3- တောင်းဆိုချက်
4- တောင်းဆိုချက် ပြီးဆုံးပြီး တုံ့ပြန်မှု အဆင်သင့်ဖြစ်နေပါပြီ
onreadystatechange ပိုင်ဆိုင်မှုတွင်၊ readyState ပြောင်းလဲသည့်အခါ လုပ်ဆောင်ရမည့် လုပ်ဆောင်ချက်ကို သတ်မှတ်ပါ။
xhttp.onreadystatechange = function()
ReadyState သည် 4 ဖြစ်ပြီး အခြေအနေ 200 ဖြစ်သောအခါ၊ တုံ့ပြန်မှုသည် အဆင်သင့်ဖြစ်သည်-
if (this.readyState == 4 && this.status == 200)
XMLHttpRequest Properties and Methods
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | The status of the XMLHttpRequest 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: OK 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
Domains များကို ဖြတ်ကျော်ဝင်ရောက်ပါ။
လုံခြုံရေးအရ၊ ခေတ်မီဘရောက်ဆာများသည် ဒိုမိန်းများတစ်လျှောက် ဝင်ရောက်ခွင့်မပြုပါ။
ဆိုလိုသည်မှာ ဝဘ်စာမျက်နှာနှင့် ၎င်းတင်ရန်ကြိုးစားသော XML ဖိုင်နှစ်ခုစလုံးသည် တူညီသောဆာဗာပေါ်တွင် တည်ရှိနေရမည်ဖြစ်သည်။
W3Schools ပေါ်ရှိ နမူနာများသည် W3Schools ဒိုမိန်းတွင်ရှိသော ဖွင့်ထားသော XML ဖိုင်များအားလုံး။
အထက်ဖော်ပြပါ ဥပမာကို သင့်ကိုယ်ပိုင် ဝဘ်စာမျက်နှာတစ်ခုတွင် အသုံးပြုလိုပါက၊ သင်တင်သည့် XML ဖိုင်များသည် သင့်ကိုယ်ပိုင်ဆာဗာပေါ်တွင် တည်ရှိနေရပါမည်။
တုံ့ပြန်မှုစာသားပိုင်ဆိုင်မှု
တုံ့ပြန်မှုစာသားပိုင်ဆိုင်မှုသည် တုံ့ပြန်ချက်ကို စာကြောင်းတစ်ခုအဖြစ် ပြန်ပေးသည်။
တုံ့ပြန်ချက်ကို စာသားစာကြောင်းအဖြစ် အသုံးပြုလိုပါက၊ တုံ့ပြန်မှုစာသားပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
ဥပမာ
document.getElementById("demo").innerHTML = xmlhttp.responseText;
တုံ့ပြန်မှုXML ပိုင်ဆိုင်မှု
တုံ့ပြန်မှုXML ပိုင်ဆိုင်မှုသည် တုံ့ပြန်မှုကို XML DOM အရာဝတ္ထုအဖြစ် ပြန်ပေးသည်။
တုံ့ပြန်ချက်ကို XML DOM အရာဝတ္ထုအဖြစ် အသုံးပြုလိုပါက၊ responseXML ပိုင်ဆိုင်မှုကို အသုံးပြုပါ-
ဥပမာ
cd_catalog.xml ဖိုင်ကို တောင်းဆိုပြီး တုံ့ပြန်မှုကို XML DOM အရာဝတ္ထုအဖြစ် အသုံးပြုပါ-
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
ရယူပါ သို့မဟုတ် ပို့စ်တင်မလား။
GET သည် POST ထက် ပိုမိုရိုးရှင်းပြီး မြန်ဆန်ပြီး ကိစ္စအများစုတွင် အသုံးပြုနိုင်သည်။
သို့သော်၊ POST တောင်းဆိုချက်များကို အမြဲသုံးပါ-
- ကက်ရှ်ဖိုင်သည် ရွေးချယ်စရာတစ်ခုမဟုတ်ပါ (ဆာဗာတွင် ဖိုင်တစ်ခု သို့မဟုတ် ဒေတာဘေ့စ်ကို အပ်ဒိတ်လုပ်ပါ)
- ဆာဗာသို့ ဒေတာ အများအပြား ပေးပို့ခြင်း (POST တွင် အရွယ်အစား ကန့်သတ်ချက်များ မရှိပါ)
- အသုံးပြုသူထည့်သွင်းမှုပေးပို့ခြင်း (အမည်မသိအက္ခရာများပါရှိသော) POST သည် GET ထက် ပိုမိုခိုင်မာပြီး လုံခြုံသည်။
url - ဆာဗာရှိ ဖိုင်တစ်ခု
open() method ၏ url parameter သည် server တစ်ခုပေါ်ရှိ ဖိုင်တစ်ခု၏လိပ်စာဖြစ်သည်-
xmlhttp.open("GET", "xmlhttp_info.txt", true);
ဖိုင်သည် .txt နှင့် .xml ကဲ့သို့သော ဖိုင်အမျိုးအစား သို့မဟုတ် .asp နှင့် .php ကဲ့သို့သော ဆာဗာ ဇာတ်ညွှန်းရေးဖိုင်များ (တုံ့ပြန်ချက်ကို ပြန်လည်မပေးပို့မီ ဆာဗာတွင် လုပ်ဆောင်ချက်များကို လုပ်ဆောင်နိုင်သည်)။
Asynchronous - မှန်လား မှားသလား။
တောင်းဆိုချက်အား တပြိုင်နက်တည်း ပေးပို့ရန်အတွက် open() နည်းလမ်း၏ async ကန့်သတ်ဘောင်ကို အမှန်ဟု သတ်မှတ်ရပါမည်-
xmlhttp.open("GET", "xmlhttp_info.txt", true);
တောင်းဆိုချက်များကို တပြိုင်နက်တည်း ပေးပို့ခြင်းသည် ဝဘ်ဆော့ဖ်ဝဲရေးဆွဲသူများအတွက် ကြီးမားသောတိုးတက်မှုတစ်ခုဖြစ်သည်။ ဆာဗာပေါ်တွင် လုပ်ဆောင်ခဲ့သော အလုပ်များစွာသည် အချိန်ကုန်သည်။
အပြိုင်အဆိုင် ပေးပို့ခြင်းဖြင့်၊ JavaScript သည် ဆာဗာတုံ့ပြန်မှုကို စောင့်ရန် မလိုအပ်သော်လည်း၊
- ဆာဗာတုံ့ပြန်မှုကိုစောင့်ဆိုင်းနေစဉ် အခြား script များကိုလုပ်ဆောင်ပါ။
- တုံ့ပြန်မှုအဆင်သင့်ဖြစ်သောအခါ တုံ့ပြန်မှုကို ကိုင်တွယ်ပါ။
Async = မှန်သည်။
async = true ကိုအသုံးပြုသည့်အခါ၊ onreadystatechange event တွင် တုံ့ပြန်မှုအဆင်သင့်ဖြစ်သောအခါ လုပ်ဆောင်ရန် လုပ်ဆောင်ချက်တစ်ခုကို သတ်မှတ်ပါ-
ဥပမာ
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
Async = မှားယွင်းသော
async = false ကိုအသုံးပြုရန်၊ open() method တွင် တတိယ parameter ကို false သို့ပြောင်းပါ
xmlhttp.open("GET", "xmlhttp_info.txt", false);
async = false ကို အသုံးပြုခြင်းအား မထောက်ခံသော်လည်း အနည်းငယ်သော တောင်းဆိုမှုများအတွက် ၎င်းသည် ok နိုင်သည်။
ဆာဗာတုံ့ပြန်မှုအဆင်သင့်မဖြစ်မချင်း JavaScript သည် ဆက်လက်လုပ်ဆောင်မည်မဟုတ်ကြောင်း သတိရပါ။ ဆာဗာသည် အလုပ်များနေပါက သို့မဟုတ် နှေးပါက၊ အပလီကေးရှင်းသည် ရပ်သွားလိမ့်မည် သို့မဟုတ် ရပ်သွားမည်ဖြစ်သည်။
မှတ်ချက်- async = false ကို အသုံးပြုသောအခါ၊ onreadystatechange လုပ်ဆောင်ချက်ကို မရေးပါနှင့် - send() ထုတ်ပြန်ချက်ပြီးနောက် ကုဒ်ကို ထည့်လိုက်ရုံသာ။
ဥပမာ
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
XML Parser
ခေတ်မီဘရောက်ဆာများအားလုံးတွင် built-in XML parser တစ်ခုရှိသည်။
XML Document Object Model (XML DOM) တွင် XML ကို ဝင်ရောက် တည်းဖြတ်ရန် နည်းလမ်းများစွာ ပါရှိသည်။
သို့သော်၊ XML စာရွက်စာတမ်းကို မဝင်ရောက်မီ၊ ၎င်းကို XML DOM အရာဝတ္ထုတစ်ခုထဲသို့ တင်ရပါမည်။
XML parser သည် ရိုးရိုးစာသားကိုဖတ်နိုင်ပြီး ၎င်းကို XML DOM အရာဝတ္ထုအဖြစ်သို့ ပြောင်းနိုင်သည်။
Text String တစ်ခုကို ခွဲခြမ်းစိပ်ဖြာခြင်း။
ဤဥပမာသည် XML DOM အရာဝတ္ထုတစ်ခုသို့ စာသားစာကြောင်းတစ်ခုကို ခွဲခြမ်းစိပ်ဖြာပြီး ၎င်းမှ အချက်အလက်များကို JavaScript ဖြင့် ထုတ်ယူသည်-
ဥပမာ
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
ဘရောက်ဆာဟောင်းများ (IE5 နှင့် IE6)
Internet Explorer ဗားရှင်းဟောင်း (IE5 နှင့် IE6) သည် XMLHttpRequest အရာဝတ္တုကို မပံ့ပိုးပါ။
IE5 နှင့် IE6 ကိုကိုင်တွယ်ရန်၊ ဘရောက်ဆာသည် XMLHttpRequest အရာဝတ္တုကို ပံ့ပိုးခြင်းရှိမရှိ စစ်ဆေးပါ၊ သို့မဟုတ်ပါက ActiveXObject ကို ဖန်တီးပါ-
ဥပမာ
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Internet Explorer ဗားရှင်းဟောင်း (IE5 နှင့် IE6) သည် DOMParser အရာဝတ္တုကို မပံ့ပိုးပါ။
IE5 နှင့် IE6 ကိုကိုင်တွယ်ရန်၊ ဘရောက်ဆာသည် DOMParser အရာဝတ္တုကို ပံ့ပိုးခြင်းရှိမရှိ စစ်ဆေးပါ၊ သို့မဟုတ်ပါက ActiveXObject ကို ဖန်တီးပါ-
ဥပမာ
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
နောက်ထပ် ဥပမာများ
ခေါင်းစီးအချက်အလက်ကို အရင်းအမြစ် (ဖိုင်) ၏ ခေါင်းစီးအချက်အလက်ကို ရယူပါ။
ဖြင့် သီးခြားခေါင်းစီးအချက်အလက်ကို ရယူပါ အရင်းအမြစ် (ဖိုင်) ၏ သီးခြားခေါင်းစီးအချက်အလက်ကို ရယူပါ။
သုံးစွဲသူသည် ထည့်သွင်းအကွက်တွင် စာလုံးရိုက်နေစဉ် ဝဘ်စာမျက်နှာတစ်ခုသည် ဝဘ်ဆာဗာနှင့် ဆက်သွယ်နိုင်ပုံ။
XMLHttpRequest object ပါသည့် ဝဘ်စာမျက်နှာတစ်ခုမှ အချက်အလက်များကို ဒေတာဘေ့စ်တစ်ခုမှ ရယူနိုင်ပုံ။
ပြန်လည်ရယူရန် XMLHttp တောင်းဆိုချက်တစ်ခု ဖန်တီးပြီး XML ဖိုင်တစ်ခုမှ ဒေတာကို ရယူပြီး HTML ဇယားတစ်ခုတွင် ဒေတာကို ပြသရန်။