មេរៀន AJAX XMLHttpRequest

aAJAX – បង្កើត​ XMLHttpRequest ទាំងអស់​សម័យ​ទំនើប​គាំទ្រ​កម្មវិធី​រុករក​វត្ថុ XMLHttpRequest (IE5 និង IE6 ប្រើ ActiveXObject មួយ​) ។ វត្ថុ XMLHttpRequest ត្រូវ​បាន​ប្រើ​ដើម្បី​ផ្លាស់​ប្តូ​រ​ទិន្នន័យ​ជាមួយ​ម៉ាស៊ីន​បម្រើ​ដែល​នៅ​ពីក្រោយ​ឆាក​មួយ​។ នេះ​មាន​ន័យ​ថា​វា​អាច​ធ្វើ​ទៅ​បាន​ដើម្បី​ធ្វើ​ឱ្យ​ទាន់សម័យ​ផ្នែក​នៃ​ទំព័រ​តំបន់​បណ្ដាញ​មួយ​ដោយ​គ្មាន​ការ reloading ទំព័រ​ទាំងមូល​។
បង្កើត​វត្ថុ XMLHttpRequest មួយ ទាំងអស់​កម្មវិធី​រុករក​សម័យ​ទំនើប (IE7 + របស់ Firefox​, Chrome​, Safari និង​របស់ Opera​) មាន​វត្ថុ XMLHttpRequest មាន​ស្រាប់​នៅ​ក្នុង​។
Syntax សម្រាប់ XMLHttpRequest object:

variable=new XMLHttpRequest();

កំណែ​ចាស់​នៃ​ការ​រុករក​អ៊ិ​ន​ធឺ​ណិ (IE5 និង IE6​) ប្រើ​ជា​វត្ថុ ActiveX​:

variable=new ActiveXObject(“Microsoft.XMLHTTP”);

ដើម្បី​គ្រប់គ្រង​កម្មវិធី​រុករក​សម័យ​ទំនើប​ទាំង​អស់​រួម​ទាំង IE5 និង IE6​, ពិនិត្យ​មើល​ប្រសិន​បើ​កម្មវិធី​រុករក​ដែល​គាំទ្រ​ដល់​វត្ថុ XMLHttpRequest នេះ​។ ប្រសិន​បើ​វា​មិន​បាន​បង្កើត​វត្ថុ XMLHttpRequest មួយ​ប្រសិន​បើ​មិន​បង្កើត ActiveXObject មួយ​:

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

AJAX – ផ្ញើសំនូមពរ Request ទៅ  Server ផ្ញើ​ស្នើ​សុំ​មួយ​ទៅ​កាន់​ម៉ាស៊ីន​បម្រើ​មួយ ដើម្បី​ផ្ញើ​សំណើ​រ​មួយ​ទៅ​កាន់​ម៉ាស៊ីន​បម្រើ​មួយ​ដែល​យើង​ប្រើ​ការ​បើក​ចំហនិង​ វិធី​នៃ​វត្ថុ XMLHttpRequest​

xmlhttp.open(“GET”,”ajax_info.txt”,true);
xmlhttp.send();

ethod Description
open(method,url,async) Specifies the type of request, the URL, and if the request should be handled asynchronously or not.method: the type of request: GET or POST
url: the location of the file on the server
async: true (asynchronous) or false (synchronous)
send(string) Sends the request off to the server.string: Only used for POST requests

ប្រើ GET ឬ POST
ទទួល​បាន​គឺ​ងាយ​ស្រួល​និង​លឿន​ជាង POST បាន​, និង​អាច​ត្រូវ​បាន​ប្រើ​នៅ​ក្នុង​ករណី​ជា​ច្រើន​។
ទោះ​ជា​យ៉ាង​ណា​តែងតែ​ប្រើ​សំណើ POST បាន​នៅ​ពេល​ដែល​:

