�ݺ�ߣ

Agenda
Covered Topic-
JavaScript Remoting for Apex Controllers
In Cloud Computing
Prabhat Gangwar
Software Developer

What is JavaScript Remoting for Apex Controllers?
JavaScript Remoting for Apex Controllers
AJAX request from an apex page to a controller.
Invoke Controller method
Synchronous request to the controller with an asynchronous
response to the page .
A way to separate the page from the controller.
without the need to perform a form submission.
This way to implement light weight visualforce page with faster
responce from database instead using action function.

What are the benefits?
Decouples the page from the controller.
 No Need reloading the entire page.
avoid View-State issue when you use JS remoting because you
will just give request and back the data to the user but not keep it
on the server.

What are the disadvantages?
Decouples the page from the controller.
A basic understanding of javascript is required.
Slightly higher barrier to entry.

How to use JavaScript Remoting for Apex Controllers?
 add the request as a JavaScript invocation with the following form:
Syntax –
[namespace.]controller.method( [parameters...,]callbackFunction, [configuration]);
namespace is the namespace of the controller class.
controller is the name of your Apex controller.
 method is the name of the Apex method you’re calling.
parameters is the comma-separated list of parameters that your method takes.
callbackFunction is the name of the JavaScript function that will handle the
response from the controller . You can also declare an anonymous function inline.
configuration configures the handling of the remote call and response. Use this to
change the behavior of a remoting call .

.
Example 1 - Before any Event
Button will
Invoke
Controller
Method

.
After Event
Result

<apex:page controller="JSRemotingBasicsController" id="page">
<script type="text/javascript">
function getText() {
var text = "";
JSRemotingBasicsController.doGetText(
function(result, event) {
if(event.type === 'exception') {
console.log("exception");
console.log(event);
} else if (event.status) {
alert(result); // here will come ‘welcome to cccinfotech’
text = result;
document.getElementById('{!$Component.page.textResponseApexOutputText}').innerHTML = text;
} else {
console.log(event.message);
}
},
{ buffer: true, escape: true, timeout: 30000}
);
}
</script>
<h2>Simple Javascript Remoting Examples </h2> <br/> <br/>
<button onclick="getText()">Get Static Text</button> <br/>
<apex:outputText id="textResponseApexOutputText"></apex:outputText>
</apex:page>
Visual forcepage

Controller -
global class JSRemotingBasicsController {
public JSRemotingBasicsController() {
}
@RemoteAction
public static String doGetText() {
return 'Welcome to cccinfotech';
}
}
The global access modifier declares that this class is known by
all Apex code everywhere.
 When javaScript Remoting method is called, It
finds @RemoteAction methods in the controller.

Before any Event
Example 2 -

After Event
Example 2 -

<apex:page controller="sample" wizard="true">
<script type="text/javascript">
function getAccountJS()
{
var accountNameJS = document.getElementById('accName').value;
sample.getAccount( accountNameJS,function(result, event)
{
if (event.status)
{
// demonstrates how to get ID for HTML and Visualforce tags
document.getElementById("{!$Component.theBlock.thePageBlockSection.theFirstItem.accId}").innerHTML = result.Id;
document.getElementById("{!$Component.theBlock.thePageBlockSection.theSecondItem.accNam}").innerHTML = result.Name;
}
else if (event.type === 'exception')
{
document.getElementById("errors-js").innerHTML = event.message;
} else
{
document.getElementById("errors-js").innerHTML = event.message;
}
},
);
}
</script>
Account Name :<input id="accName" type="text" />
<button onclick="getAccountJS()">Get Account</button>
<div id="errors-js"> </div>
<apex:pageBlock id="theBlock">
<apex:pageBlockSection id="thePageBlockSection" columns="2">
<apex:pageBlockSectionItem id="theFirstItem">
<apex:outputText id="accId"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="theSecondItem" >
<apex:outputText id="accNam" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
Visualforce Page -

Controller -
public class sample
{
public static Account account { get; set; }
public sample() { }
@RemoteAction
public static Account getAccount(String accountName)
{
account = [select id, name, phone, type, numberofemployees
from Account where name = :accountName ];
return account;
}
}

Configure a remoting request by providing an object.
default configuration parameters look like this:
{ buffer: true, escape: true, timeout: 30000 }
Buffer :
 Boolean Type , The default is true.
This buffering improve the efficiency of the overall request-and-response
cycle.
Escape :
Boolean Type , The default is true.
 Apex method’s response.
Timeout :-
The timeout for the request, in milliseconds.
default is 30000 ms (30 seconds).
 maximum is 120000 (120 seconds, or 2 minutes).
Configuring JavaScript Remoting Requests ?

Maxretries :
 Integer Type
retries for the request when connection errors occur.
The default is 0. The maximum is 3.
new parameter could be as follows ?
 { buffer: true, escape: true, timeout: 30000, maxretries: 2 }
JavaScript Remoting for Apex
Controllers

.
Important about Remote Action ?
JavaScript Remoting for Apex
Controllers
Javascript remoting calls don't count against SOQL Governor limit.

JavaScript Remoting Campare with Action Function ?
Action Funtion
Action Function posts the data. Must need
of form .
 View-State issue
need to ReRender
methods are instance
methods require bandwidth not less
@RemoteAction
communicate with VF page's
controller's methods without posting
your form.
 avoid View-State issue
No need to ReRender
methods are static
methods require less bandwidth

JavaScript Remoting Campare with Action Function ?
Action Funtion
has to transfer the page view state
cannot update the page's view state.
@RemoteAction
Less server processing time,
because only the data you submit is
visible and the view state is not
transferred.
Controller methods can return data
directly back to the calling
JavaScript, cannot update the page's
view state

Visualforce: Using JavaScript Remoting for Apex Controllers

�ݺ�ߣ

Visualforce: Using JavaScript Remoting for Apex Controllers

More Related Content

Visualforce: Using JavaScript Remoting for Apex Controllers