For Android device For iOS device
២៨
មករា

ស្វែងយល់ពី AJAX (Asynchronous JavaScript And XML) ?

 

AJAX មកពី​ពាក្យ “Asynchronous Javascript And XML” សំដៅទៅ​បច្ចេកវិទ្យា​អ្វី​ក៏​ដោយ​ដែល​ប្រើ ដើម្បី​ធ្វើការ​បង្កើត​គេហទំព័រ​ឲ្យ​មានភាព​រស់រវើក និង ទាក់ទាញ (dynamic and interactive web content) ។

AJAX ដំបូង​ត្រូវបាន​ណែនាំ​ដោយលោក Jesse James Garrett នៃ Adaptive Path ក្នុង​សំនេររបស់គាត់​ដែល​មាន​ឈ្មោះ​ថា “AJAX: A New Approach To Web Application” ដែល​មានន័យថា “AJAX: ជាការមកដល់ថ្មីរបស់ Web Application” ។ និយាយ​ឲ្យ​ងាយ AJAX គឺជា​បច្ចេកវិទ្យា​មួយ​ដែល​ប្រើ Javascript ដើម្បី​ធ្វើការ​ផ្លាស់ប្តូរអត្ថបទ​ក្នុង​ផ្នែក​ណាមួយ​នៃគេហទំព័រពី web server ដោយមិន refresh គេហទំព័រ​ទាំងមូល ។ អត្ថន័យនេះគឺផ្ទុយពីវិធីសាស្រ្តធម្មតា​ក្នុង​ការផ្លាស់ប្តូរ (update) គេហទំព័រ ដែល​តម្រូវ​ឲ្យ browser (ឧទាហរណ៍ ie, firefox ឬ opera) ធ្វើការ refresh គេហទំព័រ​ទាំងមូល ដើម្បី​បង្ហាញ​អត្ថបទ​ដែល​បានផ្លាស់ប្តូរ ។

​បច្ចេកវិទ្យា​ដូច​គ្នា​នេះ​ត្រូវបាន​ប្រើ​ប្រាស់​ក្នុង​គោល​បំណង​នៃការលួចចូល (hack) ។
ការមកដល់របស់ AJAX ត្រូវបាន​ប្រើ​ប្រាស់​ដោយ website មួយចំនួន​ដូចជា Khmer TV Online, Microsoft, Google Maps, Yahoo Mail Beta និង Gmail ដែល​ជា website មានភាពទាក់ទាញ​ខ្ពស់ ។

AJAX ត្រូវបាន​ដឹង និង ប្រើ​ប្រាស់​យ៉ាង​ទូលំទូលាយ ដែល​ធ្វើ​ឲ្យ website កាន់តែមានភាពរបស់រវើក និង ទាក់ទាញជាងពីមុន ។ វា​ត្រូវបាន​ប្រើ​ប្រាស់​ជា​លក្ខណៈ​ច្រើន​សណ្ឋាន​ដូចជា edit-in-place text, drag-and-drop, CSS animation និង វិធីផ្សេងៗ​ទៀត ។ អត្ថបទនេះនឹង​ណែនាំ​អ្នក​ឲ្យ​ស្គាល់​ពី AJAX និង បច្ចេកវិទ្យា​មួយចំនួនទៀត​ដែល​ចូលរួម​គ្នា​ក្នុង​ការ​បង្កើត​ឲ្យ​មាន AJAX ។

♦ AJAX Web Application

AJAX ជា​បច្ចេកវិទ្យា​មួយដ៏អស្ចារ្យ វាសឹងតែនឹងអាចជាធ្វើ​ឲ្យ web application មាន​លទ្ធភាព​ធ្វើ​ការងារ​ជំនួស desktop applications បាន ។ AJAX មិន​គ្រាន់តែ​បន្ថែម​ភាពស្រស់​ស្អាត​ដល់ website របស់អ្នក​ប៉ុណ្ណោះទេ ប្រសិនបើ​អ្នក​ប្រើ​វា​ឲ្យ​បានត្រឹមត្រូវ​វានឹង​បន្ថែម​នូវ user’s experience ដល់ website របស់អ្នក​ថែម​ទៀតផង ។ AJAX អាចធ្វើ​ឲ្យ website របស់អ្នក​កាន់តែ​លឿន ងាយស្រួល​ប្រើ និង កាន់តែពេញចិត្ត ។

