Module 1: Ajax සහ Live Data හැඳින්වීම

Ajax යනු කුමක්ද සහ එය නවීන වෙබ් අඩවි සඳහා වැදගත් වන්නේ ඇයි දැයි ඉගෙන ගනිමු.

Ajax යනු කුමක්ද? (What is Ajax?)

Ajax යනු Asynchronous JavaScript and XML යන්නෙහි කෙටි නාමයයි. සරලවම කිවහොත්, වෙබ් පිටුවක් සම්පූර්ණයෙන්ම refresh නොකර server එක සමඟ පසුබිමින් දත්ත හුවමාරු කර ගැනීමට ඉඩ සලසන තාක්ෂණයකි.

ඔබ Facebook, Google Maps, හෝ Gmail භාවිතා කරන විට, පිටුව refresh නොවී නව දත්ත (new posts, map sections, new emails) දිස්වන ආකාරය දැක ඇති. මේ සියල්ල ක්‍රියාත්මක වන්නේ Ajax මගිනි.


Ajax වැදගත් වන්නේ ඇයි? (Why is Ajax Important?)

  • වඩා හොඳ පරිශීලක අත්දැකීමක් (Better User Experience): පිටුව සම්පූර්ණයෙන් නැවත පූරණය (reload) වන තෙක් බලා සිටීමට අවශ්‍ය නැත. වෙනස් විය යුතු කොටස පමණක් යාවත්කාලීන වේ.
  • වේගවත් ප්‍රතිචාර (Faster Response): අවශ්‍ය දත්ත පමණක් server එකෙන් ඉල්ලන නිසා, වෙබ් අඩවිය වේගවත් වේ.
  • අන්තර්ක්‍රියාකාරීත්වය (Increased Interactivity): Live search, auto-complete suggestions, live notifications වැනි අංග නිර්මාණය කිරීමට හැකිවේ.

Ajax ක්‍රියාත්මක වන ආකාරය (How Ajax Works)

Ajax ක්‍රියාවලිය සරල පියවර කිහිපයකින් සමන්විත වේ:

  1. Event එකක් සිදුවේ (An event occurs): පරිශීලකයෙක් බොත්තමක් ක්ලික් කිරීම, form එකක් submit කිරීම හෝ search box එකක ටයිප් කිරීම වැනි ක්‍රියාවක් සිදු කරයි.
  2. JavaScript මගින් Request එකක් නිර්මාණය වේ (A request is created): JavaScript හි XMLHttpRequest object එකක් මගින් server එකට යැවිය යුතු request එකක් නිර්මාණය කරයි.
  3. Request එක Server එකට යැවේ (Request sent to the server): මෙම request එක පසුබිමින් (in the background) server එක වෙත යවනු ලැබේ.
  4. Server එක Request එකට ප්‍රතිචාර දක්වයි (Server responds): Server එක (උදා: PHP script එකක්) දත්ත සමුදායෙන් (database) අවශ්‍ය දත්ත ලබාගෙන XML, JSON හෝ HTML ආකාරයෙන් ප්‍රතිචාරයක් (response) එවයි.
  5. ප්‍රතිචාරය නැවත පිටුවට ලැබේ (Response is received): JavaScript මගින් එම ප්‍රතිචාරය ලබාගෙන, වෙබ් පිටුවේ අවශ්‍ය කොටස පමණක් යාවත්කාලීන (update) කරයි.
Ajax Flowchart

මෙම පාඨමාලාවේදී අප ඉගෙන ගන්නේ කුමක්ද?

මෙම පාඨමාලාව අවසානයේ, ඔබට කිසිදු page reload එකකින් තොරව දත්ත ඇතුළත් කිරීමට (insert), ප්‍රදර්ශනය කිරීමට (view), යාවත්කාලීන කිරීමට (update) සහ මැකීමට (delete) හැකි සම්පූර්ණ Live CRUD (Create, Read, Update, Delete) යෙදුමක් නිර්මාණය කිරීමට හැකිවනු ඇත.