AJAX - ဆာဗာ တုံ့ပြန်မှု
onreadystatechange အိမ်ခြံမြေ
ReadyState ပိုင်ဆိုင်မှုသည် XMLHttpRequest ၏ အခြေအနေကို ထိန်းထားသည် ။
ReadyState ပြောင်းလဲသောအခါ တွင် onreadystatechange ပိုင်ဆိုင်မှုသည် လုပ်ဆောင်ရမည့် လုပ်ဆောင်ချက်ကို သတ်မှတ်သည်။
အခြေအနေ ပိုင်ဆိုင်မှုနှင့် statusText ပိုင်ဆိုင်မှုသည် XMLHttpRequest အရာဝတ္ထု၏ အခြေအနေကို ထိန်းထားသည် ။
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds 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" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
ReadyState ပြောင်းလဲသည့်အခါတိုင်း onreadystatechange လုပ်ဆောင်ချက်ကို ခေါ်သည်။
ReadyState သည် 4 ဖြစ်ပြီး အခြေအနေ 200 ဖြစ်သောအခါ၊ တုံ့ပြန်မှုသည် အဆင်သင့်ဖြစ်သည်-
ဥပမာ
function loadDoc() {
var xhttp = new XMLHttpRequest();
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 ဖြစ်ရပ်ကို readyState တွင် ပြောင်းလဲမှုတစ်ခုစီအတွက် တစ်ကြိမ် (1-4) လေးကြိမ် စတင်သည်။
Callback Function ကိုအသုံးပြုခြင်း။
ပြန်ခေါ်သည့် လုပ်ဆောင်ချက်သည် အခြားလုပ်ဆောင်ချက်တစ်ခုသို့ ကန့်သတ်ချက်တစ်ခုအဖြစ် ပေးပို့သည့် လုပ်ဆောင်ချက်ဖြစ်သည်။
သင့်တွင် ဝဘ်ဆိုက်တစ်ခုတွင် AJAX လုပ်ဆောင်စရာတစ်ခုထက်ပိုပါက၊ သင်သည် XMLHttpRequest အရာဝတ္တုကို လုပ်ဆောင်ရန်အတွက် လုပ်ဆောင်ချက်တစ်ခုနှင့် AJAX လုပ်ဆောင်မှုတစ်ခုစီအတွက် ပြန်ခေါ်သည့်လုပ်ဆောင်ချက်တစ်ခု ဖန်တီးသင့်သည်။
လုပ်ဆောင်ချက်ခေါ်ဆိုမှုတွင် တုံ့ပြန်မှုအဆင်သင့်ဖြစ်သောအခါတွင် ခေါ်ဆိုရန် URL နှင့် မည်သည့်လုပ်ဆောင်ချက် ပါဝင်သင့်သည်။
ဥပမာ
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
ဆာဗာ တုံ့ပြန်မှု ဂုဏ်သတ္တိများ
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
ဆာဗာတုံ့ပြန်မှုနည်းလမ်းများ
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
တုံ့ပြန်မှုစာသားပိုင်ဆိုင်မှု
responseText ပိုင်ဆိုင်မှုသည် ဆာဗာတုံ့ပြန်မှုကို JavaScript စာကြောင်းအဖြစ် ပြန်ပေးကာ ၎င်းကို လိုက်လျောညီထွေစွာ အသုံးပြုနိုင်သည် ။
ဥပမာ
document.getElementById("demo").innerHTML = xhttp.responseText;
တုံ့ပြန်မှုXML ပိုင်ဆိုင်မှု
XML HttpRequest object တွင် in-built XML parser တစ်ခုရှိသည်။
တုံ့ပြန်မှု XML ပိုင်ဆိုင်မှု သည် ဆာဗာတုံ့ပြန်မှုကို XML DOM အရာဝတ္ထုအဖြစ် ပြန်ပေးသည်။
ဤပိုင်ဆိုင်မှုကိုအသုံးပြုခြင်းဖြင့် သင်သည် တုံ့ပြန်မှုကို XML DOM အရာဝတ္ထုတစ်ခုအဖြစ် ပိုင်းခြားနိုင်သည်-
ဥပမာ
cd_catalog.xml ဖိုင်ကို တောင်းဆိုပြီး တုံ့ပြန်ချက်ကို ပိုင်းခြားပါ။
xmlDoc = xhttp.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;
xhttp.open("GET",
"cd_catalog.xml", true);
xhttp.send();
ဤသင်ခန်းစာ၏ DOM အခန်းများတွင် XML DOM အကြောင်း သင်ပိုမိုလေ့လာနိုင်မည်ဖြစ်ပါသည်။
getAllResponseHeaders() နည်းလမ်း
getAllResponseHeaders () နည်းလမ်းသည် ဆာဗာတုံ့ပြန်မှုမှ ခေါင်းစီးအချက်အလက်အားလုံးကို ပြန်ပေးသည်။
ဥပမာ
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
getResponseHeader() နည်းလမ်း
getResponseHeader () နည်းလမ်းသည် ဆာဗာတုံ့ပြန်မှုမှ တိကျသော ခေါင်းစီးအချက်အလက်ကို ပြန်ပေးသည်။
ဥပမာ
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();