AJAX with htmlb elements on BSP pages
or header information.
How to quickly try AJAX?
1 . Let’s look at html side at first. We have to create a JS object. If you google, you will find a lot of information on it. The typical hand made pack consists of:
JS object creation: (let’s do not bother either JS or ActiveX, FireFox or IE )
var ObjectXMLHttp = false;
ObjectXMLHttp = new XMLHttpRequest();
else if (window.ActiveXObject)
ObjectXMLHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
adding JS object methods to desired DOM objects events, eg.
o = document.getElementById(‘desired_id’);
if ( o )
e.onchange = function()
var o_desired = document.getElementById(‘desired_id’).value;
var o_since = document.getElementById(‘since’).value;
var o_till = document.getElementById(’till’).value;
ObjectXMLHttp.open(“GET”, ‘/sap/bc/bsp/sap/your_appl/your_page_ajax.htm?desired=’ + o_desired + ‘&since=’ + o_since + ‘&till=’ + o_till);
ObjectXMLHttp.onreadystatechange = function()
if (ObjectXMLHttp.readyState == 4)
answer = trim(ObjectXMLHttp.responseText, ”
document.getElementById(‘destination_id’).value = answer;
You can ask. Let’s ask:
– function run_on_change(), what is it?
It can be an implementation of EVERY event method of EVERY DOM object on a html page , even htmlb object. How to attach this method? – it is described on my another weblog https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/8418. [original link is broken] [original link is broken] [original link is broken] [original link is broken] [original link is broken] [original link is broken] You simply have to check your view’s final DOM ids and run such a function at the end of a page
– ObjectXMLHttp.open(“GET”, ….. , what is is for?
It is the clue, the JS object connects via HTTP to your page on server side
– ObjectXMLHttp.onreadystatechange, what is is for?
We have to read the answer from the server side. Attention! After putting the answer to the destination field, you can run a next AJAX connection (groupped in some separate function) to get another functionality! 🙂
There is no trim in JS, I recommend to add some implementation to sieve 10 13 signs, for example like this one which I have googled on:
function trim(str, chars)
return ltrim(rtrim(str, chars), chars);
function ltrim(str, chars)
chars = chars || “
return str.replace(new RegExp(“^[” + chars + “]+”, “g”), “”);
function rtrim(str, chars)
chars = chars || “
return str.replace(new RegExp(“[” + chars + “]+$”, “g”), “”);
– desired, since, till -> they are parameters in this example
2. Let’s look now at server side. It is enough to create some flow logic page with pure content like this: (REMEMBER: our aim is to send only values, not whole html page code! ) </p><p> <%@page language=”abap”%><br/><%</p><p> DATA: answer TYPE …..
desired = REQUEST->GET_FORM_FIELD( ‘desired’ ). “page attributes
since = REQUEST->GET_FORM_FIELD( ‘since’ ).
till = REQUEST->GET_FORM_FIELD( ’till’ ).
IF since ……
SELECT …. INTO answer FROM …. WHERE desired … AND til ….
<%= answer %></p><p><%<br /> ELSE. </p><p> …</p><p>%><br/><%= answer %><br /><%<br /> ENDIF.<br/>%></p><p> </p><p>What I propose: try to minimize the number of SPACEs, ENTERs and so on. I don’t know exactly why, but apart from <%= answer %> some additional 10 13 signs are transfered. And this is why I recommend to trim on html side.</p><p>If you have to transfer several values, simply split them, eg.</p><p><%= name %><br/>;<br/><%= surname %></p><p> The above solution allows you to implement quick connections with server without reloading the whole pages. Imagine reading and listing trip costs for chosen employee, changing options in select (dropdownlistbox) (setting select length to zero and using JS new Option method) according to another field value and many others. </p>