Skip to Content

JSON, SAP & other AJAX stuff related, Tutorial.


Following my first JSON, SAP & other AJAX stuff related., here a little tutorial, explaining how to use , AJAX, JSON and JSMIN within a BSP.

Using JSMIN to Reduce your JS files.

    Get JSMIN here .

      1. Put JSMIN in a folder

    Get Prototype here .

    Get JSON here .

      1. Put them in the same folder as JSMIN.

    In windows click on Start, then Run, type cmd and click on OK.

    Starting the BSP.

      1. Create a new BSP application, with two pages, display.htm and data.htm.
      2. import prototype_min.js and json_min.js as mime object
      3. create an empty my_handler.js and import it too.
      4. It should look like that:


    Do some HTML.

    In display.htm just do a basic page :

    Do some ABAP.

    Gather some data from a random table and create some JSON :
    text like this :<br>
    <textarea COLS=70 ROWS=10>
    <%@page language=”abap” %>
    DATA I_dude     TYPE zdude. 
    data w_dude type line of Zdude. 
    data w_str type string. 
    CLEAR I_dude. 

    *get data from the table I_dude 
    select *
    into table i_dude 
    from zdude.

    *create the json text into the string w_str 
    concatenate  w_str ‘{ “dude”: [‘  into w_str. 

    data i type i.  i = 0. 

    loop at i_bdude into w_dude. 
         if i gt 0.       
              w_str ‘,’     
              into w_str. 
              ‘”objid”:”‘ w_dude-objid ‘”,’         
              ‘”name”:”‘ w_dude-name ‘”‘         
         into w_str. 
         i = i + 1. 

          w_str ‘] }’ 
    into w_str.

    *display the string w_str%>
    <%= w_str%>


    Do some JavaScript.

    Copy the following code into my_handler.js:

    // a controller object that help us with a nice  window to display a log
    var Controller =

         Controller.console.innerHTML += (message + “



    // what you execute when you run the page display.htm (look at the body tag)
    function Initialise() {

    var url = ‘data.htm’;
    var pars=””;

    //call the data.htm page to get our json object Ajax object comes from prototype
    var myAjax = new Ajax.Request( url, { method: ‘post’, parameters: pars, onComplete: showResponse });


    function showResponse(req) {
    var myObject = JSON.parse(req.responseText);


    function displayDude(dude) {

    //$ is cool isn’t it
    var divDude = $(“dudeid”);
    divDude.innerHtml = « » ;
    //each comes from prototypes too
    dude.besoin.each(function(d){ divDude.innerHtml +=})


    Here you go, now you have made your first AJAX-JSON web application.


    I’m gonna try to stay focus on what’s new with web programming, and show it to you.

    I hope you enjoyed the reading,

    Great day to y’all.

    Be the first to leave a comment
    You must be Logged on to comment or reply to a post.