如何使用 JavaScript Remoting

JavaScript Remoting 是什么?

JavaScript Remoting 是一个可以用来做异步处理的工具，开发者可以用它从 Visualforce page 到 Apex controller 做 AJAX 请求。JavaScript remoting 允许做异步事件处理的时候，而不需要加载整个页面。

另外，使用 JavaScript remoting 还能帮助我们减轻 view state 的问题。

什么时候使用 JavaScript Remoting

在 mobile 页面和页面上用第三方 JavaScript 库的时候优先考虑 JavaScript remoting。它可以使页面操作起来更具有动态的、交互式的响应。

JavaScript Remoting Example

接下来我们做一个基本的例子，怎样在 Visualforce Page 中使用 JavaScript remoting。

首先，创建一个 Apex Controller, 名字是 AccountRemoter:

global with sharing class AccountRemoter  
{
    @RemoteAction
    global static Account getAccount(String name)
    {
        account = [select NumberOfEmployees 
                   from Account where Name = :name];
        return account;
    }
}

除了在方法 getAccount 加了 @RemoteAction 注释以外，它看起来像一个 Apex Controller。

利用这个 remoting 方法，创建一个 Visualforce page:

<apex:page controller="AccountRemoter">  
  <script type="text/javascript">
  function getRemoteAccount() {
    var accountName = document.getElementById('acctSearch').value;

    Visualforce.remoting.Manager.invokeAction(
      '{!$RemoteAction.AccountRemoter.getAccount}',
      accountName, 
      function(result, event){
        if (event.status) {
          // Get DOM IDs for HTML and Visualforce elements like this
          document.getElementById('remoteAcctId').innerHTML = result.Id
          document.getElementById(
            "{!$Component.block.blockSection.secondItem.acctNumEmployees}"
            ).innerHTML = result.NumberOfEmployees;
        } else if (event.type === 'exception') {
          document.getElementById("responseErrors").innerHTML = 
            event.message + "<br/>\n" + event.where;
        } else {
          document.getElementById("responseErrors").innerHTML = event.message;
        }
      }, 
      {escape: true}
    );
  }
  </script>

  <input id="acctSearch" type="text"/>
  <button onclick="getRemoteAccount()">Get Account</button>
  <div id="responseErrors"></div>

  <apex:pageBlock id="block">
    <apex:pageBlockSection id="blockSection" columns="2">
      <apex:pageBlockSectionItem id="firstItem">
        <span id="remoteAcctId"/>
      </apex:pageBlockSectionItem>
      <apex:pageBlockSectionItem id="secondItem">
        <apex:outputText id="acctNumEmployees"/>
      </apex:pageBlockSectionItem>
    </apex:pageBlockSection>
  </apex:pageBlock>
</apex:page>  

Get Account button 执行分析

• 调用 getRemoteAccount() JavaScript 方法。
• 获取 acctSearch 输入的值。
• JavaScript 使用了 invokeAction remoting call, 并利用$RemoteAction 来找到正确的 remote action method。
• 把获取到的 acctSearch 值作为一个参数传递到 remote action method。
• 如果方法成功执行，event.status 返回 true, 并且把 Account Id 和 Account 的 acctNumEmployees 值显示到页面上。
• 如果 event.status 返回 false, 或者返回的是 exception, 将把错误信息显示到 responseErrors 块中。

RemoteAction 执行成功

在 Salesforce 中创建一条 Name 是 Meginfo 的 Account 记录。然后打开上面创建的 Visualforce page, 你将看到一个输入框和一个 button。在输入框中输入 Meginfo 之后，单击 Get Account button。后台将执行 remoting 方法并获取该记录的 ID，然后显示它到页面上。感受一下速度，是不是非常的快。

RemoteAction 有异常

如果输入框中输入的文本在后台方法中找不到对应的 Account 记录，将返回一个异常信息并显示到页面上。

结语

JavaScript Remoting 最大的信息长度是1000000个字符。如果超出这个长度将返回一个异常信息，"Input too long. [0, 1000000]"。另外，在 Salesforce 中除了使用 JavaScript Remoting 做异步处理外，还可以使用 Action Function 功能。如果有人想要了解更多关于 Action Function 的信息可以访问此链接: apex:actionFunction