– ឯកសារ​ឃ្លាំង​សម្ងាត់​មិន​មែន​ជា​ជម្រើស​មួយ (ធ្វើ​បច្ចុប្បន្នភាព​ឯកសារ​ឬ​មូលដ្ឋាន​ទិន្នន័យ​នៅ​លើ​ម៉ាស៊ីន​បម្រើ​)
– ផ្ញើ​មួយ​ចំនួន​ទឹកប្រាក់​ដ៏​ធំ​នៃ​ទិន្នន័យ​ទៅ​កាន់​ម៉ាស៊ីន​បម្រើ (POST បាន​មាន​ដែន​កំណត់​ទំហំ​ទេ​)
– ការ​ផ្ញើ​ការ​បញ្ចូល​របស់​អ្នក​ប្រើ (ដែល​អាច​មាន​តួ​អក្សរ​ដែល​មិន​ស្គាល់​) POST បាន​គឺ​កាន់​តែ​រឹងមាំ​និង​មាន​សុវត្ថិភាព​ជាង GET
សំណើ GET Requests

សំណើ​ទទួល​បាន​សាមញ្ញ​:
ឧ​ទា​ហរ​ណ៏
xmlhttp.open(“GET”,”demo_get.asp”,true);
xmlhttp.send();
នៅ​ក្នុង​ឧទាហរណ៍​ខាង​លើ​អ្នក​អាច​ទទួល​បាន​លទ្ធផល​ទុក​ក្នុង​ឃ្លាំង​សម្ងាត់​។

ដើម្បី​ជៀសវាង​នេះ​បន្ថែម​លេខ​សម្គាល់​តែ​មួយ​គត់​ដើម្បី URL របស់​នេះ​:
ឧ​ទា​ហរ​ណ៏
xmlhttp.open(“GET”,”demo_get.asp?t=” + Math.random(),true);
xmlhttp.send();
ប្រសិន​បើ​អ្នក​ចង់​ផ្ញើ​ព​ត៌​មាន​ជាមួយ​នឹង​វិធីសាស្ត្រ​ទទួល​បាន​បន្ថែម​ព​ត៌​មាន​ទៅ​ជា URL នេះ​:
ឧ​ទា​ហរ​ណ៏
xmlhttp.open(“GET”,”demo_get2.asp?fname=Henry&lname=Ford”,true);
xmlhttp.send();
សំណើ POST បាន

សំណើ​របស់ POST បាន​ធម្មតា​:
ឧ​ទា​ហរ​ណ៏
xmlhttp.open(“POST”,”demo_post.asp”,true);
xmlhttp.send();
ដើម្បី POST ទិន្នន័យ​សំណុំ​បែបបទ​ដូចជា HTML ដែល​មួយ​បន្ថែម​បឋមកថា HTTP ជាមួយ setRequestHeader () ។ បញ្ជាក់​ទិន្នន័យ​ដែល​អ្នក​ចង់​ផ្ញើ​នៅ​ក្នុង​ការ​ផ្ញើ () វិធី​សា​ស្ដ្រ​:
ឧ​ទា​ហរ​ណ៏
xmlhttp.open(“POST”,”ajax_test.asp”,true);
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
xmlhttp.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 – ដែលឯកសារ​ File លើ   Server
ប៉ារ៉ាម៉ែត្រ URL នៃ​វិធីសាស្ត្រ​បើក​ចំហ () នេះ​គឺ​ជា​អាសយដ្ឋាន​ទៅ​ឯកសារ​នៅ​លើ​ម៉ាស៊ីន​បម្រើ​មួយ​មាន​:

xmlhttp.open(“GET”,”ajax_test.asp”,true);

Asynchronous – True ឬ False?

AJAX ឈរ​សម្រាប់ Asynchronous JavaScript និង XML មាន​និង​សម្រាប់​វត្ថុ XMLHttpRequest ដើម្បី​មាន​ឥរិយា​បទ​ជា​អ្នក AJAX ដែល​ជា​ប៉ារ៉ាម៉ែត្រ async វិធីសាស្ត្រ​នៃ​ការ​បើក​ចំហ () ត្រូវ​បាន​កំណត់​ទៅ true​:
xmlhttp.open(“GET”,”ajax_test.asp”,true);

