AJAX with htmlb elements on BSP pages

[Private_Member_26822]

    Some day it appears you are familiar with BSP, you can create flow logic pages and MVC views/controlers. And then you ask yourself what else you can do to emprove your html system. You can limit the number of reloads, you can accelerate your model procedures, you can  ...

AJAX still is not a typical attitude to interchange data between the application server and the user's html viewer. But as it speeds this proces up, it is worth to try it. AJAX assumption is to use a JavaScript object to communicate from the explorer to server. This object's methods use HTTP protocol to directly send and read data. On the other side, at server, there has to be a +"listener" - +a page which responds for JS object questions with proper data. These responds have to include only pure data needed at html side, no additional spare tags, no

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;
if (window.XMLHttpRequest)
{
    ObjectXMLHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
    ObjectXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

 adding JS object methods to desired DOM objects events, eg.

 function run_on_change()
{
    o = document.getElementById('desired_id');
    if ( o )
    {

        e.onchange = function()
        {
            if(ObjectXMLHttp)
            {
               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;
                   }
               }
               ObjectXMLHttp.send(null);
             }
        }
    }

 }

 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! 🙂

- trim?

    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 || "
s";
    return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}

function rtrim(str, chars)
{
    chars = chars || "
s";
    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>