この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

JavaScript Remoting の例

Visualforce ページでの JavaScript Remoting の使用方法の基本的なサンプルを次に示します。

まず、次のように AccountRemoter という Apex コントローラを作成します。

1global with sharing class AccountRemoter {
2
3    public String accountName { get; set; }
4    public static Account account { get; set; }
5    public AccountRemoter() { } // empty constructor
6    
7    @RemoteAction
8    global static Account getAccount(String accountName) {
9        account = [SELECT Id, Name, Phone, Type, NumberOfEmployees 
10                   FROM Account WHERE Name = :accountName];
11        return account;
12    }
13}

@RemoteAction アノテーション以外、これは他のコントローラ定義と同じように見えます。

このリモートメソッドを使用するためには、次のような Visualforce ページを作成します。

1<apex:page controller="AccountRemoter">
2    <script type="text/javascript">
3    function getRemoteAccount() {
4        var accountName = document.getElementById('acctSearch').value;
5
6        Visualforce.remoting.Manager.invokeAction(
7            '{!$RemoteAction.AccountRemoter.getAccount}',
8            accountName, 
9            function(result, event){
10                if (event.status) {
11                    // Get DOM IDs for HTML and Visualforce elements like this
12                    document.getElementById('remoteAcctId').innerHTML = result.Id
13                    document.getElementById(
14                        "{!$Component.block.blockSection.secondItem.acctNumEmployees}"
15                        ).innerHTML = result.NumberOfEmployees;
16                } else if (event.type === 'exception') {
17                    document.getElementById("responseErrors").innerHTML = 
18                        event.message + "<br/>\n<pre>" + event.where + "</pre>";
19                } else {
20                    document.getElementById("responseErrors").innerHTML = event.message;
21                }
22            }, 
23            {escape: true}
24        );
25    }
26    </script>
27
28    <input id="acctSearch" type="text"/>
29    <button onclick="getRemoteAccount()">Get Account</button>
30    <div id="responseErrors"></div>
31
32    <apex:pageBlock id="block">
33        <apex:pageBlockSection id="blockSection" columns="2">
34            <apex:pageBlockSectionItem id="firstItem">
35                <span id="remoteAcctId"/>
36            </apex:pageBlockSectionItem>
37            <apex:pageBlockSectionItem id="secondItem">
38                <apex:outputText id="acctNumEmployees"/>
39            </apex:pageBlockSectionItem>
40        </apex:pageBlockSection>
41    </apex:pageBlock>
42</apex:page>

このマークアップについては、次の点に注意してください。

JavaScript は、明示的な invokeAction Remoting コールを使用し、$RemoteAction グローバル変数を活用してリモートアクションメソッドの正しい名前空間を解決します。
event.status 変数は、コールが成功した場合にのみ true になります。この例で示したエラー処理は意図的に単純にしてあり、エラーメッセージとスタック追跡が、event.message 値と event.where 値からそれぞれ出力されます。要求でメソッドコールが成功しない場合は、これに代わるさらに強固なロジックを実装することをお勧めします。
result 変数は、Apex の getAccount メソッドから返されるオブジェクトを表します。
プレーン HTML 要素の DOM ID へのアクセス方法は単純で、項目の ID を使用するだけです。
ID が一意になるようにするために、Visualforce コンポーネントの DOM ID は動的に生成されます。上記のコードでは、$Component グローバル変数を介してコンポーネントにアクセスすることによってその ID を取得するために、「$Component を使用した JavaScript からのコンポーネントの参照」で説明した方法を使用しています。

Visualforce 開発者ガイド

JavaScript Remoting の例