មេរៀន AJAX jQuery

សេចក្តី​ផ្តើ​ម AJAX
AJAX គឺជា​សិល្បៈ​នៃ​ការ​ផ្លាស់​ប្តូ​រ​ទិន្នន័យ​ជាមួយ​ម៉ាស៊ីន​បម្រើ​ និង​ការ​ធ្វើ​បច្ចុប្បន្នភាព​ផ្នែក​នៃ​ទំព័រ​តំបន់​បណ្ដាញ​ដោយ​គ្មាន​ការ reloading ទំព័រ​ទាំងមូលឡើងវិញ​។
AJAX គឺ​ជា​អ្វី​?
ពាក្ស AJAX មានន័យថា Asynchronous JavaScript និង XML មាន​
AJAX គឺ​​ការ​ផ្ទុក​ទិន្នន័យ​នៅ​ក្នុង​ផ្ទៃ​ខាងក្រោយ​ហើយ​បង្ហាញ​វា​នៅ​លើ​ទំព័រ​ប​ណ្តា​ញ​ដោយ​គ្មាន​ការ reloading ទំព័រ​ទាំងមូល​។ ឧ​ទា​ហរ​ណ៏​នៃ​កម្មវិធី​ប្រើ​ប្រាស់ AJAX​: ការសរសេរកូដ Google ផែនទី​, YouTube​, និង​ទំព័រ Facebook​។
តើ​អ្វី​ទៅ jQuery និង AJAX​?
jQuery ផ្តល់​នូវ​វិធី​សា​ស្រ្ត​មួយ​ចំនួន​សម្រាប់​មុខងារ AJAX ។ នឹង​ វិធី​សា​ស្រ្ត AJAX jQuery អ្នក​អាច​ស្នើ​អត្ថបទ HTML & #​, XML មាន​ឬ JSON ពី​ម៉ាស៊ីន​បម្រើ​ ពី​ចម្ងាយ​ដោយ​ប្រើ​ការ​បាន​ទាំង HTTP ដែល​ទទួល​បាន​​  HTTP & ហើយ​អ្នក​អាច​ផ្ទុក​ទិន្នន័យ​ខាង​ក្រៅ​ដោយ​ផ្ទាល់​ទៅ​ក្នុង​ធាតុ​ដែល​បាន​ជ្រើស​របស់ HTML នៃ​ទំព័រ​បណ្ដាញ​របស់​អ្នកដោយប្រើ jQuery។
ប្រសិនបើ​មិនប្រើ jQuery​, AJAX អាច​ត្រូវ​បាន​សរសេរ​កូដ​បន្តិច​ដូចម្តេច​ខ្លះ?
សរសេរ​កូដ AJAX ធម្មតា​អាច​ត្រូវ​បាន​បន្តិចទេ​ពីព្រោះ​កម្មវិធី​រុករក​បណ្ដាញ​ផ្សេង​គ្នា​មាន​វាក្យ​សម្ព័ន្ធ​ ផ្សេង​គ្នា​សម្រាប់​ការ​អនុវត្ដ​ន៍ AJAX ។ នេះ​មាន​ន័យ​ថា​អ្នក​នឹង​ត្រូវ​តែ​សរសេរ​កូដ​បន្ថែម​ដើម្បី​សាកល្បង​
សម្រាប់​កម្មវិធី​រុករក​បណ្ដាញ​ផ្សេង​គ្នា​។ ទោះ​ជា​យ៉ាង​ណា​ក្រុម jQuery បាន​នាំ​យក​ថែរក្សា​នេះ​សម្រាប់​យើង​ ដូច្នេះ​យើង​អាច​សរសេរ​ជា​មុខងារ AJAX ជាមួយ​បន្ទាត់​តែ​មួយ​​​កូដតែមួយបាន​។
វិធីសាស្រ្តនៃ AJAX load() Method

វិធីសាស្រ្តនៃ jQuery load() method គឺ​ជា​វិធីសាស្ត្រ​វិធីសាស្ត្រ AJAX សាមញ្ញ​ប៉ុន្តែ​មាន​កំលាំងខ្លាំង​។
ផ្ទុក​ទិន្នន័យ​ពី​ម៉ាស៊ីន​បម្រើ​វិធីសាស្ត្រ​មួយ​ហើយ​ដាក់​ទិន្នន័យ​បាន​ត្រឡប់​ចូល​ទៅ​ក្នុង​ធាតុ​ដែល​បាន​ជ្រើស​។
Syntax:

$(selector).load(URL,data,callback);

