Skip to Content


Introduction.


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.
    image


    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:


    image


    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.       
              concatenate    
              w_str ‘,’     
              into w_str. 
         endif. 
         
         concatenate 
              w_str
              ‘{‘         
              ‘”objid”:”‘ w_dude-objid ‘”,’         
              ‘”name”:”‘ w_dude-name ‘”‘         
              ‘}’ 
         into w_str. 
         
         i = i + 1. 
    endloop. 

    concatenate
          w_str ‘] }’ 
    into w_str.

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

    </textarea>
    <br>


    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);
    displayDude(myObject);

    }

    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 += d.name})

    }

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


    Next.


    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.

    To report this post you need to login first.

    Be the first to leave a comment

    You must be Logged on to comment or reply to a post.

    Leave a Reply