Skip to Content

How-To: Create AJAX Applications in SAP

Just in time for voting for TechED presentors and to follow-up my previous more theoretical blog post, I give you (maybe?) the first AJAX SAP Web Application (If AJAX sounds more like something you use to clean your dishes have a look at SAP Web Applications the Google Way).  This is the simplest possible AJAX application but introduces all the major concepts except using XSLT sheets to translate XML to HTML.  This is however, covered in depth and better then I could talk about it in multiple places on the internet.   I will be covering this and more topics in my TechEd presentation, you can vote for it here  (Mine is entitled, “Framework for Client-Rendered Web Applications in SAP “).  FYI:  This example will only work in IE, however, it is trivial to get it running in Mozilla, et. al.

How-To Steps


function getName(){
var url = “data.xml”;
req = new ActiveXObject(“Microsoft.XMLHTTP”);
if (req){
req.onreadystatechange = processReqChange;“GET”, url, true);
alert(“Failed to Create XML Request Object.”);


function processReqChange(){
if (req.readyState == 4){
if (req.status == 200){
var firstName;
var lastName;
var response;
response = req.responseXML;
FirstName.innerText = response.getElementsByTagName(“FirstName”)[0];
LastName.innerText = response.getElementsByTagName(“LastName”)[0];
output.className = “”;


id=”output” class=”hidden”>h3. Name

    • Last Name: id=”LastName”>
    1. Test the page entitled ajaxTest.html


As you can see from this very simple demo, you have full control over the XML returned from data.xml.  This would allow you to create much more complex applications that communicate using XML.  Examples of these types of applications will be made available and explained at TechEd, assuming of course you go vote for me  🙂

You must be Logged on to comment or reply to a post.
  • Hi Daniel,

    can it be a coincidence that you work for Colgate-Palmolive and write weblogs about Ajax, or does Colgate-Palmolive try to open a second product line 😉 ?

    The weblog is a nice introduction. However, people might wonder, what is it good for. Why should they apply it? It might be a fancy technology to exchange xml and I assume that you might come up with some more complex scenarios, but it is not really clear why it should be choosen in exchange of the usual synchronous page request/response cycle. Some use case in a sap related scenario might help a little more. I guess, otherwise people will not get into it much (and vote for you). I'm scratching my head in getting something together by myself, but I'm pretty busy rigth now writing other stuff.

    regards, Ulli

    • Hey Ulli,

      You certainly ask an interesting question.
      Its good to see Im now in the same boat as SAP.  It's hard to know when to use a BSP vs. a JSP vs. a WebDynpro.  So, saying when to also use a Ajax Application isn't easy either, if pressed I would say that you should use Ajax applications when a (B/J)SP or WebDynpro isn't giving you enough flexiblity.  It is easier to implement a xslt to produce the UI you want then to build an entire HTMLB object to do it.  Even with the HTMLB object you will not have the responsive UI you can get with an Ajax Application.


    • I agree with Ulli and Dan that it is sometimes hard to determine which technologies to use for which applications.  In the case of AJAX, I believe it just gives us another technology to utilize that makes for a more user-friendly application experience.  By requesting data asyncronously, the user can continue to work while the server is running in the background.  This could be useful for validating or retrieving data in the background.  The most popular example of this technology on the web is  where surrounding images are loaded asynchrounously making for a great user-friendly web app.
  • The most important benefit that Ajax provides is response to a client side event without posting or reloading the whole page which is the case with server side sripting technologies like JSP, BSP, ASP etc. So its far more efficient and also improves the user experience in terms of not refreshing the whole page.