JSON format and Ajax call explained via example

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

Scenario: On your home page, some clickable image is required based on certain condition. If the resultset to the query returns some value, then display the iview with the image, else do not. To be more specific, every user shares the same home page but certain set of users have this additional clickable image on their home page.

Solution: Make AJAX call to the server; fetch the query resultset in JSON format and update the div tag based on the result set. I am using Extjs in my example which is not mandatory for you. You can prefer simple javascript over this.

Step 1:

Create a portal application project and its two objects. Name them as ajaxCall and fetchData respectively.

Use the below code in your ajaxCall.jsp

<html>

<head>

</head>

<body>

<!—Define the below js file in the next step -->

</body>

</html>

Use the below code for your fetchData.jsp

IPortalComponentRequest currentRequest = (IPortalComponentRequest) pageContext.getAttribute(javax.servlet.jsp.PageContext.REQUEST);

HttpServletResponse servletResponse = currentRequest.getServletResponse(true);

PrintWriter ptr = servletResponse.getWriter();

StringBuffer tmpString1 = new StringBuffer();

Connection con = null;

Statement stmt = null;

ResultSet rset = null;

StringBuffer tmpStrSQL=new StringBuffer();

int countVal = 0;

String convert = "";

try{

InitialContext context = new InitialContext();

DataSource dataSource = (DataSource)context.lookup("jdbc/Your_Schema");

con = dataSource.getConnection();

stmt = con.createStatement();

tmpStrSQL.append("SELECT * FROM Some_Table");

String newQuery = tmpStrSQL.toString();

rset = stmt.executeQuery(newQuery);

while(rset.next())

{

countVal = rset.getInt(1);

}

convert = Integer.toString(countVal);

}

catch(Exception ex){

}

finally {

stmt.close();

con.close();

}

//Create JSON Format

tmpString1.append("{rows:[");

tmpString1.append("{Name:\'");

tmpString1.append(convert);

tmpString1.append("\'}]}");

String str = tmpString1.toString();

ptr.println(str);

Step 2:

Now create the NewRelease.js and place it in your server. Use the below code in your js

Ext.onReady(function () {

var E = '<a href=\' javascript:callSomepage()\'><img border="0" src="NewImage.gif"></a>';

// the div 'example' is defined in the jsp. update this div tag with the above mentioned image.

Ext.get("example").update(E);

// Now load the masking image while the query fetches the resultset

var C = Ext.get("example");

var A = new Ext.LoadMask(C, {

msg: "Please wait..."

});

A.show();

// Use the variable Name to map to the JSON result set

var B = Ext.data.Record.create([{

name: "Name",

mapping: "Name"

}

]);

// Reference back to the par file to map to the JSON format created in the jsp

var D = new Ext.data.JsonStore({

url: "your_project_full_name.fetchData",

root: "rows",

fields: B

});

D.load();

// on load of the data, check if the query resulted something. If the result is 0 then update the div tag with blank, meaning, no image will be uploaded in the div //tag and hence the blank iview.

D.on("load", function () {

var F = D.getAt(0).get("Name");

if (F == "0") {

Ext.get("example").update("")

}

A.hide()

})

});

function callSomepage() {

alert("You can do anything from here. Raise EPCM event or give some alert");

};

Step 3:

Export this par to your server, create an iview and assign to the home page.

Conclusion: By definition we all know that AJAX is about updating parts of a web page without actually loading the whole page. And, JSON is java script object notation. It is nothing but syntax for storing and exchanging text information. So by this example, when a user is fetched with the query result from database, he would actually see that image via iview and the rest of the users would just see same home page without any difference.