[ NG ] Apex RemoteAction & jQuery $.ajax

01_jQueryDeferredDemo.page

<apex:page controller="jQueryDeferredDemoController" sidebar="false">    
    <apex:includeScript value="https://code.jquery.com/jquery-2.2.3.min.js" />
    <apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    <apex:include pageName="jQueryDeferredDemoCss" />
    <div id="vf-page" class="slds">
        <div xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <apex:form id="form">
                <button class="slds-button slds-button--brand" id="submitBtn">Demo</button>
                <div class="view-panel box-shadow slds-m-top--small">
                  <div id="target"></div>
                </div>
            </apex:form>
        </div>
    </div>
    <apex:include pageName="jQueryDeferredDemoScript" />
</apex:page>

02_jQueryDeferredDemoScript.page

<apex:page >
    <script type="text/javascript">
    	var $j =jQuery.noConflict();
        $j(function() {
            
            // 待機用関数
            var wait = function() {
                var d = $j.Deferred();
            
                // 500msec 待つ
                setTimeout(function() {
                  d.resolve();
                }, 500);
            
                return d.promise();
            };
            
            $j("#submitBtn").click(function() {
                $j.ajax( remoteActionGetText1() ).then(function(data) {
                    console.log(data);
                    //$j("<div>").text(data).appendTo("#target");
                })
                .then(wait)
                .then(function() {
                  return $j.ajax(remoteActionGetText2());
                })
                .then(function(data) {
                    //$j("<div>").text(data).appendTo("#target");
                })
                return false;
            });
        });
    
    	function remoteActionGetText1() {
            var defer = $j.Deferred();
            jQueryDeferredDemoController.getText1(
                function(result, event){
                    if (event.status) {
                        console.log('-- $j.Deferred() : remoteActionGetText1 --');
                        console.log(result);
                        defer.resolve(result);
                    } else {
                        console.log('-- [ERROR] : remoteActionGetText1 --');
                        defer.reject(event);
                    }
                },
                { buffer: true, escape: true, timeout: 30000 }
            );
            
            return defer.promise;
        }
    
    	function remoteActionGetText2() {
            var defer = jQuery.Deferred();
            jQueryDeferredDemoController.getText2(
                function(result, event){
                    if (event.status) {
                        console.log('-- $j.Deferred() : remoteActionGetText2 --');
                        console.log(result);
                        defer.resolve("result");
                    } else {
                        console.log('-- [ERROR] : remoteActionGetText2 --');
                        defer.reject(event);
                    }
                },
                { buffer: true, escape: true, timeout: 30000 }
            );
            
            return defer.promise;
        }
    </script>
</apex:page>

03_jQueryDeferredDemoController.cls

public with sharing class jQueryDeferredDemoController {
    
    public jQueryDeferredDemoController() {

    }

    @RemoteAction
    public static String getText1() {
        return '吾輩は猫である。';
    }
    
    @RemoteAction
    public static String getText2() {
        return '名前はまだない。';
    }
}