Networking
REST
This is an example managing REST:
<!DOCTYPE html>
<html>
<head>
<!-- This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="canonical" href="https://crossbrowdy.com/examples/networking/rest/try" />
<title>Networking: REST - Example</title>
<!-- Loads the needed CSS files: -->
<link rel="stylesheet" type="text/css" href="main.css" />
<!-- Loads CrossBrowdy.js (main file): -->
<!-- Note: it is recommended to download CrossBrowdy instead of hotlinking the online version. This is just for the example! -->
<script src="https://crossbrowdy.com/CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
<!-- Loads the other needed script files: -->
<script src="main.js" type="text/javascript" language="javascript"></script>
</head>
<body>
Content got for 'my_action':
<br />
<span id="my_action_response"></span>
<br />
<button onClick="call('my_action');">Perform 'my_action'</button><br />
<br />
<button onClick="abort('my_action');">Abort 'my_action'</button><br />
<br />
<br />
Content got for 'my_action_2':
<br />
<span id="my_action_2_response"></span>
<br />
<button onClick="call('my_action_2');">Perform 'my_action_2'</button><br />
<br />
<button onClick="abort('my_action_2');">Abort 'my_action_2'</button>
<br />
<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
<div id="CB_console" style="display:none; visibility:hidden; overflow:scroll;">
<span style="font-weight:bold;">Console:</span><br />
</div>
<div id="crossbrowdy_info"><a href="https://crossbrowdy.com/examples/networking/rest" target="_blank">CrossBrowdy.com example</a></div>
</body>
</html>/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
body { background-color:#aaddee; word-wrap:break-word; }
#crossbrowdy_info { position:fixed; bottom:2px; right:2px; }
#crossbrowdy_info a { color:#00aadd; }
#crossbrowdy_info a:hover { color:#0033aa; }
span#my_action_response, span#my_action_2_response { display:block; color:#ffffff; background-color:#006600; overflow:scroll; height:200px; border:1px red dotted; }
button { color:#006600; }
button:hover { color:#660000; cursor:pointer; cursor:hand; }/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
CB_init(main); //It will call the "main" function when ready.
//This function will be called when CrossBrowdy is ready:
function main()
{
//Defines a REST action called "my_action":
CB_Net.REST.actions["my_action"] =
{
//URL of the REST server:
"serverURL" : "https://crossbrowdy.com", //If not provided, it will use 'CB_Net.REST.SERVER_URL_DEFAULT'.
//Route (path to the resource):
"route" : "/guides?whatever3=whatever3_data", //If provided, it will be attached at the end of the server URL.
//HTTP method to use:
"method" : "GET", //If not provided, it will use 'CB_Net.REST.method_DEFAULT'.
//Data to send:
"data" : //If not provided, it will use 'CB_Net.REST.data_DEFAULT'.
function(actionName, additionalData)
{
//Do things...
var data = "dataItem3=dataItem3_value&whateverItem=whateverItem_value"; //It must return a string as query parameters or a string containing a JSON format object.
return data;
},
//Function to call when the REST action succeeds (ignored if it was aborted on time):
"callbackOk" : //If not provided, it will use 'CB_Net.REST.callbackOk_DEFAULT'.
function(actionName, XHR, callbackError, additionalData)
{
CB_console(actionName + " REST action succeeded! Status code is: " + CB_Net.XHR.getStatusCode(XHR));
CB_console(CB_Net.XHR.getResponseContent(XHR)); //Shows the content received.
},
//Function to call when the REST action fails:
"callbackError" : //If not provided, it will use 'CB_Net.REST.callbackError_DEFAULT'.
function(actionName, XHR, additionalData)
{
CB_console(actionName + " REST action failed! Status code is: " + CB_Net.XHR.getStatusCode(XHR));
}
};
//Defines a REST action called "my_action_2":
CB_Net.REST.actions["my_action_2"] =
{
//URL of the REST server:
"serverURL" : "https://crossbrowdy.com", //If not provided, it will use 'CB_Net.REST.SERVER_URL_DEFAULT'.
//Route (path to the resource):
"route" : "/download?whatever3={{whatever3_wildcard}}", //If provided, it will be attached at the end of the server URL.
//Function that returns an object to replace wildcards in the route:
"routeWildcardData" : //If not provided, it will use 'CB_Net.REST.routeWildcardData_DEFAULT'.
function(actionName, additionalData)
{
//Do things...
return { "whatever3_wildcard" : "whatever3_data" }; //It must return an object to match wildcard name and wildcard value to replace.
},
//HTTP method to use:
"method" : "GET", //If not provided, it will use 'CB_Net.REST.method_DEFAULT'.
//Data URL to send:
"dataURL" : //If not provided, it will use 'CB_Net.REST.dataURL_DEFAULT'.
function(actionName, additionalData)
{
//Do things...
return "url_data1=value1&url_data2=value2"; //It must return a string which will be query parameters.
},
//Data to send:
"data" : //If not provided, it will use 'CB_Net.REST.data_DEFAULT'.
function(actionName, additionalData)
{
//Do things...
var data = "dataItem3=dataItem3_value&whateverItem=whateverItem_value"; //It must return a string as query parameters or a string containing a JSON format object.
return data;
},
//Define the headers to send:
"headers" : //If not provided, it will use 'CB_Net.REST.headers_DEFAULT'.
function(actionName, additionalData)
{
//Do things...
return {
"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8" //It must return an object with the headers and their value.
};
},
//Response type expected:
"responseType" : null, //If not provided, it will use 'CB_Net.REST.responseType_DEFAULT' (unless it is set to null).
//Defines whether to avoid using proxy or not:
"avoidProxy" : false, //If not provided, it will use 'CB_Net.REST.avoidProxy_DEFAULT'.
//Defines whether to force JSON in the response from the proxy or not:
"forceJSON" : false, //If not provided, it will use 'CB_Net.REST.forceJSON_DEFAULT' (unless it is set to null).
//Defines whether to get headers from the proxy in the response or not:
"getHeaders" : false, //If not provided, it will use 'CB_Net.REST.getHeaders_DEFAULT' (unless it is set to null).
//Defines whether the proxy should return the headers in one dimension or not:
"getHeadersOneDimension" : false, //If not provided, it will use 'CB_Net.REST.getHeadersOneDimension_DEFAULT' (unless it is set to null).
//Defines whether the proxy should return the value of the headers in one dimension or not:
"getHeadersOneDimensionValues" : false, //If not provided, it will use 'CB_Net.REST.getHeadersOneDimensionValues_DEFAULT' (unless it is set to null).
//Defines whether the proxy (if used) should forward the headers transparently or not:
"transparentHeaders" : false, //If not provided, it will use 'CB_Net.REST.transparentHeaders_DEFAULT' (unless it is set to null).
//Defines whether the proxy (if used) should forward the HTTP status transparently or not:
"transparentStatus" : true, //If not provided, it will use 'CB_Net.REST.transparentStatus_DEFAULT' (unless it is set to null).
//Function called before performing the REST action to decide whether to proceed or not:
"callbackBefore" : //If not provided, it will use 'CB_Net.REST.callbackBefore_DEFAULT'.
function(actionName, additionalData)
{
//Do things...
return true; //Must return true if we want to perform the action or false otherwise.
},
//Defines the HTTP status from the response to consider it a successful call:
"allowedSuccessStatuses" : [ 200, 201 ], //If not provided, it will use 'CB_Net.REST.allowedSuccessStatuses_DEFAULT'.
//Function to call when the REST action succeeds (ignored if it was aborted on time):
"callbackOk" : //If not provided, it will use 'CB_Net.REST.callbackOk_DEFAULT'.
function(actionName, XHR, callbackError, additionalData)
{
CB_console(actionName + " REST action succeeded! Status code is: " + CB_Net.XHR.getStatusCode(XHR));
CB_console(CB_Net.XHR.getResponseContent(XHR)); //Shows the content received.
},
//Function to call when the REST action fails:
"callbackError" : //If not provided, it will use 'CB_Net.REST.callbackError_DEFAULT'.
function(actionName, XHR, additionalData)
{
CB_console(actionName + " REST action failed! Status code is: " + CB_Net.XHR.getStatusCode(XHR));
}
};
//Sets a permanent "callbackOk" that will be used always (used before the one from the action or the default one):
CB_Net.REST.callbackBefore_PERMANENT =
function(actionName, XHR, callbackError, additionalData)
{
CB_Elements.insertContentById(actionName + "_response", "Loading...");
};
//Sets a permanent "callbackOk" that will be used always (used before the one from the action or the default one):
CB_Net.REST.callbackOk_PERMANENT =
function(actionName, XHR, callbackError, additionalData)
{
CB_Elements.insertContentById(actionName + "_response", "[OK] [status=" + CB_Net.XHR.getStatusCode(XHR) + "] Response: " + escapeHTML(CB_Net.XHR.getResponseContent(XHR)));
};
//Sets a permanent "callbackError" that will be used always (used before the one from the action or the default one):
CB_Net.REST.callbackError_PERMANENT =
function(actionName, XHR, additionalData)
{
CB_Elements.insertContentById(actionName + "_response", "[ERROR] [status=" + CB_Net.XHR.getStatusCode(XHR) + "] Response: " + escapeHTML(CB_Net.XHR.getResponseContent(XHR)));
};
}
//Performs the desired REST action:
var XHRs = { "my_action" : null, "my_action_2" : null }; //It will store the used XHR objects.
function call(actionName)
{
//If it was aborted, tries to cancel the REST action abortion:
if (CB_Net.REST.actionIsAborted(XHRs[actionName]))
{
CB_console("XHR for the " + actionName + " action was aborted. Tries to cancel abortion...");
CB_Net.REST.actionAbortCancel(XHRs[actionName]);
}
//Performs the REST action through the default proxy server (defined in 'CB_Configuration.CrossBase.CB_Net_XHR_PROXY_URL'):
var additionalData = {"additional_data" : "whatever"};
XHRs[actionName] = CB_Net.REST.actionProcess(actionName, additionalData, XHRs[actionName]); //It also sends additional data (this is optional) that will be useful for all the callbacks.
}
//Aborts the given XHR call:
function abort(actionName)
{
XHR = XHRs[actionName];
if (!XHR) { CB_console("XHR not available! Cannot be aborted."); }
//Aborts the REST action (marks it as aborted):
CB_Net.REST.actionAbort(XHR);
//Checks whether the action has been marked as aborted or not:
if (CB_Net.REST.actionIsAborted(XHR))
{
CB_console("Action was marked as aborted!");
CB_Elements.appendContentByIdBeginning(actionName + "_response", "[ABORTED] "); //Appends the text at the beginning of its content.
//CB_Elements.insertContentById(actionName + "_response", "[ABORTED] " + CB_Elements.id(actionName + "_response").innerHTML);
}
else { CB_console("Action was not marked as aborted!"); }
}
//Escapes HTML code (just a little):
function escapeHTML(code)
{
return (code + "").replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.
All the examples together can be downloaded here.
