JSON, SAP & other AJAX stuff related, Tutorial.

[Former Member]

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. 
   
2. Put JSMIN in a folder
3. 
   

Get Prototype here .

1. 
   

Get JSON here .

1. 
   
2. Put them in the same folder as JSMIN.
3. 
   

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. 
   
3. import prototype_min.js and json_min.js as mime object
4. 
   
5. create an empty my_handler.js and import it too.
6. 
   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.       
          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.