Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

JSON, SAP & other AJAX stuff related.

Hi everyone,

Guess what, JavaScript is hot again, if you wanna be a cool kid, you got use it, do some and let everybody know

You’re on it. Lucky you’all I’ve been checking out what

you have to do to be a fashionable BSP developer.

First you want a JavaScript to be easiest to program, and

you want more advanced functions. Then you just need

prototype (http://prototype.conio.net/).

It brings JavaScript shortcuts and function

like $(myId) instead of document. getElementbyId(myId),

iterator functions, full browser independant Ajax handler and more….

Another good one would be script.aculo.us more UI oriented (http://script.aculo.us/).

If you want light pages you got a problem, those library

can be as big as 60 k, that’s when JSMIN comes handy

(http://www.crockford.com/javascript/jsmin.html ).

It can divide your script size by at least 2. And if it is

still too big, some clients like IE, Firefox or Opera

handle gzip compression for your js and css files.

Now you have to forget everything about XML, XML is bad.

Satan is behind anyway. Look at JSON then, because you

always wanted, to have a way to describe an object in a

text and parse directly into a javaScript Object right

???

A JSON is like :

{

“myobject” : { “id” : ”0000”, “name” : “john”}

}[/code]

In XML you would do :

[/code]

With the JSON parser script (http://www.json.org/json.js),

you will just do as simple as :

Var json_txt = '{';

json_txt += '"myobject" : { "id" : "0000", "name" : "john"}';

json_txt += '}';

if you use the parser, it will and you will have a nice

JavaScript object.

Here is a little sample from what you can do with all that

(very basic, but it shows you how it works) :

Create 2 pages in a BSP application.

Display.htm et data.htm.

In display.htm just do a basic page










[/code]

json.js is the json parser script http://www.json.org/json.js

prototype.js http://prototype.conio.net/dist/prototype-1.4.0.tar.gz

my_handler.js (script to handle the page that you will do

later)

in data.htm

Gather some data from a random table and create some json

text like this :

<%@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_dide

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%>

You will construct a text that describe an object dude

from the table zdude .

Now create a mime object called 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})

}[/code]

Save everything and you will have to your first AJAX JSON

application

Hope you enjoyed the ride and that I’ve been clear enough

!!

Read, comment, say something

Have great Day

Quentin.

Web site the I use to build that post :

AJAX tutorials :

http://snyke.net/blog/2006/03/25/site-design-using-prototype/

http://snyke.net/blog/2006/02/05/ajax-design-patterns/

JSON related :

www.json.org

http://www.sergiopereira.com/articles/prototype.js.html

Not what you were looking for? View more on this topic or Ask a question