ការ​ផ្ញើ​សំណើ asynchronous គឺ​ជា​ការ​ធ្វើ​ឱ្យ​ប្រសើរ​ឡើង​ដ៏​ធំ​មួយ​សម្រាប់​អ្នក​អភិវឌ្ឍន៍​បណ្ដាញ​។ មនុស្ស​ជា​ច្រើន​នៃ​ភារកិច្ច​ដែល​បាន​អនុវត្ត​នៅ​លើ​ម៉ាស៊ីន​បម្រើ​គឺ​ប្រើ​ប្រាស់​ពេល​វេលា​យ៉ាង​ខ្លាំង​។ មុន​ពេល AJAX​, ប្រតិបត្តិការ​នេះ​អាច​ប​ណ្តា​ល​ឱ្យ​កម្មវិធី​ដើម្បី​ព្យួរ​ឬ​បញ្ឈប់​។
ជា​មួយ​នឹង​ការ AJAX​, ការ​អនុញ្ញាត JavaScript មិន​ត្រូវ​តែ​រង់ចាំ​សម្រាប់​ការ​ឆ្លើយ​តប​របស់​ម៉ាស៊ីន​បម្រើ​នោះ​ទេ​តែ​អាច​ជំនួស​:
-ប្រតិបត្តិ​ស្គ្រីប​ផ្សេង​ទៀត​ខណៈ​ពេល​ដែល​កំពុង​រង់ចាំ​សម្រាប់​ការ​ឆ្លើយ​តប​របស់​ម៉ាស៊ីន​បម្រើ
-ការ​ដោះ​ស្រាយ​ជា​មួយ​នឹង​ការ​ឆ្លើយ​តប​នៅ​ពេល​ដែល​ការ​ឆ្លើយតប​ត្រៀមខ្លួន​រួចរាល់​ហើយ
Async=true
នៅពេល​ដែល​ប្រើ async = ពិត​បញ្ជាក់​មុខងារ​ដើម្បី​ប្រតិបត្តិ​នៅពេល​ដែល​ការ​ឆ្លើយតប​គឺ​មាន​រួចរាល់​ហើយ​នៅ​ក្នុង​ព្រឹត្តិការណ៍ onreadystatechange ថា​:

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”ajax_info.txt”,true);
xmlhttp.send();

Async=false

ដើម្បី​ប្រើ async = មិន​ពិត​, ផ្លាស់​ប្តូ​រ​ប៉ារ៉ាម៉ែត្រ​ទី​បី​នៅ​ក្នុង​វិធី​សា​ស្ដ្រ​បើក​ចំហ open() ទៅ​ជា​មិន​ពិត false:

xmlhttp.open(“GET”,”ajax_info.txt”,false);

ការ​ប្រើ async = មិន​ពិត​មិន​ត្រូវ​បាន​ផ្ដល់​អនុសាសន៍​ទេ​ប៉ុន្តែ​សម្រាប់​សំណើ​តូច​មួយ​ចំនួន​នេះ​អាច​ត្រូវ​បាន​យល់​ព្រម​។
ចូរ​ចងចាំ​ថា​ការ​អនុញ្ញាត JavaScript នឹង​មិន​បន្ត​ដើម្បី​ប្រតិបត្តិ​រហូត​ដល់​ការ​ឆ្លើយតប​របស់​ម៉ាស៊ីន​បម្រើ​គឺ​ត្រូវ​បាន​រួចរាល់​។ ប្រសិន​បើ​ម៉ាស៊ីន​បម្រើ​គឺ​រវល់​ឬ​យឺត​, កម្មវិធី​នឹង​ព្យួរ​ឬ​បញ្ឈប់​។

ឧ​ទា​ហរ​ណ៏
xmlhttp.open(“GET”,”ajax_info.txt”,false);
xmlhttp.send();
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;