ជួនកាល AJAX web application មាន​លក្ខណៈ​ដូចជា desktop application ក្នុង browser ដូច្នេះដែរ ។ គ្រាន់តែ AJAX web application គឺជា remote application ហើយ desktop application គឺជា local application ។ AJAX web application ត្រូវតែ​ធ្វើការ​ភ្ជាប់​ទៅកាន់ (connect to) distant server ដើម្បី​ទាញយក​ទិន្នន័យ ។

សំគាល់ៈ ដើម្បី​ធ្វើការ​ទាញយក​ទិន្នន័យ​ពី database server developer ត្រូវ​ប្រើ​ប្រាស់ server-side language ដូចជា ASP, JSP, PHP ឬ CGI ។

​ប្រវត្តិ​នៃការកកើត AJAX

Nesting Framesets

មានវិធីសាស្ត្រមួយ ដើម្បី​ជៀសវាងការ load page ទាំងមូល គឺ​ប្រើ frameset ក្នុង frameset ផ្សេងទៀត ។ បច្ចេកវិទ្យា​នេះ​អនុញ្ញាត​ឲ្យ developers ធ្វើការ​ផ្លាស់ប្តូរតែ​ផ្នែក​ដែល​បាន​ជ្រើសរើស​ប៉ុណ្ណោះ ។ វា​ត្រូវបាន​ប្រើ​ក្នុង​លក្ខណៈ​ជា tab-style navigation ។ បច្ចេកវិទ្យា​នេះ​ផ្ដល់​នូវ​លទ្ធផល​មិនល្អទេ​ព្រោះ unmaintainable code និង page មាន​ឈ្មោះ​វែងថែម​ទៀតផង ឧទាហរណ៍​ដូចជា UserAccountEditTopLeft.asp ។

The Hidden iframe

iframe មានចាប់តាំងពី Internet Explorer 4, developers ធ្វើ​នូវ HTTP requests ទៅ server ដោយ​ប្រើ hidden iframe បន្ទាប់មក​ធ្វើការ​បញ្ចូល​អត្ថបទទៅ​ក្នុង​គេហទំព័រដោយ​ប្រើ Javascript និង DHTML ។ វិធី​ខាងលើ​នេះបាន​ផ្ដល់​នូវ​សមត្ថភាព​ក្នុង submit ទិន្នន័យ​ដោយ​គ្មាន​ការ reload page ហើយ​លទ្ធផល​ត្រូវបាន​បញ្ចូន​ពី server ទៅ iframe រួច​ប្រើ Javascript ដើម្បី​ធ្វើការ​ទាញ​ទិន្នន័យ​ពី iframe មកវិញ ។

Remote Scripting

Remote Scripting ជា​បច្ចេកវិទ្យា​មួយ​ផ្សេងទៀត​ដែល​មាន​លក្ខណៈ​ដូចទៅនឹង AJAX វា​កំណត់​នូវ src attribute របស់ <script> tag ដើម្បី​ធ្វើការ load អត្ថបទរបស់គេហទំព័រ​ដែល​ត្រូវបាន​បង្កើត​ដោយ Javascript ។

វិធីនេះសាមញ្ញជាង hidden iframe hack ដោយ​ប្រើ Javascript ដើម្បី​បង្កើត​អត្ថបទ​នៅលើ server ហើយ load ទៅ​ក្នុង​គេហទំព័រ ។ ទោះជា​យ៉ាង​ណា​ក៏​ដោយ វិធីនេះ​ប្រើ​បានតែជាមួយ GET request តែប៉ុណ្ណោះ ។

អ្វី​ដែល​ធ្វើ​ឲ្យ AJAX មានភាពអស្ចារ្យ

ជំនួសការ​ផ្ញើ​អ្វីៗ​ទាំងអស់​ទៅ server ហើយ server ធ្វើការ​ផ្ញើ​គេហទំព័រថ្មីមួយមកវិញ web developers អាច​ធ្វើការ​ផ្ញើ​ទៅកាន់ server នូវ​ទិន្នន័យ​ដ៏តូចមួយ ហើយ​ជ្រើសរើស​ផ្នែក​ណាមួយ​នៃគេហទំព័រ ដើម្បី​ធ្វើការ​ផ្លាស់ប្តូរពឹងផ្អែកលើការ response របស់ server តាមរយៈ​ការ request របស់ web developers ។ បច្ចេកវិទ្យា​នេះ​ត្រូវបាន​ហៅថា asynchronous ​ដែល​ជាពាក្យមួយរបស់ AJAX (Asynchronous Javascript And XML) ។

