xAjaxSec

Example with JSON encryption with JS application

This exemple use Tabulator, a JS application allowing to create interactive tables in seconds from any HTML Table, JavaScript Array, AJAX data source or JSON formatted data.

With some basic JS knownledge it's easy to adapt any JS application to use xAjaxSec.

In this specific example, the Tabulator AJAX method is not used because it works with non-encrypted JSON data and we need to do some transformation before. It's why the AJAX call is done outside the Tabulator "box" and Tabulator is initialized in a callback function.

JSON data is embeded inside the xAjaxSec snippet, but you can query any MODX resource or database via another snippet.

Here is the content of the Ajax target (resource ID 885):

[[!xAjaxSec? &debug=`0` &cypher=`1` &run=`[{"id":1,"name":"Billy Bob","progress":"12","gender":"male","height":1,"col":"red","dob":"15/07/1983","driver":1},{"id":2,"name":"Mary May","progress":"1","gender":"female","height":2,"col":"blue","dob":"14/05/1995","driver":true},{"id":3,"name":"Christine Lobowski","progress":"42","height":0,"col":"green","dob":"22/05/1982","driver":"true"},{"id":4,"name":"Brendon Philips","progress":"125","gender":"male","height":1,"col":"orange","dob":"01/08/1980"},{"id":5,"name":"Margret Marmajuke","progress":"16","gender":"female","height":5,"col":"yellow","dob":"31/01/1973"}]`]]

The code for this demo:

<script type="text/javascript" src="assets/components/xajaxsec/js/xajaxsec-all-min.js"></script>
<link href="[[++compex]]tabulator/4.5.2/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="[[++compex]]tabulator/4.5.2/js/tabulator.min.js"></script>

<div class="card ct-coderesult">
  <h3 class="card-header">
    Tabulator
  </h3>
  <div class="card-body">
    <div id="example-table"></div>
  </div>
</div>

<div class="ct-btn mt-5 mb-5">
    <a href="[[~888]]" class="btn  xbtn-hviz-green btn-lg"><i class="fa fa-shopping-basket" aria-hidden="true"></i> Get xAjaxSec </a>
</div>

<script>
    var cypher = true;
    var pass="[[++xajaxsec_pass]]";
    $("#get_response_json").on("click",function(){
         $.ajax({
            type: "POST",
            url: "[[~885]]",//protected target
            data: {"k":"[[++xajaxsec_pkey]]"},
            dataType: 'JSON',
            success: function(response){
                $("#result").append(response);
                callback(response);
              }
        });
            
        function callback(response){
            /***************************
             * decrypt and transform the response
             */
            var response = JSON.stringify(response);
            console.log("response (before decoding)  ***********************  ");
            console.log(response);
            $("#result").append(response);//show response (enc)
            var result_dec = CryptoJS.AES.decrypt(response, pass, {format: CryptoJSAesJson}).toString(CryptoJS.enc.Utf8);
            var result_obj = JSON.parse(result_dec);
            console.log("result_obj 1 (PARSE 1) ***********************  ");
            console.log(result_obj);// ---> string
            $("#result_dec").append(result_obj);
            console.log("result_obj 2  (PARSE 2) ***********************  ");
            var result_obj2 = JSON.parse(result_obj);
            console.log(result_obj2);// ---> obj
            
            /*********************
             * Tabulator init
             * http://tabulator.info/
             */
            //create Tabulator on DOM element with id "example-table"
            var table = new Tabulator("#example-table", {
             	height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
             	data:result_obj2, //assign data to table (JSON as object)
             	layout:"fitColumns", //fit columns to width of table (optional)
             	columns:[ //Define Table Columns
            	 	{title:"Name", field:"name", width:150},
            	 	{title:"Progress", field:"progress", align:"left", formatter:"progress"},
            	 	{title:"Favourite Color", field:"col"},
            	 	{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
             	],
             	rowClick:function(e, row){ //trigger an alert message when the row is clicked
             		alert("Row " + row.getData().id + " Clicked!!!!");
             	},
            });

        }
     
    });
    
</script>

You can check in the browser developer tools the response.