Ajax ගැන ඉතා සරලවම කිව්වොත්, මෙය web page එක reload නොකරම දත්ත හුවමාරු කරවීමයි. ඒ කියන්නේ
 |
| https://blog.arvixe.com/opencart-create-ajax-function/ ඇසුරින් |
- Reload නොකර web page එක update කිරීමට
- Load වී තිබියදී data, request(ඉල්ලීමට) කිරීමට
- Load වී තිබියදී data, receive(ලබාගැනීමට) කිරීමට
- පසු තලයේ දීම සර්වරයට දත්ත යැවීමට
Asynchronous JavaScript + XML කෙටී වී Ajax යන්න ගොඩනැගී තිබෙනවා. මෙය තේරුම් ගැනීම ඉතා අමාරු දෙයක් නොවේ. Asynchronous(අසමමුහූර්තක) වලින් කියන්නේ අනෙක් process අවසන් වනතුරු නොහිද දත්ත process කරවීමයි.
Ajax හීදි පහත.
Ajax හීදි පහත.
- AJAX හා JavaScript සමග XHTML, CSS යොදාගනිමින් වෙබ් පිටුවට ගතික අන්තර් ගතයක් ලබාදෙන්න පුලුවන්.
- සාම්ප්‍රදායික වෙබ් යෙදුම් synchronous requests භාවිතයෙන් සර්වරයට තොරතුරු යැවීම හා සර්වරයෙන් ලබාගැනීමට. ඒ කියන්නේ form එක fill කරලා submit ක්ලික් කළාම අලුත් තොරතුරු අඩංගු නව පිටුවක් load කරවීමයි. නමුත් Ajax භාවිතා වන විට JavaScript වලින් request එකක් සාදා සර්වරයට යවා, දත්ත කියවා පවතින පිටුව යාවත්කාලීන කරවයි. සක්සුදක් සේ කිව්වොත් පරිශීලකයා යවන දත්ත හුවමාරු වනවද කියලත් පරිශීලකයා කිසිදාකවත්
- Server එකෙන් දත්ත ලබාගැනීමට යොදාගැනෙන්නේ XML(Extensible Markup Language). මීට අමතරව plain text ඇතුළත් ව ඕනෑම format එකක දත්ත හුවමාරු කළහැක.
- AJAX, web browser හි තාක්ෂණක් වන අතර එය web server මෘදුකාංග වලින් ස්වායත්ව වේ.
- request එක යවා අපසු server එකෙන් එන තෙක් user ට තමන්ගේ කාර්යය දිගටම කරගෙන යා හැක.
- නූතන web browser සියල්ලෙම ක්‍රියත්මක වේ.
XMLHttpRequest Object
AJAX හිදී XMLHttpRequest Object භාවිතා කරන්නේ දත්ත server එකත් එක්ක හුවමාරු කරගැනීම සදහායි.
XMLHttpRequest එකක් සෑදීම
නව browser සදහා
variable = new XMLHttpRequest();
පැරැණි IE5 හා IE6
variable = new ActiveXObject("Microsoft.XMLHTTP");
Domains හරහා ප්‍රවේශ වීම
ආරක්ෂක හේතුන් මත නව browser, domains හරහා ප්‍රවේශ වීමට ඉඩ ලබා නොදේ. එයින් අදහස් වන්නේ web page හා load කිරීමට උත්සහ දරන XML file එක එකම සර්වරයක තිබිය යුතු බවයි.
භාවිතා කරන browser එක අනුව හැදෙන request එක handle කළ යුතු වේ.
if (window.XMLHttpRequest) {
// code for modern browsers xmlhttp = new XMLHttpRequest();
} else {
// code for old IE browsers xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// code for modern browsers xmlhttp = new XMLHttpRequest();
} else {
// code for old IE browsers xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest Object එකට අදාළ Methods
new XMLHttpRequest()
නව XMLHttpRequest object එකක් නිර්මාණය කිරීමට.
abort()
පවතින request එක cancel කිරීමට
getAllResponseHeaders()
header එකේ තොරතුරු ලබා දේ
getResponseHeader()
එක් සුවිශේෂි වු header එකක තොරතුරු ලබා දේ
open(method,url,async,user,psw)
request එක අර්ථ දැක්වීමට
- method: request එකේ type එක GET ද POST ද කියන එක
- url: file එකේ location එක. නැතිනම් ලිනක් එක
- async: true (asynchronous) ද false (synchronous) ද කියන එක
- user: optional user name එක
- psw: optional password එක
send()
GET සදහා request එක සර්වරයට යැවීම
send(string)
POST සදහා request එක සර්වරයට යැවීම
setRequestHeader()
යවන්න හදන request එකට header එකට label/value යුගලයක් එකතු කිරීමට.
XMLHttpRequest Object එකට අදාළ Properties
onreadystatechange
readyState එකේ property වෙනස් වීම් වෙන කොට call කිරීමට function එකක් නිර්මාණය කිරීමට.
readyState
XMLHttpRequest එකේ තත්වය රදවා ගනී. තත්වය 5ක් පවති.
0: request එක initialize කරලා නැත
1: server එකේ connection ස්ථාපිත වී තිබේ.
2: request එක බාර ගත්තා
3: request එක සැකසීමේ ක්‍රියාවලියක
4: request එක අවසනයි response සූදානම්
responseText
response එකේ data, string එකක් ලෙස ලබා දේ
responseXML
response එකේ data, XMLඑකක් ලෙස ලබා දේ
status
request එකේ තත්වය සංඛ්‍යාත්මක ලෙස ලබාදේ. එනම් HTTP Status Messages හි අගයන්
200: "OK"
403: "Forbidden"
404: "Not Found"
statusText
status එක textඑකක් ලෙස ලබා දේ්. උදා "OK","Not Found"
