ASP AJAX
AJAX သည် စာမျက်နှာတစ်ခုလုံးကို ပြန်မတင်ဘဲ ဝဘ်စာမျက်နှာတစ်ခု၏ အစိတ်အပိုင်းများကို အပ်ဒိတ်လုပ်ခြင်းအကြောင်းဖြစ်သည်။
AJAX ဆိုတာဘာလဲ။
AJAX = Asynchronous JavaScript နှင့် XML။
AJAX သည် မြန်ဆန်သွက်လက်သော ဝဘ်စာမျက်နှာများကို ဖန်တီးရန်အတွက် နည်းပညာတစ်ခုဖြစ်သည်။
AJAX သည် မြင်ကွင်းနောက်ကွယ်ရှိ ဆာဗာနှင့် ဒေတာအနည်းငယ်ကို ဖလှယ်ခြင်းဖြင့် ဝဘ်စာမျက်နှာများကို တပြိုင်နက် အပ်ဒိတ်လုပ်ခွင့်ပေးသည်။ ဆိုလိုသည်မှာ စာမျက်နှာတစ်ခုလုံးကို ပြန်မတင်ဘဲ ဝဘ်စာမျက်နှာ၏ အစိတ်အပိုင်းများကို အပ်ဒိတ်လုပ်ရန် ဖြစ်နိုင်သည်။
ဂန္တဝင်ဝဘ်စာမျက်နှာများ၊ (AJAX မသုံးသော) အကြောင်းအရာသည် ပြောင်းလဲပါက စာမျက်နှာတစ်ခုလုံးကို ပြန်လည်စတင်ရပါမည်။
AJAX အသုံးပြုသည့် အပလီကေးရှင်းများ ဥပမာများ- Google Maps၊ Gmail၊ Youtube နှင့် Facebook တက်ဘ်များ။
AJAX ဘယ်လိုအလုပ်လုပ်လဲ။
AJAX သည် အင်တာနက်စံနှုန်းများကို အခြေခံထားသည်။
AJAX သည် အင်တာနက်စံနှုန်းများအပေါ် အခြေခံပြီး ပေါင်းစပ်မှုကို အသုံးပြုသည်-
- XMLHttpRequest object (ဒေတာကို ဆာဗာတစ်ခုနှင့် တပြိုင်နက် ဖလှယ်ရန်)
- JavaScript/DOM (အချက်အလက်နှင့် ပြသရန်/အပြန်အလှန်တုံ့ပြန်ရန်)
- CSS (ဒေတာပုံစံပြုလုပ်ရန်)
- XML (ဒေတာလွှဲပြောင်းခြင်းအတွက် ဖော်မတ်အဖြစ် အသုံးပြုလေ့ရှိသည်)
AJAX အပလီကေးရှင်းများသည် ဘရောက်ဆာ- နှင့် ပလပ်ဖောင်း- သီးခြားဖြစ်သည်။
Google အကြံပြုချက်
AJAX ကို Google Suggest ဖြင့် ၂၀၀၅ ခုနှစ်တွင် Google မှ လူကြိုက်များခဲ့သည်။
Google အကြံပြုချက် သည် အလွန်တက်ကြွသောဝဘ်အင်တာဖေ့စ်ကိုဖန်တီးရန် AJAX ကိုအသုံးပြုနေသည်- Google ၏ရှာဖွေရေးအကွက်တွင် စာရိုက်သည့်အခါ၊ JavaScript သည် ဆာဗာတစ်ခုထံသို့ စာများပေးပို့ပြီး ဆာဗာမှ အကြံပြုချက်စာရင်းကို ပြန်ပေးသည်။
ယနေ့ AJAX ကိုစတင်အသုံးပြုပါ။
ကျွန်ုပ်တို့၏ ASP သင်ခန်းစာတွင်၊ စာမျက်နှာတစ်ခုလုံးကို ပြန်မတင်ဘဲ AJAX သည် ဝဘ်စာမျက်နှာ၏ အစိတ်အပိုင်းများကို မည်သို့အပ်ဒိတ်လုပ်နိုင်ကြောင်း သရုပ်ပြပါမည်။ ဆာဗာ script ကို ASP တွင်ရေးသားလိမ့်မည်။
AJAX အကြောင်းပိုမိုလေ့လာလိုပါက၊ ကျွန်ုပ်တို့၏ AJAX သင်ခန်းစာ သို့ ဝင်ရောက်ကြည့်ရှုပါ ။
AJAX ASP ဥပမာ
အောက်ဖော်ပြပါ ဥပမာသည် ဝဘ်စာမျက်နှာတစ်ခုသည် အသုံးပြုသူထည့်သွင်းသည့်အကွက်တွင် စာလုံးရိုက်နေချိန်တွင် ဝဘ်ဆာဗာတစ်ခုနှင့် မည်သို့ဆက်သွယ်နိုင်သည်ကို သရုပ်ပြမည်ဖြစ်သည်။
ဥပမာ
Start typing a name in the input field below:
Suggestions:
နမူနာရှင်းပြထားပါတယ်။
အထက်ဖော်ပြပါ ဥပမာတွင်၊ အသုံးပြုသူတစ်ဦးသည် ထည့်သွင်းမှုအကွက်တွင် ဇာတ်ကောင်တစ်ခုကို ရိုက်ထည့်သောအခါ၊ "showHint()" ဟုခေါ်သော လုပ်ဆောင်ချက်ကို လုပ်ဆောင်သည်။
လုပ်ဆောင်ချက်ကို onkeyup event မှ အစပျိုးသည်။
ဒါကတော့ HTML ကုဒ်ပါ။
ဥပမာ
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new
XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 &&
this.status == 200) {
document.getElementById("txtHint").innerHTML =
this.responseText;
}
};
xmlhttp.open("GET", "gethint.asp?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the
input field below:</b></p>
<form>
First name: <input type="text"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
ကုဒ်၏ ရှင်းလင်းချက်
ပထမဦးစွာ ထည့်သွင်းသည့်အကွက်သည် ဗလာရှိမရှိ စစ်ဆေးပါ (str.length == 0)။ ဖြစ်ပါက၊ txtHint နေရာယူထားသော အကြောင်းအရာကို ရှင်းလင်းပြီး လုပ်ဆောင်ချက်မှ ထွက်ပါ။
သို့သော်၊ ထည့်သွင်းမှုအကွက်သည် ဗလာမဟုတ်ပါက၊ အောက်ပါတို့ကို လုပ်ဆောင်ပါ။
- XMLHttpRequest object တစ်ခုကို ဖန်တီးပါ။
- ဆာဗာတုံ့ပြန်မှု အဆင်သင့်ဖြစ်သောအခါတွင် လုပ်ဆောင်ရန် လုပ်ဆောင်ချက်ကို ဖန်တီးပါ။
- တောင်းဆိုချက်ကို ဆာဗာပေါ်ရှိ ASP ဖိုင် (gethint.asp) သို့ ပို့ပါ။
- q parameter ကို gethint.asp?q="+str
- str ကိန်းရှင်သည် ထည့်သွင်းမှုအကွက်၏ အကြောင်းအရာကို ထိန်းထားသည်။
ASP ဖိုင် - "gethint.asp"
ASP ဖိုင်သည် အမည်များ၏ array ကိုစစ်ဆေးပြီး သက်ဆိုင်ရာအမည်(များ) ကို browser သို့ ပြန်ပို့ပေးသည်-
<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
AJAX သည် ဒေတာဘေ့စ်တစ်ခုနှင့် အပြန်အလှန် ဆက်သွယ်ပြောဆိုမှုအတွက် အသုံးပြုနိုင်သည်။
AJAX ဒေတာဘေ့စ်နမူနာ
အောက်ဖော်ပြပါ ဥပမာသည် ဝဘ်စာမျက်နှာတစ်ခုသည် AJAX နှင့် ဒေတာဘေ့စ်တစ်ခုမှ အချက်အလက်များကို မည်သို့ရယူနိုင်ကြောင်းကို သရုပ်ပြပါမည်။
ဥပမာ
နမူနာရှင်းပြထားသည် - HTML စာမျက်နှာ
အသုံးပြုသူတစ်ဦးသည် အထက်ဖော်ပြပါစာရင်းတွင် ဖောက်သည်တစ်ဦးကို ရွေးချယ်သောအခါ၊ "showCustomer()" ဟုခေါ်သော လုပ်ဆောင်ချက်ကို လုပ်ဆောင်သည်။ လုပ်ဆောင်ချက်ကို "ပြောင်းလဲခြင်း" ဖြစ်ရပ်မှ အစပျိုးသည်-
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (this.readyState==4 && this.status==200)
{
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
အရင်းအမြစ်ကုဒ်၏ ရှင်းလင်းချက်
မည်သည့်ဖောက်သည်မှ မရွေးချယ်ပါက (str.length==0)၊ လုပ်ဆောင်ချက်သည် txtHint နေရာယူထားသည့် အကြောင်းအရာကို ရှင်းလင်းပြီး လုပ်ဆောင်ချက်မှ ထွက်သည်။
ဖောက်သည်တစ်ဦးကို ရွေးချယ်ပါက showCustomer() လုပ်ဆောင်ချက်သည် အောက်ပါတို့ကို လုပ်ဆောင်သည်-
- XMLHttpRequest object တစ်ခုကို ဖန်တီးပါ။
- ဆာဗာတုံ့ပြန်မှု အဆင်သင့်ဖြစ်သောအခါတွင် လုပ်ဆောင်ရန် လုပ်ဆောင်ချက်ကို ဖန်တီးပါ။
- တောင်းဆိုချက်ကို ဆာဗာပေါ်ရှိ ဖိုင်တစ်ခုသို့ ပေးပို့ပါ။
- ကန့်သတ်ချက် (q) ကို URL ( dropdown list ၏အကြောင်းအရာနှင့်အတူ) သို့ထည့်ထားကြောင်းသတိပြုပါ။
ASP ဖိုင်
အထက်ပါ JavaScript မှခေါ်သော ဆာဗာရှိ စာမျက်နှာသည် "getcustomer.asp" ဟုခေါ်သော ASP ဖိုင်တစ်ခုဖြစ်သည်။
"getcustomer.asp" ရှိ အရင်းအမြစ်ကုဒ်သည် ဒေတာဘေ့စ်တစ်ခုအား စုံစမ်းမေးမြန်းမှုကို လုပ်ဆောင်ပြီး HTML ဇယားတစ်ခုတွင် ရလဒ်ကို ပြန်ပေးသည်-
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>