I found this useful linke:  Creating & Parsing JSON data with Java Servlet/Struts/JSP to teach you how-to in 5 mins. But it didn’t explain how-to at client side (browser). I post the sample javascript code.

=====================
util.js
=====================
window.onload = initPage;

function initPage() {
  // find the thumbnails on the page
  thumbs = document.getElementById("thumbnailPane").getElementsByTagName("img");

  // set the handler for each image
  for (var i = 0; i < thumbs.length; i++) {
    image = thumbs[i];

    // create the onclick function
    image.onclick = function() {
      // find the image name
      detailURL = 'images/' + this.title + '-detail.jpg';
      document.getElementById("itemDetail").src = detailURL;
      getDetails(this.title);
    }
  }
}

function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (tryMS) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (otherMS) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  }
  return request;
}

function getDetails(itemName) {
  request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  var url= "getDetails.php?ImageID=" + escape(itemName);
  request.open("GET", url, true);
  request.onreadystatechange = displayDetails;
  request.send(null);
}

function displayDetails() {
   if (request.readyState == 4) {
       if (request.status == 200) {
          var detailDiv = document.getElementById("description");

	  //get json object
          var itemDetails = eval('(' + request.responseText + ')');

          // Remove existing item details (if any)
          var children = detailDiv.childNodes;
          for (var i=children.length; i>0; i--) {
             detailDiv.removeChild(children[i-1]);
          }

         // Add new item details
         for (var property in itemDetails) {
              var propertyValue = itemDetails[property];
               if (!isArray(propertyValue)) {
               var p = document.createElement("p");
               p.appendChild(
                    document.createTextNode(property + ": " + propertyValue));
               detailDiv.appendChild(p);

...
}

The json data will get from XMLHttpRequest.requestText, and use javascript built-in eval() to parse into object. Also you need some knowledge of DOM.

update: 03-22-2009
1. Java Tools for the JSON Format

2. JSON in Java

3. Download: JSON-RPC-Java

4. RPC in Javascript using JSON-RPC-Java

5. jabsorb is a simple and lightweight Ajax/Web 2.0 framework that allows you to call methods in a Java web application from JavaScript code running in a web browser as if they were local objects residing directly in the browser. link here

6. Download: JRP (JSON-RPC Page) is a JSP tag library for creating RPC methods for both JSON-RPC and XML-RPC

update: 05-08-2009
Gson is a Java library that can be used to convert Java Objects into its JSON representation.

Advertisements