Asynchronous system ផ្ទុយពី synchronous system ។ ក្នុង synchronous system អ្វី​ទាំងអស់​កើតឡើងតាម លំដាប់លំដោយ ។

ឧទាហរណ៍ synchronous system ជាមួយនឹង​ការប្រណាំងឡាន ឡានណា​ដែល​ចាប់ផ្តើមនៅមុខគេនឹងទៅដល់ទីមុនគេ ហើយឡានណា​ដែល​ចាប់ផ្តើមទីពីរនឹងទៅដល់ទីពីរ ដូច​គ្នា​ដែរ សម្រាប់​ឡានផ្សេងៗ​ទៀត ប្រសិនបើ​មានឡានណាខូចឡាន​នូវ​ខាងក្រោយត្រូវរង់ចាំ ។ នេះគឺជារឿង​ដែល​ធុញទ្រាន និង ខាតពេលវេលា ។

ការប្រឡាំងឡាន​ក្នុង​ប្រព័ន្ធ asynchronous មានន័យថា​ឡាន​ដែល​ចាប់ផ្តើមពីខាងក្រោយអាចមកទី​ក្នុង​លំដាប់ទី ២ ឬ ទី ៣ ។ HTTP request ពី browser ដោយ​ប្រើ AJAX ធ្វើតាមរបៀបនេះ ។

គេហទំព័រ​ដែល​ធម្មតា​ប្រើ​នូវ synchronous system អ្នកត្រូវតែរងចាំ​រហូត​ទាល់តែ server បញ្ចូន​នូវ​គេហទំព័រទី១រួចទើបអ្នកអាច request គេហទំព័រទី២បាន ។

​ចំណែក​ឯគេហទំព័រ​ដែល​ប្រើ​បច្ចេកវិទ្យា AJAX រួមផ្សំ​ប្រើ​នូវ asynchronous system ដែល​អ្នកទស្សនាមិនមានការរង់ចាំ​សម្រាប់​ការ​បញ្ចូន​គេហទំព័រ​ទាំងមូល​ពី server នោះទេ ។ សូមមើលរូប​ខាងក្រោម​សម្រាប់​ការប្រៀបធៀប synchronous system និង asynchronous system:

ការប្រឡាំងឡាន​ក្នុង​ប្រព័ន្ធ asynchronous មានន័យថា​ឡាន​ដែល​ចាប់ផ្តើមពីខាងក្រោយអាចមកទី​ក្នុង​លំដាប់ទី ២ ឬ ទី ៣ ។ HTTP request ពី browser ដោយ​ប្រើ AJAX ធ្វើតាមរបៀបនេះ ។ សូមមើលរូប​ខាងក្រោម​៖

រូប​ខាងលើ​បង្ហាញ​ថាអ្នកទស្សនាមិនមានការរង់ចាំ​សម្រាប់​ការ​បញ្ចូន​គេហទំព័រ​ទាំងមូល​ពី server នោះទេ ។

ធាតុផ្សំ ដើម្បី​បង្កើត AJAX

AJAX ត្រូវបាន​បង្កើត​ឡើងដោយ​ប្រើ​បច្ចេកវិទ្យា​ផ្សេងៗ​ដទៃ​ទៀតមាន​ដូចជា​ៈ - XML, - The W3C DOM, - CSS, - XMLHttpRequest , - Javascript ។  ​បច្ចេកវិទ្យា​ទាំងអស់​រួម​បញ្ចូល​គ្នា​បង្កើត​បានជា AJAX ។ ខាងក្រោម​ជាការពន្យល់ពី​បច្ចេកវិទ្យា​នីមួយៗ​ដែល​រួមមាន​ក្នុង​ការ​បង្កើត AJAX ។

​ទិន្នន័យ​ដែល​បញ្ចូន XML

XML ជាពាក្យ​ដែល​ផ្សំ​ឲ្យ​មាន AJAX (អក្សរ “X”) ។ វាជា main data format ដែល​ប្រើ​ក្នុង asynchronous HTTP request ក្នុង​ការទំនាក់ទំនងរវាង browser និង server ក្នុង AJAX application ពី​ព្រោះ XML គឺជា format data ដែល​សាមញ្ញ និង ងាយស្រួល​ក្នុង​ការ​បញ្ចូន និង ប្រើ​ប្រាស់ ។

