IMPLEMENTING AJAX FUNCTIONALITY USING JQUERY + JSON FRAMEWORK

 
In our old project we are using json framework to achieve ajax functionality.
 
PLEASE DOWNLOAD THE REQUIRED JSON JAR FILE . WE ARE USING "json-rpc-1.0.jar" JAR FILE.
 
I want to share the code which can be useful for the readers.
 
Let us say we want to re-populate the select option dropdown when user changes a value in the existing dropdown.
 
 
In the html form contains below code:
 
    <select id="demoSelect" name="demoSelect">
          <option value="1">One</option>
          <option value="2">Two</option>
          </select>
 
 
JavaScript Code implementing json looks like below
 
 
 $("select[name^='demoSelect']").bind('change', function(event) 
 { 
   //var e = document.getElementById("demoSelect");  //Get the actual element 
   var id = event.target.id;                   //Get the id of the LOV that was changed
   var e = document.getElementById(id);  //Get the actual element
      var i = e.selectedIndex;
      var t = e.options[i].text; //Get the text
      alert("came here...." + t);
      
      var frmdata = {taskStatusTypeName : t} ;
      var myurl = 'demoServlet'; 
      alert(myurl);
      var options = {
                     type: 'GET',
                      url: myurl,
                      data: frmdata,
                      cache: false,
                      dataType: 'json',
                      error: function(xhr, textStatus,errorThrown){
                              alert('An error occurred! ' + errorThrown) ;
                      },
                      success: function(data,textStatus){
                       alert("came here..........success");
                          var elName = '#demoSelect';
                          var reasonSelect = $(elName).children().remove().end() ;
                          for (var i=0;i<data.length;i++){
                              if (i==0){ 
                                  reasonSelect.append('<option value="' + data[i].key + '" selected="true">' + data[i].value + '</option>') ;
 /*                                      var noteName = '#newNote_' + index ;
                                  var noteVal = data[i].value ;
                                  $(noteName).val(noteVal) ;
 */                                      
                              }
                              else{
                                  reasonSelect.append('<option value="' + data[i].key + '">' + data[i].value + '</option>') ;
                              }
                          }
                          $(elName).focus();     //Set focus to the new note input
                      }
                  } ;                
      $.ajax(options) ;  
      
  }); 
 
As correctly observed it tries to call the underlying backend servlet to fetch the data.
 
Our servlet code goes like this and donot forget to add the entries in web.xml !
 
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import org.json.JSONArray;
import org.json.JSONObject;
 
public class DemoJsonServiceServlet extends HttpServlet{
 
    private static final String CONTENT_TYPE = "application/json" ;
    
    public DemoJsonServiceServlet() {
    }
    
    private static Logger _logger = Logger.getLogger(DemoJsonServiceServlet.class);
      
    public void init(ServletConfig config) throws ServletException
    {
      super.init(config);
    }
    
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        String taskStatusTypeName = request.getParameter("taskStatusTypeName");
        response.setContentType(CONTENT_TYPE) ;
        response.setHeader("Cache-Control","no-cache") ;
        response.getWriter().write(getJson(request,taskStatusTypeName)) ;
    }
    
    private String getJson(HttpServletRequest request,String taskStatusTypeName) throws ServletException {
        
        if (_logger.isDebugEnabled()){
            _logger.debug("Task status type " + taskStatusTypeName) ;
        }
 
        try {
            JSONArray jsonKeyValues = new JSONArray() ;
               for(int i=0;i<10;i++) {
                JSONObject jsonObj = new JSONObject() ;
                jsonObj.put("key","key" +i) ;
                jsonObj.put("value","value" +i) ;
                jsonKeyValues.put(jsonObj) ;
               }
            return jsonKeyValues.toString() ;
        } catch (Exception e) {
            _logger.error("Error in Json service" + e.getMessage()) ;
            throw new ServletException(e);
        }
    }
    
}
 
Hope this explanation helps.