ប៉ារ៉ាម៉ែត្រ​ទិន្នន័យ​ស្រេច​បញ្ជាក់​សំណុំ​នៃ querystring គន្លឹះ / តម្លៃ​ដើម្បី​ផ្ញើ​រួម​ជា​មួយ​នឹង​ការ​ស្នើសុំ​នេះ​។ callback ប៉ារ៉ាម៉ែត្រ​ជម្រើស​គឺ​ជា​ឈ្មោះ​នៃ​អនុគមន៍​ជា​មួយ​នឹង​ត្រូវ​បាន​ប្រតិបត្តិ​បន្ទាប់​ពី​វិធីសាស្ត្រ​នៃ​ការ​ផ្ទុក () គឺ​ត្រូវ​បាន​បញ្ចប់​។ “demo_test.txt​”​: នៅ​ទីនេះ​មាតិកា​របស់​ឯកសារ​ឧទាហរណ៍​របស់​ពួក​យើង​គឺ​:
<h2>jQuery and AJAX is FUN!!!</h2>
<p id=”p1”>This is some text in a paragraph.</p>
ឧ​ទា​ហរ​ណ៏​ដូច​ខាង​ក្រោម​ផ្ទុក​មាតិកា​នៃ​ឯកសារ “demo_test.txt​” ទៅ​ក្នុង​ធាតុ <div> មួយ​ជាក់លាក់​:
ឧ​ទា​ហរ​ណ៏
$(“#div1”).load(“demo_test.txt”);
វា​ក៏​អាច​ធ្វើ​ទៅ​បាន​ដើម្បី​បន្ថែម​ឧបករណ៍​ជ្រើស jQuery ដើម្បី​ប៉ារ៉ាម៉ែត្រ URL ។

ឧ​ទា​ហរ​ណ៏​ដូច​ខាង​ក្រោម​ផ្ទុក​មាតិកា​នៃ​ធាតុ​ដែល​មាន​លេខ​សម្គាល់ = “p1​” នៅ​ខាង​ក្នុង​ឯកសារ “demo_test.txt​” នោះ​ចូល​ទៅ​ក្នុង​ធាតុ <div> ជាក់លាក់​:
ឧ​ទា​ហរ​ណ៏
$(“#div1”).load(“demo_test.txt #p1”);
ឧទាហរណ៍​ដូច​ខាង​ក្រោម​បង្ហាញ​ប្រអប់​ជូន​ដំណឹង​មួយ​បន្ទាប់​ពី​ការ​ផ្ទុក () វិធី​សា​ស្ដ្រ​បញ្ចប់​។ ប្រសិន​បើ​វិធីសាស្ត្រ​នៃ​ការ​ផ្ទុក () បាន​ទទួល​បាន​ជោគជ័យ​វា​បង្ហាញ “មាតិកា​ខាងក្រៅ​ត្រូវ​បាន​ផ្ទុក​ដោយ​ជោគជ័យ​!​” ហើយ​បើ​សិន​ជា​វា​បាន​បរាជ័យ​វា​បង្ហាញ​សារ​កំហុស​មួយ​:
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$(“#div1”).load(“demo_test.txt”,function(responseTxt,statusTxt,xhr){
if(statusTxt==”success”)
alert(“External content loaded successfully!”);
if(statusTxt==”error”)
alert(“Error: “+xhr.status+”: “+xhr.statusText);
});
});

jQuery – AJAX get() និង post() Methods
jQuery get() និង  post() methods ត្រូវ​បាន​ប្រើ​ដើម្បី​ស្នើ​សុំ​ទិន្នន័យ​ពី​ម៉ាស៊ីន​បម្រើ HTTP & ជាមួយ GET ឬ POST សំណើ​រ​មួយ​។

HTTP Request: GET vs. POST
វិធី​សា​ស្រ្ត​ពីរ​ដែល​ជាទូទៅ​ត្រូវ​បាន​ប្រើ​សម្រាប់​សំណើ​រ​សុំ​ការ​ឆ្លើយ​តប​រវាង​ម៉ាស៊ីន​ភ្ញៀវ​និង​ម៉ាស៊ីន​បម្រើ​គឺ​: GET និង POST ។
GET – សំណើ​រ​ពី​ធនធាន​ដែល​បាន​បញ្ជាក់​ទិន្នន័យ
POST បាន – ទិន្នន័យ Submits ត្រូវ​បាន​ដំណើរ​ការ​ទៅ​ធនធាន​ដែល​បាន​បញ្ជាក់

វិធី​សា​ស្រ្ត  jQuery $.get() Method

The $.get() method ទិន្នន័យ​ពី​ម៉ាស៊ីន​បម្រើ​សំណើ​វិធីសាស្ត្រ​ជាមួយ HTTP ដែល​មួយ GET សុំ​។

