How to use Ajax in BSP?

So far I've succeeded to get my BSP MVC model working.

Here is my code.

View

<body>
    <z:form>
   <z:input binding="//c/counter"
            invisible="true"/>
    Counter : <z:write binding="//c/counter"/>
        
    <z:button fcode="incr"
                      text="Increase"/>
    <z:button fcode="decr"
                      text="decrease"/>
    </z:form>
  </body>

Controller
Through fcode I invoke the "fcode_incr" method in Controller. 'c' is a model instance of zcl_counter. it has an attribute counter which will be increased by this method.

method fcode_incr.
   c->increment( ).
endmethod.

I hope zcl_model is obvious and its code is not relevant here.

The problem when I press the "increase" button, server sends a request. When it gets the response, it refresh the page. So i get the incremented value. how can I get it working with Ajax so the page remains without refreshing?

I've already tried Ajax with "XML page with flowlogic". like "Eventhandler-->OnRequest"

request->get_form_field('variable').

Does it help any further?

The correct Ajax Call would be

$.ajax({
        url:'ajaxController.do',
        statusCode:{
          404: function(){
            alert("not found");
          }
        },
        success: function(data){
          $('#viewData').html(data);
        }
       }).error(function(){
          alert("failed");
});

Solution

This link explains the details: http://www.saptechnical.com/Tutorials/BSP/AJAX/create.htm

But, in essence;

Integrate some javascript in your bsp page so that you can do ajax, here are some options:
- Either take the code from that link
- Or the better the solution is to use jQuery, either through
  - Using <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css" type="text/css" />
  - Or uploading http://code.jquery.com/jquery-1.8.2.min.js and referencing it in your code
You can call ajax calls then like this with jQuery : http://api.jquery.com/jQuery.ajax/
Create a controller in your BSP project that will be called from AJAX.
Create a controller class for your controller, only re-define REQUEST and put your logic there

Done.