AJAX - အင်္ဂတ်ကြား အကူအညီ အိုက်အိုင်

XMLHttpRequest အပေါင်းအချုပ် သည် AJAX အခြေခံ ဖြစ်သည်

  1. 创建 XMLHttpRequest 对象
  2. 定义回调函数
  3. XMLHttpRequest အပေါင်းအချုပ် ကို ဖော်ထုတ် လုပ်ဆောင် ရန်
  4. ဝိုက်တာ ပြည်ထောင်စု ကို ဝိုက်တာ ကို လွှတ်တင် လုပ်ဆောင် ရန်

XMLHttpRequest 对象

အသုံးပြု ဖို့ ဝိုက်တာ ပြည်ထောင်စု အား လုံးဝ ကူညီ ပြီ XMLHttpRequest 对象。

XMLHttpRequest အပေါင်းအချုပ် ကို ဝိုက်တာ ပြည်ထောင်စု နှင့် ဝိုက်တာ ပြည်ထောင်စု ကို နောက်ခံ အခြေအနေ တွင် လွှတ်တင် လုပ်ဆောင် နိုင်သည်။ ဤကြောင့် ဝိုက်တာ ပြည်ထောင်စု အချို့ အစိတ်အပိုင်း ကို အသုံးပြု နိုင်သည်၊ ဝိုက်တာ ပြည်ထောင်စု အများအပြား ကို အပြန်လည် ဆက်လက် ဆောင်ရွက် လုပ်ဆောင် ရန် လိုမည်မဟုတ်ပါ။

创建 XMLHttpRequest 对象

所有现代浏览器（Chrome、Firefox、IE、Edge、Safari、Opera）都有内置的 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable = new XMLHttpRequest();

定义回调函数

回调函数是作为参数传递给另一个函数的函数。

在这种情况下，回调函数应包含响应准备就绪时要执行的代码。

xhttp.onload = function() {
  // 当响应准备就绪时要做什么
}

发送请求

如需向服务器发送请求，您可以使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

实例

// 创建 XMLHttpRequest 对象
const xhttp = new XMLHttpRequest();
// 定义回调函数
xhttp.onload = function() {
  // 您可以在这里使用数据
}
// 发送请求
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

亲自试一试

跨域访问（Access Across Domains）

出于安全原因，现代浏览器不允许跨域访问。

ထိုကြောင့် ဝတ္ထုပေါင်း နှင့် သင် အသုံးပြုလိုက်သော XML ဖိုင် သည် အတူတကွ အကိုင်း ကြီး တွင် ရှိသည့် အခြေစိုက် အကိုင်း ကြီး တွင် ရှိသည့် အခြေစိုက် အကိုင်း ကြီး တွင် ရှိသည်。

CodeW3C.com ပေါ်တွင် အကျိုးသမား အား အသုံးပြုထားသော အချက်အလက် အား တင်သွင်းထားသော XML ဖိုင် သည် CodeW3C.com အခြေစိုက် ပုံစံ တွင် ရှိသည်。

သင်ကိုယ်တိုင် ဝတ္ထုပေါင်း တစ်ခု တွင် အားပေးထားသော အကျိုးသမား အား အသုံးပြုလိုက်လျှင် သင် တင်သွင်းထားသော XML ဖိုင် သည် သင်၏ ဝတ္ထုပေါင်း ကြီး တွင် ရှိသည့် အကိုင်း ကြီး အပေါ်မှ တင်သွင်းပါ။

XMLHttpRequest အကိုင်း နည်းလမ်း

နည်းလမ်း ဖော်ပြ
new XMLHttpRequest() အခြား XMLHttpRequest အကိုင်း ကို ဖန်တီးပါ။
abort() အချိန်အတွင်း ဖြစ်ပေါ်သော အကောင်းကြီး ကို ဖျက်သိမ်းပါ။
getAllResponseHeaders() အချက်အလက် ကို ဖော်ပြပါ။
getResponseHeader() ဖော်ပြထားသော အချက်အလက် ကို ပြန်အပြန် ဖော်ပြပါ။
open(method, url, async, user, psw)

အကောင်းကြီး ကန့်သတ်ပါ။

  • methodအခွင့်ကျ - အကောင်းကြီး အမျိုးအစား GET သို့မဟုတ် POST
  • urlအခွင့်ကျ - ဖိုင် စက်တန်း
  • asyncအခွင့်ကျ - true (အတူတကွ) သို့မဟုတ် false (ကူးယူ)
  • userအခွင့်ကျ အသုံးပြုသူ
  • pswအခွင့်ကျ ပိုက်သင့်သော ပစ္စည်း