Syntax:
$.get(URL,callback);
ឧទាហរណ៍​ខាងក្រោម​ប្រើ $ វិធីសាស្ត្រ​ទទួល​បាន () ដើម្បី​ទាញ​យក​ទិន្នន័យ​ពី​ឯកសារ​នៅ​លើ​ម៉ាស៊ីន​បម្រើ​នេះ​។ :
ឧ​ទា​ហរ​ណ៏
$(“button”).click(function(){
$.get(“demo_test.asp”,function(data,status){
alert(“Data: ” + data + “\nStatus: ” + status);
});
});

ប៉ារ៉ាម៉ែត្រ​ដំបូង​នៃ $ ។ ទទួល​បាន ជា URL ដែល​យើង​ចង់​ស្នើ​សុំ (“demo_test.asp​”​) ផង​ដែរ​។ប៉ារ៉ាម៉ែត្រ​ទីពីរ​គឺ​មុខងារ callback មួយ​។ ប៉ារ៉ាម៉ែត្រ callback ដំបូង​ទទួល​មាតិកា​របស់​ទំព័រ​ដែល​បាន​ស្នើ​ហើយ​ប៉ារ៉ាម៉ែត្រ callback ទី​ពីរ​ទទួល​បាន​ស្ថានភាព​នៃ​ការ​ស្នើ​រ​សុំ​នេះ​។

<%
response.write(“This is some text from an external ASP file.”)
%>

jQuery $.post() Method

$.post() method ទិន្នន័យ​ពី​ម៉ាស៊ីន​បម្រើ​សំណើ​វិធីសាស្ត្រ​ដោយ​ប្រើ​សំណើ HTTP ដែល POST បាន​នោះ​ទេ​។

Syntax:

$.post(URL,data,callback);

ប៉ារ៉ាម៉ែត្រ​ដែល​ត្រូវការ URLដែល​បាន​បញ្ជាក់​ពី URLដែល​អ្នក​ចង់​ស្នើសុំ​។ប៉ារ៉ាម៉ែត្រ​ទិន្នន័យ​ស្រេច​បញ្ជាក់​ទិន្នន័យ​មួយ​ចំនួន​ដើម្បី​ផ្ញើ​តាម​ស្រប​ជាមួយ​នឹង​សំណើ​រ​នេះ​។callback ប៉ារ៉ាម៉ែត្រ​ជម្រើស​គឺ​ជា​ឈ្មោះ​នៃ​អនុគមន៍​ជា​មួយ​នឹង​ត្រូវ​បាន​ប្រតិបត្តិ​ប្រសិន​បើ​សំណើ​ជោគជ័យ​។
ឧទាហរណ៍​ខាងក្រោម​ប្រើ $ វិធីសាស្ត្រ​ប៉ុស្តិ៍ (ការ​) ដើម្បី​ផ្ញើ​ទិន្នន័យ​មួយ​ចំនួន​រួម​ជាមួយ​នឹង​ការ​ស្នើសុំ​នេះ​។ :

$(“button”).click(function(){
$.post(“demo_test_post.asp”,
{
name:”Donald Duck”,
city:”Duckburg”
},
function(data,status){
alert(“Data: ” + data + “\nStatus: ” + status);
});
});

ប៉ារ៉ាម៉ែត្រ​ដំបូង​នៃ $ គឺ​ជា URLដែល​យើង​ចង់​ស្នើ​សុំ (“demo_test_post.asp​”​) ផង​ដែរ​។ បន្ទាប់​មក​យើង​ហុច​ក្នុង​ទិន្នន័យ​មួយ​ចំនួន​ដើម្បី​ផ្ញើ​រួម​ជាមួយ​សំណើ​រ​សុំ (ឈ្មោះ​និង​ទីក្រុង​) ផង​ដែរ​។ ស្គ្រីប ASP នៅ​ក្នុង “demo_test_post.asp​” អាន​ប៉ារ៉ាម៉ែត្រ​ដែល​ដំណើរ​ការ​ពួក​វា​ហើយ​ត្រឡប់​លទ្ធផល​។ ប៉ារ៉ាម៉ែត្រ​ទី​បី​គឺ​ជា​មុខងារ​មួយ​ដែល callback ។ ប៉ារ៉ាម៉ែត្រ callback ដំបូង​ទទួល​មាតិកា​របស់​ទំព័រ​ដែល​បាន​ស្នើ​ហើយ​ប៉ារ៉ាម៉ែត្រ callback ទី​ពីរ​ទទួល​បាន​ស្ថានភាព​នៃ​ការ​ស្នើ​រ​សុំ​នេះ​។ ព័ត៌មាន​ជំនួយ​: នេះ​គឺ​ជា​របៀប​ឯកសារ ASP មើល​ទៅ​ដូច​ជា (“demo_test_post.asp​”​)​:
<%
dim fname,city
fname=Request.Form(“name”)
city=Request.Form(“city”)
Response.Write(“Dear ” & fname & “. “)
Response.Write(“Hope you live well in ” & city & “.”)
%>