JSON speed up Ajax

The JavaScript Object Notation, or JSON, is a lightweight syntax for representing data. JSON has structure with nesting of data elements, just as XML does. JSON is also text-based and use Unicode. It is just as readable by humans as XML is. Here comes a simple example for Json:

{"totalCount":2,
"results":[{"bh":"100","sm":"hello"},{"bh":"101","sm":"me" }]}

The big different about JSON and XML is that JSON is a subset of JavaScript. I can use JavaScript's own compiler to do just that by calling eval. Parsing JSON is a one-liner! Moreover, navigating an object synthesized from JSON is identical to navigating any JavaScript object. It's far easier than navigating through the DOM tree.

To create a JSON object in server side with Java. We can use the lib in "json.org". It provides a quick API to parse POJO and list etc. See the following example code:

public JSONObject toJSONObject() throws Exception {
JSONObject json = new JSONObject();
json.put("totalCount", totalCount);

JSONArray jsonItems = new JSONArray();
for (Iterator iter = results.iterator(); iter.hasNext();) {
jsonItems.put(iter.next().toJSONObject());
}
json.put("results", jsonItems);

return json;
}
To parse JSON data from JS in serve side, please see the following example:
JSONArray jsonArray = JsonUtil.getJsonArray(jsonString);
// JsonUtil.getJsonArray(jsonString) just do this ->
//         jsonArray = new JSONArray(jsonString);

// loop through - get from json and update
for (int i = 0; i < jsonArray.length(); i++) {     
   JSONObject jsonObject = jsonArray.getJSONObject(i);     
   String id = jsonObject.getString("id");       
} 

YUI extension

Jack Slocum launch YUI extension 1.0 recently in extjs.com. It provides a strong framework for Ajax project. YUI extension has the following interesting functions:

• Online Grid editor (really convenience one - JSON)
• Dialogs (Message dialog, progress dialog etc)
• Menu (drop menu)
• Tree
• Resizable
• Layout

EXTJS.com is very well documented and follows great OO principles and GUI design patterns. Furthermore, it provides really great example to show those functions. Although, the example is never enough for cover every cases.

Here comes one of my examples:

Ajax Request Compare

Currently, there exists several non-commercial AJAX frameworks for request during the development of a dynamic call-center application.

• Prototype
• Dojo
• Direct Web Remoting (DWR)
• Yahoo! User Interface (YUI) Toolkit
• EXT JS
  
• Google Web Toolkit (GWT)

Prototype is one of the most popular AJAX frameworks around.

postMsg : function(url, actId) {
  var myAjax = new Ajax.Request(url,{
  method: 'post',
  parameters: 'actId='+escape(actId),
  onComplete:handlerResult
});
},

Dojo is a popular, complete open source framework with broad support not only for Web widgets but also other important aspects of Web
application development such as interaction with backend systems.

dojo.io.bind({
  url: url,
  method: "post",
  content: {actId: "123456"},
  load: function(type, data, evt){/* callback code */ },
  error: function(type, error){/* error handling callback */ },
  mimetype: "text/plain"
});

DWR focus is making browser client/server interaction as simple and natural as possible.

public class PhoneService {
 public String getCallerName(int callerNumber){...}
}
..script.. type="text/javascript" src="SVProvider/dwr/interface/PhoneService.js ..script..
PhoneService.getCallerName(18003456700, processPBXResponse)

YUI is an extremely rich, well documented, stable, and lush framework for AJAX-based development. YUI code is really professor feeling.

var requestFromObject = YAHOO.util.Connect.asynRequest('post', uri ,
                                                    callback , postData);
var callback = {
   success: handleSuccess
   failure: handleFailure
   argument: {callerName: "N/A"}
};

Ext JS is another very popular Ajax framework. It also provides a XHR wrapper allowing quickly and efficiently perform AJAX requests.

Ext.Ajax.request({
 url : '../listActivity.do' ,
 params : { action : 'loadData' },
 method: 'GET',
 success: function ( result, request ) {
  Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText);
 },
 failure: function ( result, request) {
  Ext.MessageBox.alert('Failed', 'Successfully posted form: '+action.date);
 }
});

JSF, Spring, iBatis integrate

Recently I created an application with JSF, Spring and iBatis. It seems pretty easy to integrate them together. Following list the system environment:

• Tomcat - 5.5.23
• Java - 1.5
• JSF - 1.2
• Spring - 2.0.3
• iBatis - 2.3.0
• database - Oracle

The system includes 3 simple configure file: applicationContext.xml, face-config.xml and sql-config.xml.



JSF have the following different features:

• Swing-like object-oriented Web application development
• Backing-bean management
• Extensible UI component model
• Flexible rendering model
• Extensible conversion and validation model

However, one JSF thing that I really do not like is its huge configure file. For a big project, it huge configure file will make maintanance pretty hard.

A serviceLocator class is created in system to glue the JSF with Spring.



Like other persistence layers, iBATIS strives to ease the development of data-driven applications by abstracting the low-level details involved in database communication, as well as providing higher-level ORM capabilities. iBatis SQL Maps is a straightforward data access tool, working at the SQL level like JDBC code, but externalizing SQL statements and their result and parameter mappings into an XML file. Above figure shows the simple example for iBatis.