Genii Weblog
REST plus RPC: building the JavaScript for RPC calls
Mon 11 Jan 2021, 10:37 AM
Tweetby Ben Langhinrichs
Continuing on the development challenge outlined in REST plus RPC: Do the demo backward and started in REST plus RPC: the right data in the right format, and no more, this post describes how we can build up the JavaScript necessary to invoke a batch of remote procedure calls with the JSON-RPC format. There are multiple ways to send HTTP requests and get back data in JavaScript. I find it easy to understand fetch, so that is what I am using, but it should be easy to translate to jQuery or Ajax or whatever. In this case, the devil is not in the details, but in the broad picture.
Note: I am not a JavaScript expert. Some of you will know more than I do, or have different ways to accomplish the task. If you'd like, comment and tell me how I could do differently or better.
Remote procedure calls with Exciton Boost use JSON-RPC. I did a Quick primer on JSON-RPC a few months ago if you are want to understand it better, but for our purposes, simply understand that we POST a message with a JSON body in a particular format to call procedure calls, and if an id is specified, we get a return value. There may be an array of methods called sequentially. For example, if I want to get the database title for the ReportIt.nsf database in our proposed demo, I would POST the following:
{
"jsonrpc": "2.0",
"method": "db.getTitle",
"params": null,
"id": 1
}
"jsonrpc": "2.0",
"method": "db.getTitle",
"params": null,
"id": 1
}
and would get back the JSON payload
{
"jsonrpc": "2.0",
"result": "Report It!",
"id": 1
}
Now, let's look at a sample JavaScript fetch way of POSTing that. Since I want to show a sequence of calls, I'll also get the default form.
const getTitle = { jsonrpc: "2.0",
method: "db.getTitle",
params: null,
id: 1
};
const getForm = { jsonrpc: "2.0",
method: "db.getDefaultForm",
params: null,
id: 2
};
function doIt() {
var data = [getTitle,getForm];
var stat = 0;
fetch('/ReportIt.nsf/api/boost/rpc', {
method: 'POST',
mode: 'same-origin',
cache: 'no-cache',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => {stat = response.status; return response.json();})
.then(data => {
if (stat == 200) {
document.getElementById("demo").innerHTML = '<h1>'+data[0].result+'</h1>Default form: '+data[1].result;
} else {
document.getElementById("demo").innerHTML = '<h1>Status: '+stat+'</h1>'+data[0].error.message;
}});
};
For the crude purposes of this demo, I put a button in HTML that sets the value of a div with id='demo'.
<button type="button" style="border-radius: 6px;" onClick="doIt();">Get the database title</button><br>
<p id="demo"></p>
When we put this all together on a demo Page element in our database, we get the following. We can build on this for our demo in the next post.
=> Request a free Exciton Boost eval in January, and if you later purchase a license. we'll add in four hours of development assistance, a $700 value. <=
Copyright © 2021 Genii Software Ltd.
What has been said: