atifaziz/jayrock+jquery.html

## jayrock+jquery.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Jayrock + JQuery</title>
    <script type="text/javascript" language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://www.raboof.com/projects/jayrock/demo.ashx?proxy"></script>
    <script type="text/javascript" language="javascript">
        var channels = {
            'jquery.get': new JQueryChannel({ cache: true }),
            'jquery.get-nocache': new JQueryChannel({ cache: false }),
            'jquery.jsonp': new JQueryChannel({ jsonp: true })
        };
        var demo = new DemoService();
        demo.channel = channels['jquery.jsonp'];
        demo.kwargs = true; // send args by name

        $(document).ready(function() {
            function dump(response) {
                alert(response.error
                      ? "Oops! " + response.error.message
                      : response.result);
            }
            $('#channel').change(function() {
                demo.channel = channels[this.options[this.selectedIndex].value];
            });
            $('#add').click(function() {
                demo.sum($('#a').val(), $('#b').val(), dump);
            });
            $('#echo').click(function() {
                demo.echo($('#text').val(), dump);
            });
        });

        function JQueryChannel(options) {
            options = options || {};
            this.rpc = function(call) {
                if (call.request.params.constructor === Array)
                    throw new Error('Positional parameters are not supported.');
                var params = [];
                $.each(call.request.params, function(k, v) {
                    if (v) params.push(k + '=' + encodeURIComponent(v));
                });
                var ajax_REQ = $.ajax({
                    url: call.url + '/' + call.request.method,
                    type: 'GET',
                    jsonp: options.jsonp ? 'jsonp' : null,
                    cache: options.cache,
                    data: params.join('&'),
                    dataType: options.jsonp ? 'jsonp' : 'json',
                    timeout: 10000,
                    // TODO error: ...
                    success: function(data) {
                        if (ajax_REQ) { ajax_REQ.abort(); }
                        call.callback(data);
                    }
                });
            }
        }
    </script>
</head>
<body>
    <h1>Jayrock + JQuery Demo</h1>
    <p>Channel:
        <select id="channel">
            <option value="jquery.jsonp" selected="selected">jQuery JSONP (XSS)</option>
            <option value="jquery.get">jQuery XHR GET</option>
            <option value="jquery.get-nocache">jQuery XHR GET (non-caching)</option>
        </select>
    </p>
    <hr />
    <dl>
        <dt>a:</dt>
        <dd><input id="a" value="123" /></dd>
        <dt>b:</dt>
        <dd><input id="b" value="456" /></dd>
    </dl>
    <div><button id="add">Add</button></div>
    <dl>
        <dt>text:</dt>
        <dd><input id="text" value="Welcome to Jayrock!" /></dd>
    </dl>
    <div><button id="echo">Echo</button></div>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
	<title>Jayrock + JQuery</title>
	<script type="text/javascript" language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" language="javascript" src="http://www.raboof.com/projects/jayrock/demo.ashx?proxy"></script>
	<script type="text/javascript" language="javascript">
	var channels = {
	'jquery.get': new JQueryChannel({ cache: true }),
	'jquery.get-nocache': new JQueryChannel({ cache: false }),
	'jquery.jsonp': new JQueryChannel({ jsonp: true })
	};
	var demo = new DemoService();
	demo.channel = channels['jquery.jsonp'];
	demo.kwargs = true; // send args by name

	$(document).ready(function() {
	function dump(response) {
	alert(response.error
	? "Oops! " + response.error.message
	: response.result);
	}
	$('#channel').change(function() {
	demo.channel = channels[this.options[this.selectedIndex].value];
	});
	$('#add').click(function() {
	demo.sum($('#a').val(), $('#b').val(), dump);
	});
	$('#echo').click(function() {
	demo.echo($('#text').val(), dump);
	});
	});

	function JQueryChannel(options) {
	options = options \|\| {};
	this.rpc = function(call) {
	if (call.request.params.constructor === Array)
	throw new Error('Positional parameters are not supported.');
	var params = [];
	$.each(call.request.params, function(k, v) {
	if (v) params.push(k + '=' + encodeURIComponent(v));
	});
	var ajax_REQ = $.ajax({
	url: call.url + '/' + call.request.method,
	type: 'GET',
	jsonp: options.jsonp ? 'jsonp' : null,
	cache: options.cache,
	data: params.join('&'),
	dataType: options.jsonp ? 'jsonp' : 'json',
	timeout: 10000,
	// TODO error: ...
	success: function(data) {
	if (ajax_REQ) { ajax_REQ.abort(); }
	call.callback(data);
	}
	});
	}
	}
	</script>
	</head>
	<body>
	<h1>Jayrock + JQuery Demo</h1>
	<p>Channel:
	<select id="channel">
	<option value="jquery.jsonp" selected="selected">jQuery JSONP (XSS)</option>
	<option value="jquery.get">jQuery XHR GET</option>
	<option value="jquery.get-nocache">jQuery XHR GET (non-caching)</option>
	</select>
	</p>
	<hr />
	<dl>
	<dt>a:</dt>
	<dd><input id="a" value="123" /></dd>
	<dt>b:</dt>
	<dd><input id="b" value="456" /></dd>
	</dl>
	<div><button id="add">Add</button></div>
	<dl>
	<dt>text:</dt>
	<dd><input id="text" value="Welcome to Jayrock!" /></dd>
	</dl>
	<div><button id="echo">Echo</button></div>
	</body>
	</html>