XML គឺជា Markup

គេហទំព័រ​ដែល​ប្រើ AJAX application មាន​នូវ XHTML markup ដែល​មាន​លក្ខណៈ​ដូចទៅនឹង XML ។ XHTML ជាភាសា​ដែល​ល្អជា HTML ហើយមាន​លក្ខណៈ​ប្រហែលនឹង HTML ដែរ ។ XHTML ត្រូវបាន​ផ្សំដោយ HTML ជាមួយនឹង valid របស់ XML ។ ខាងក្រោម​នេះជាគុណសម្បត្តិរបស់ XHTML:

- វា​ផ្ដល់​នូវ tools និង script libraries ជា​ច្រើន​សម្រាប់ មើល កែប្រែ និង validate XML ។

- វា​ប្រើ​បាន​យ៉ាង​ល្អជាមួយ browser ថ្មីៗ​ដែល​ស្គាល់ XML ។

- វា​ធ្វើការ​ទាំង​ជាមួយនឹង HTML Document Object Model (DOM) និង XML DOM

- វា​ងាយស្រួល​ក្នុង​ការមើល​ក្នុង non-browser agents ។

W3C Document Object Model

The Document Object Model (DOM) គឺជា object-oriented របស់ XML និង HTML documents វា​ផ្ដល់​នូវ API សម្រាប់​ធ្វើការ​ផ្លាស់ប្តូរ content, structure និង style នៃ documents ទាំងនោះ ។ ជា​ទូទៅ browser នីមួយៗ​ប្រើ​ប្រាស់ HTML documents ដោយ​ប្រើ Javascript ខុសៗ​គ្នា ។ DOM ត្រូវបាន​បង្កើត​ដោយ World Wide Web Consortium (W3C) ដើម្បី​ផ្ដល់​នូវ​របៀប​ទូទៅ​ក្នុង​ការ​ប្រើ​ប្រាស់ HTML document ដោយ​ប្រើ Javascript ។ DOM ធ្វើការ​បង្ហាញ structure របស់ XML ឬ HTML document ជាឋានានុក្រម (hierarchy) ។

ការ​ប្រើ​ប្រាស់ DOM Methods

Javascript មាន​នូវ API យ៉ាង​ច្រើន​សម្រាប់​ធ្វើការ​ទាក់ទង​ជាមួយនឹង DOM ។ នេះជារបៀប​សំខាន់​ក្នុង​ការ​បង្កើត AJAX application ។

DOM Events

មុខងារ​សំខាន់​មួយទៀតរបស់ DOM គឺធ្វើ​ឲ្យ Javascript អាច​ភ្ជាប់​ទំនាក់ទំនងជាមួយ elements នៅ​ក្នុង web page ។ វាអាច​បង្កើត​ឲ្យ​មាន drag-and-drop ដែល​អាច​ឲ្យ​អ្នក​ប្រើ​ប្រាស់​ទាញ​ផ្នែក​ផ្សេងៗ​របស់គេហទំព័រទៅទីតាំងផ្សេង (វាមាន​លក្ខណៈ​ដូចជា​ការទាញ icon នៅលើ desktop ដូច្នេះដែរ) ។

ការ​បង្ហាញ និងរូបរាងៈ CSS

CSS (Cascading Style Sheets) ផ្ដល់​នូវ​វិធី ដើម្បី​ធ្វើការ​គ្រប់គ្រង​រូបរាងរបស់ elements ក្នុង web application ។ អ្នកអាច​ប្រើ CSS ដើម្បី​ធ្វើការ​ផ្លាស់ប្តូរ​ស្ទើរតែ​គ្រប់​ផ្នែក​ទាំងអស់​របស់គេហទំព័រ​ដូចជា ទំហំ​អក្សរ ពណ៌ គំលាត និង ទីតាំងរបស់ elements ។

​ក្នុង AJAX application CSS ត្រូវបាន​ប្រើ ដើម្បី​បន្ថែម​ភាពទាក់ទាញដល់អ្នក​ប្រើ​ប្រាស់ (ដូចជា​ប្តូរពណ៌ ឬ រូបរាង​នៅពេល​ដែល mouserovers) ។ CSS ត្រូវបាន​ប្រើ​កាន់តែពេញ​និយម​ក្នុង​ការ​បង្កើត website ។

