AJAX තනියෙන් ඉගෙනගන්න - 3

මම හිතනවා ඔයගොල්ලන්ට AJAX ගැන තරමක දැනුමක් ලැබෙන්න ඇති කියලා...
දැන් අපි  දැනට කරපු උදාහරණ වලට පොඩි කොටසක් එකතු කරලා අපේ Web Page එක ලස්සන (add Some Professional look) කරගමු.

User button එක click කරලා server එකෙන් data එනකන් බලන් ඉන්න උනොත්?
(Due to Traffic on Server / Speed of Internet Connection)
සමහරවිට User  හිතයි එක crash/stuck වෙලාකියලා..

ඒකට තියන විසදුම  තමයි Loading..... කියලා  user ට පෙන්නන එක.

ඔක්කෝටම කලින් අපි  අපේ Page එක තවම Data Loaging... කියලා අගවන *.gif File එකක් හදමු.
http://www.ajaxload.info/ එකෙන් කැමති විදිහක Loaging... Gif එකක් හදාගන්න පුලුවන් .

 මේ වගේ එකක් හොදයි.

ඊට පස්සේ කරන්නේ මේ කේත කොටස අපේ *.Html File එකේ අවශ්‍ය තැනින් දාගන්නවා

<img  style="visibility:hidden" src="myLoader.gif"/>

මේක image tag එකක්. හැබැයි එක hidden කරලයි තියෙන්නේ. අපි කරන්න හදන්නේ අපේ javascript එකෙන් ඒ image එක visible කරන්න.

 src="myLoader.gif" එකට අපේ gif එක save කරගත්තු path එක දෙන්න.

දැන් javascript එක බලමු.

function grabData(val){

  if( myObj){     

document.getElementById('loading').style.visibility='visible'; // show gif

    var source='grabData2.php?val='+val+"&u="+Math.random();  

    myObj.open('GET',source);  

    myObj.onreadystatechange=function(){
       
        if(myObj.readyState == 4 && myObj.status == 200){
            document.getElementById('cust').innerHTML=myObj.responseText;

            document.getElementById('loading').style.visibility='hidden'; //hide gif

            }
        }

        myObj.send();
  }
}
 මේ function එක ඔයාලට මතක ඇති. ඒකේ අලුතින් add  කරලා තියන code line දෙක බලන්න.

දැන් හරි. web page එක refresh කරලා බලන්න.

දැන‍ට කරපු උදාහරණ ‍වල updated virsion මෙතනින් ගන්න.

View Example : http://chikugossip.noads.biz/updates/ajax/ajax-sam.html
Download Sample_0

View Example :http://chikugossip.noads.biz/updates/ajax1/ajax-sam1.html
Download Sample_1

View Example : http://chikugossip.noads.biz/updates/ajax2/ajax-sam2.html
Download Sample_2

(Special Thanks to www.kuppiya.com)

----------//-----------