For Android device For iOS device
១៥
កញ្ញា

ការកែប្រែអត្ថបទ​ក្នុង Website ពី txt File ដោយ​ប្រើ AJAX

AJAX គឺជា​បច្ចេកវិទ្យា​ដែល​ពេញ​និយម​ជាងគេ​ក្នុង​ការ​បន្ថែម​សមត្ថភាព និងភាពស្រស់​ស្អាត​ទៅ​ឲ្យ Website ។ តាមរយៈ​ច្បាប់​ទី ០១ របស់​ទស្សនាវដ្ដី អាន “ANT” ​បាន​ធ្វើការ​ណែនាំ​លោកអ្នក​ឲ្យ​ស្គាល់ AJAX និង​បច្ចេកវិទ្យា​ដែល​ចូលរួម​គ្នា​ក្នុង​ការ​បង្កើត AJAX ដែល​មាន​ដូចជា​ៈ XML, DOM, CSS, XMLHttpRequest និង JavaScript ។ ក្នុង​ពេលនេះ ANT Training សូមលើកយកការ​ប្រើ​ប្រាស់ XMLHttpRequest និង JavaScript ដើម្បី​ធ្វើការ​ណែនាំ​លោកអ្នក​ពីរបៀប​ក្នុង​ការ​ទាញយក​អត្ថបទពី txt file ដែល​មិន​បង្ហាញ​លើ website ដោយមិនមានការ refresh page ​ទាំងមូល ។

របៀប​ក្នុង​ការ​បង្កើត​

1. ​បង្កើត file txt មួយដោយដាក់​ឈ្មោះ​ថា data.txt

2. ​ធ្វើការ​បញ្ចូល​អត្ថបទទៅ​ក្នុង data.txt ដូច​ខាងក្រោម​

“This text was fetched using Ajax.”

3. ​បង្កើត file html មួយដោយដាក់​ឈ្មោះ​ថា txtAjax.html

4. ​ធ្វើការ​បញ្ចូល​កូដទៅ​ក្នុង txtAjax.html ដូច​ខាងក្រោម​៖

 ​ផ្នែក​ HTML

​ផ្នែក​ AJAX និង JavaScript

​តាមរយៈ​កូដ​ខាងលើ​អ្នកនឹងទទួលបាន website ដូចរូប​ខាងក្រោម​៖

​នៅពេល​ដែល​អ្នកចុច button “ប្ដូរអត្ថបទ website នឹងផ្លាស់ប្ដូរទៅដូចរូប​ខាងក្រោម​ដោយមិនមានការ refresh page

​ចំណាំ​៖ ប្រសិនបើ​អ្នក ដំណើរ​ការ​កូដ​របស់អ្នក​នៅលើ Browser Chrome ​វានឹង​មិន​ដំណើរ​ការ​នោះទេ ។ ដូច្នេះអ្នកត្រូវដាក់ file ​របស់អ្នក​នៅ​ក្នុង local server ​របស់អ្នក (Wamp Xampp) ដើម្បី​ឲ្យ​កូដ​របស់អ្នក ដំណើរ​ការ​គ្រប់ Browser

ពន្យល់កូដ

- បន្ទាត់ទី១៩ ដល់ទី ២៧ នឹង​ធ្វើការ​ដោយស្វ័យ​ប្រវត្តិ​ពេល​ដែល page load

- បន្ទាត់ទី១៩ var XMLHttpRequestObject; ជាការប្រកាសអតញ្ញាត (variable) មួយ​ឈ្មោះ​ថា XMLHttpRequestObject

- ​សម្រាប់ Modern Browser ដូចជា firefox អាច​ឲ្យ​យើង​ធ្វើការ បង្កើត  XMLHttpRequest object ដោយ​ផ្ទាល់​តាមរយៈ​កូដបន្ទាត់ទី២២ XMLHttpRequestObject = new XMLHttpRequest () ; ។ ចំណែក​ឯ Internet Explorer (​ជំនាន់​ទី៥ និង ជំនាន់​ក្រោយៗ​) វិញយើងត្រូវ​ធ្វើការ​បង្កើត XMLHttpRequest object ​តាមរយៈ​ ActiveXobject

- ​នៅពេល​ដែល Button ​ត្រូវបាន​ចុច តាមរយៈ​កូដបន្ទាត់ទី១១ JavaScript function ​ឈ្មោះ​ថា getData () ចាប់ផ្ដើម​ដំណើរ​ការ ដោយការហៅ នៅលើ​ Event onclick នៅ​ក្នុង​ HTML

- បន្ទាត់ទី២៩ event onreadystatechange នឹង​ដំណើរ​ការ​នៅពេល​ដែល​តម្លៃ​របស់ readyState property ផ្លាស់ប្ដូរ ។

- readyState: ​រក្សាទុក​ស្ថានភាពរបស់ request

*** ដកស្រង់ចេញពី​ទស្សនាវដ្ដី​អាន-ANT ច្បាប់​ទី ០២ ប្រចាំខែ សីហា ឆ្នាំ ២០០៨ និង​ធ្វើការ​កែ​សម្រួល​ឡើងវិញនៅខែ កញ្ញា ឆ្នាំ ២០១៦

*** មុខវិជ្ផា JavaScript តម្លៃ ៧០ដុល្លា ឬ ២៨០០០០រៀល សម្រាប់ Course Outline នៃ​វគ្គ​នេះ http://training.antkh.com/

*** សម្រាប់​ស្នាដៃសិស្ស​ដែល​បាន​បញ្ចប់​វគ្គ​គេហទំព័រជា​ច្រើន នៅអាន-ANT http://training.antkh.com/achievements/?c=web

*** សូម​ចូលរួម​ជាសមាជិក ANT Training Group ដើម្បី​តាមដានសម្មភាពប្រចាំ​ថ្ងៃ​ជាមួយអាន-ANT
*** ចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ដែល​ទាក់ទងនឹង​បច្ចេកវិទ្យា​រៀងរាល់​ថ្ងៃ​

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា