Remote Action in salesforce

Remote action function in salesforce allows user to access any method from any class
through javascript methods, and get the result as a javascript object for further manipulation.

points to remember while implementing remote action function :

1.Remote action method should have @RemoteAction annotation.
2.The method should also be Global and static.

ex :

global with sharing class AccountRemoteActionController {

    public String accountName { get; set; }
    public static Account account { get; set; }
    //Default Constructor..
    public AccountRemoteActionController() {
   
    }
   
    @RemoteAction
    global static Account getAccount(String accountName)
    {
        account = [select id, Name from Account where Name = :accountName LIMIT 1 ];
        return account;
    }
}



<apex:page docType="html-5.0" controller="AccountRemoteActionController"> 
    <apex:form>
         <script type="text/javascript">
    function getAccountJS()
    {
        // get the value and save in variable
    var varAccName=document.getElementById('MyAccountName').value;
     
        // check account name enetered or not
      if(varAccName=='' || varAccName==null)
        {
         alert('Please enter account name');
        }
        else
            {
           AccountRemoteActionController.getAccount( varAccName,function(result,event)
                                                    {
                                                   
                                                    if(event.status)
                                                        {
                 document.getElementById("{!$Component.TheAccontBlock.TheAccountPageBlockSection.TheFirstItem.accID}").innerHTML = result.Id;
                document.getElementById("{!$Component.TheAccontBlock.TheAccountPageBlockSection.TheSecondItem.accName}").innerHTML = result.Name;
                                                                                           
                                                        }
else if(event.type='exception')
    {
    document.getElementById("error-js").innerHTML = event.message;
    }
     else
         {
          document.getElementById("error-js").innerHTML ='No Account Record Found';
         }                                                   
    },{escape:true});
           
            }
    }
    </script>
        Enter Account Name   <input type="text" id="MyAccountName"/>
        <button id="btnGetAccount" onclick="getAccountJS()">Get Account Name           
        </button>
        <div id="error-js">           
        </div>
        <apex:pageBlock id="TheAccontBlock">
        <apex:pageBlockSection id="TheAccountPageBlockSection" columns="2">
            <apex:pageBlockSectionItem id="TheFirstItem">
               <apex:outputText id="accID"></apex:outputText>
            </apex:pageBlockSectionItem>
             <apex:pageBlockSectionItem id="TheSecondItem">
                 <apex:outputText id="accName"></apex:outputText>
            </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form> 
</apex:page>


global with sharing class OpportunityRemoteActionController {
      public Opportunity opp{get;set;}
      public String stageName{get;set;} 

      public OpportunityRemoteActionController() {
         
      }
       
      public List<SelectOption> getOptions() {
          List<SelectOption> options = new List<SelectOption>();
          Schema.DescribeFieldResult fieldResult = Opportunity.StageName.getDescribe();
          List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
          options.add(new SelectOption('--Select--', '--Select--'));
         for( Schema.PicklistEntry f : ple)
         {       
          options.add(new SelectOption(f.getLabel(), f.getValue()));
         } 
         return options;
      }     

      @RemoteAction
      global static List<Opportunity> getOpportunityDetails(String stageNameDet) {       
             List<Opportunity> opp= [select id,Name,Amount,stageName from Opportunity WHERE stageName =: stageNameDet];       
          return opp;
      }

}


<apex:page controller="OpportunityRemoteActionController" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function getStageJS(){
 var oppStage= document.getElementById("{!$Component.theFm.oppStage}").value; 
  OpportunityRemoteActionController.getOpportunityDetails( oppStage,
    function(result, event){   
         var html = '<table with="100%" border="thick solid">';
          html = html + '<caption><b>Opportunity Details</b></caption><tr></tr>';
          html = html + '<tr><th>Opportunity Name</th>';
          html = html + '<th>Amount</th> </tr>';
         if (event.status && event.result) {                 
          for (var prop in event.result) {         
          html = html + '<tr><td>'+event.result[prop].Name+'</td> <td>'+event.result[prop].Amount+'</td></tr> ';
      }     
       html = html + '</table>';   
            $("#opportunityDetails").html(html);
           
      } else {
             alert(event.message);
      }

}, {escape:true});
}
 </script>
   <div align="center" width="550px">
      <apex:form id="theFm">
        <apex:selectList value="{!stageName}" size="1" id="oppStage" onchange="getStageJS()">
         <apex:selectOptions value="{!options}"/>
         </apex:selectList>
      </apex:form>
   </div>
   <br/>
   <br/>
   <div id="opportunityDetails" align="center">
         <!-- Opportunity details is displayed here. -->
   </div>
</apex:page>