ការទំនាក់ទំនងៈ XMLHttpRequest

XMLHttpRequest គឺជា Javascript class ដែល​ប្រើ​យ៉ាង​ងាយស្រួល​ក្នុង​ការ​បញ្ចូន និង ទទួល HTTP request ពី និង response ទៅ web server ។ XMLHttpRequest class គឺជាតួអង្គ​សំខាន់​ក្នុង​ការ​បង្កើត web application ។ HTTP request បាន​បង្កើត​ជាមួយ XMLHttpRequest នៅពេល​ដែល browser ធ្វើការ request ធម្មតា ដើម្បី load page រឺ submit form ដោយអ្នក​ប្រើ​ប្រាស់​មិនបាន​បិទគេហទំព័រ​ដែល​បាន load ថ្មីៗ ។

Microsoft ដំបូងបាន​បង្កើត XMLHttpRequest ក្នុង Internet Explorer 5 សម្រាប់ Windows ដូចជា ActiveX object ។ Apple បាន​បញ្ចូល XMLHttpRequest ទៅ Safari តាំងពី version 1.2 ។ ចំណែក Mozilla ក៏​បាន​បញ្ចូល XMLHttpRequest ទៅ Firefox តាំងតែពីដំបូង (version 1.0) ដែរ ។

ការ response ពី server ទោះបីជា XML ឬ string ក៏​ដោយ​ក៏​អាច​ធ្វើការ​បញ្ចូន​ទៅ Javascript បានដែរ ។

ការ​ប្រើ​ប្រាស់​បញ្ចូល​គ្នា Javascript

Javascript គឺជា “កាវ” សម្រាប់​ភ្ជាប់​សមាសធាតុរបស់ AJAX បញ្ចូល​គ្នា ។ វាមាន​តួនាទី​ជា​ច្រើន​ក្នុង​ការ​បង្កើត AJAX:

- ត្រួត​ពិនិត្យ HTTP request ដែល​ត្រូវបាន​បង្កើត​ដោយ XMLHttpRequest

- Parsing លទ្ធផល​ដែល​បញ្ចូន​ពី server ដោយការ​ប្រើ DOM method, XSLT, ឬ វិធីសាស្ត្រ​ផ្សេងទៀត​ពឹងផ្អែក​ទៅលើ​របៀប​ដែល​ប្រើ ដើម្បី​ផ្លាស់ប្តូរ​ទិន្នន័យ​

- បង្ហាញ​លទ្ធផល​នៃ​ទិន្នន័យ​ទៅ​ក្នុង user interface, ដោយការ​ប្រើ DOM method ដើម្បី​បញ្ចូល​អត្ថបទ ឬ រូបភាព ទៅ​ក្នុង​គេហទំព័រ ដោយការផ្លាស់ប្តូរ innerHTML របស់ element ឬ ដោយការផ្លាស់ប្តូរ CSS របស់ element

Javascript ជាភាសា programming ដែល​មានតាំងតែពីយូរណាស់មកហើយ វាមាន​នូវ​លក្ខណៈ​ពិសេស​ជា​ច្រើន វាជា dynamic language ដែល​ប្រើ​ប្រាស់ object-oriented programming ។

សង្ខេប

​ក្នុង​អត្ថបទនេះ យើងបាន​ធ្វើការ​ប្រៀបធៀប website ពីមុន និង website ដែល​ប្រើ​ប្រាស់ AJAX ហើយ​បង្ហាញ​ពីភាពល្អ​ប្រសើរ​យ៉ាង​ច្រើន​ក្នុង​ការ​ប្រើ​ប្រាស់ AJAX ។ ហើយអ្នកបានយល់ពីគោលការណ៍ និង ទ្រឹស្តីមួយចំនួនរបស់ AJAX និង បច្ចេកវិទ្យា​ដែល​ចូលរួម​ក្នុង​ការ​បង្កើត AJAX មាន​ដូចជា​ៈ XML, DOM, CSS, XMLHttpRequest និង Javascript ។

.tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;} .tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 ! important;} .ws_toolbar {z-index:100000} .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px} .tb_highlight {background-color:yellow} .tb_hide {visibility:hidden} .ws_toolbar img {padding:2px;margin:0px}

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

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