send() ပြောင်းလဲသွင်းထားသော အကောင်းကြီး သတ်မှတ်ထားသော အချိန်အတွင်း ဖြေရှင်းပါ။ ဖော်ပြပါသည် - GET အကောင်းကြီး
send(string) ပြောင်းလဲသွင်းထားသော အကောင်းကြီး သတ်မှတ်ထားသော အချိန်အတွင်း ဖြေရှင်းပါ။ ဖော်ပြပါသည် - POST အကောင်းကြီး
setRequestHeader() တင်သွင်းထားသော အချက်အလက် / အမှတ် ကို တင်သွင်းထားသော အချက်အလက် သို့ ထပ်ထည့်ပါ。

XMLHttpRequest အကိုင်း အချက်အလက်

အချက်အလက် ဖော်ပြ
onload တင်သွင်းထားသော (တင်သွင်း) အကောင်းကြီး သတ်မှတ်ထားသော အချိန်အတွင်း ဖြေရှင်းသည့် ပုံစံကို ဖော်ပြပါသည်。
onreadystatechange လုပ်ငန်းအခြေအနေ သတ်မှတ်ထားသော အကိုင်း လက်တွေ့သော အချိန်အတွင်း ဖြေရှင်းသည့် ပုံစံကို ဖော်ပြပါသည်。
readyState

XMLHttpRequest အချက်အလက် ကို သိသိသာသာ ကျန်ထားပါ

  • 0: မိတ်ဆက်သတင်း မမှူးခြင်း
  • 1: လက်ဖက် ချိန်ခေါ်ထားပါ
  • 2: မိတ်ဆက်သတင်း ခံစားထားပါ
  • 3: မိတ်ဆက်သတင်း ပြီး ဖြစ်နေပါ
  • 4: မိတ်ဆက်သတင်း ပြီး တုံ့ပြန်ခြင်း မျဉ်းလုပ်ဆောင်ထားပါ
responseText အချက်အလက် အဖြစ် တုံ့ပြန်
responseXML XML အချက်အလက် အဖြစ် တုံ့ပြန်
status

မိတ်ဆက်သတင်း အချက်အလက် ကို ပြန်လည်ပေးသည်

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

ပြင်ဆင်ထားသော စာရင်း ကို ကိုက်ထားသည် Http မေးခွန်း ကိုးကားချက်
statusText အချက်အလက် ကို ပြန်လည်ပေးပါ

onload အချက်အလက်

XMLHttpRequest အချက်အလက် ကို အပြင်အဆင် ပြုလုပ်ပါ

XMLHttpRequest အချက်အလက် အတွက် onload အချက်အလက် အတွက် အပြောင်းလဲ

实例

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

亲自试一试

အပြင်အဆင် အပြောင်းလဲ

ဝီကီစ် လုပ်ဆောင် များ အပေါ် အခြား ဝီကီစ် လုပ်ဆောင် များ ကို ဖွဲ့စည်းပါ

ပြောင်းလဲသည် ပြီး တုံ့ပြန်ခြင်း ပြုလုပ်သည်

实例

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}
function myFunction1(xhttp) {
  // အခြား လုပ်ဆောင်
}
function myFunction2(xhttp) {
  // အခြား လုပ်ဆောင်
}

onreadystatechange အချက်အလက်

readyState XMLHttpRequest အချက်အလက် ကို ကျန်ထားပါ

onreadystatechange အချက်အလက် ကို အပြင်အဆင် အပြောင်းလဲသောအခါ အပြောင်းလဲသည်

status အချက်အလက် နှင့် statusText XMLHttpRequest အချက်အလက် ကို ကျန်ထားပါ

အချက်အလက် ဖော်ပြ
onreadystatechange အခြား အချက်အလက် ပြောင်းလဲသောအခါ ခေါ်ခဲ့သည်
readyState

XMLHttpRequest အချက်အလက် ကို သိသိသာသာ ကျန်ထားပါ

  • 0: မိတ်ဆက်သတင်း မမှူးခြင်း
  • 1: လက်ဖက် ချိန်ခေါ်ထားပါ
  • 2: မိတ်ဆက်သတင်း ခံစားထားပါ
  • 3: မိတ်ဆက်သတင်း ပြီး ဖြစ်နေပါ
  • 4: မိတ်ဆက်သတင်း ပြီး တုံ့ပြန်ခြင်း မျဉ်းလုပ်ဆောင်ထားပါ
status

မိတ်ဆက်သတင်း အချက်အလက် ကို ပြန်လည်ပေးသည်

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

ပြင်ဆင်ထားသော စာရင်း ကို ကိုက်ထားသည် Http မေးခွန်း ကိုးကားချက်
statusText 返回状态文本（比如 "OK" 或 "Not Found"）。

每次 readyState 改变时都会调用 onreadystatechange 函数。

当 readyState 为 4 且 status 为 200 时，响应就绪：

实例

function loadDoc() {
  const 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");
  xhttp.send();
}

亲自试一试

onreadystatechange 事件被触发了四次（1-4），每次 readyState 变化一次。