សេចក្តីផ្តើម 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
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:
ផ្ទុកទិន្នន័យពីម៉ាស៊ីនបម្រើវិធីសាស្ត្រមួយហើយដាក់ទិន្នន័យបានត្រឡប់ចូលទៅក្នុងធាតុដែលបានជ្រើស។
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 ។
<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);
});
});
ឧទាហរណ៏
$(“#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 សំណើរមួយ។
jQuery get() និង post() methods ត្រូវបានប្រើដើម្បីស្នើសុំទិន្នន័យពីម៉ាស៊ីនបម្រើ HTTP & ជាមួយ GET ឬ POST សំណើរមួយ។
HTTP Request: GET vs. POST
វិធីសាស្រ្តពីរដែលជាទូទៅត្រូវបានប្រើសម្រាប់សំណើរសុំការឆ្លើយ តបរវាងម៉ាស៊ីនភ្ញៀវនិងម៉ាស៊ីនបម្រើគឺ: GET និង POST ។
GET - សំណើរពីធនធានដែលបានបញ្ជាក់ទិន្នន័យ
POST បាន – ទិន្នន័យ Submits ត្រូវបានដំណើរការទៅធនធានដែលបានបញ្ជាក់
វិធីសាស្រ្តពីរដែលជាទូទៅត្រូវបានប្រើសម្រាប់សំណើរសុំការឆ្លើយ តបរវាងម៉ាស៊ីនភ្ញៀវនិងម៉ាស៊ីនបម្រើគឺ: 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);
});
});
$.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.”)
%>
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);
});
});
$.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 & “.”)
%>
<%
dim fname,city
fname=Request.Form(“name”)
city=Request.Form(“city”)
Response.Write(“Dear ” & fname & “. “)
Response.Write(“Hope you live well in ” & city & “.”)
%>