Spring 3 Rest Web Service Batch Update with JQuery & Ajax Integration

                      Spring 3  Rest Web Service Batch Update with JQuery & Ajax Integration

Hi  Readers,

      

        I am going to start how to build  Restful Web Service using Spring 3.1 MVC.

We can use the existing Spring MVC request mapping and the help of JAX-RS 2.0 implementation for JSON and XML marshaling/demarshaling.

  I am using here JQuery and Ajax for Spring Batch Update with MySql database.

AJAX :

Ajax stands for asynchronous JavaScript and XML. If you see another term XHR, which is shorthand for XML HTTP request.

The key to AJAX's concept is "asynchronous". This means something happens to the page after it's loaded. 

Traditionally, when a page is loaded, the content remains the same until the user leaves the page. With AJAX, JavaScript grabs new content from the server and makes changes to the current page. This all happen within the lifetime of the page, no refresh or redirection is needed.

Caching Ajax :

 The requested content can either be static (remains exactly the same all the time, such as a contact form or a picture) dynamic requests to the same url get different responses.

For static content, we may want the response cached. But for dynamic content, which can change in a second's time, caching AJAX becomes a bug,  It should be noted that Internet Explorer always caches AJAX calls, while other browsers behave differently. 

We can specify in the AjaxSetup in the $.ajax call.

$.ajaxSetup ({

cache: false

});

$.ajax :

jQuery plays its role in that case and thanks to team of jquery that made this job quite easier for developers by allowing using AJAX jQuery methods and addressing compatibility issues along with simplifying AJAX based calls easier.

The jquery $.ajax() method is used to perform an AJAX (asynchronous ) HTTP request.

$.ajax({

              url :

              type :

              datatype :

              data :

               success :

               failure :

});

name: value options are set of pairs that specify jquery AJAX request. All name/value parameters are optional that are described below.

url: URL to which request is sent in string format

jquery ajax async: The default value is set to be true that means performing request asynchronously in jquery ajax.

data: jquery ajax data to be send to server along with request

dataType: defining the jquery ajax data type expected from server as response

dataFilter: As server sends back data. dataFilter function is used to handle the raw data sent from server in advance. Its complete syntax will be dataFilter(data, type).

error: If request is failed in jquery ajax this call back function is used. Complete syntax is error(xhr,status,error). 

jquery ajax success: If AJAX request succeeds, A callback function to run. Complete syntax of jquery ajax success is: success(result,status,xhr)

global: A Boolean with default value as True. Specifies whether global jquery AJAX event handlers to be triggered or not.

jsonp: This overrides the callback function name in a jsonp request.

processData: A Boolean with default value of True. It tells whether to convert data into query string or not sent in request.

jquery ajax timeout: Local timeout for the request in milliseconds.

type: request type (Get or post) default is Get.

username: User name for HTTP authentication access request

password: password for HTTP authentication access request

BatchUpdate :

We required to insert a batch of records into database in one shot. If you call a single insert method for every record, the SQL statement will be compiled repeatedly and causing your system slow to perform.

We can use JdbcTemplate batchUpdate() method to perform the batch insert operations. With this method, the statement is compiled only once and executed multiple times.

getJdbcTemplate().batchUpdate(sql, new BatchPreparedStatementSetter() {

@Override

public void setValues(PreparedStatement ps, int i) throws SQLException {

 

}

@Override

public int getBatchSize() {

}

  });

Area.js :

  I am creating Area.js  file for Batch update to MySQL database.

function saveArea() {
     
    var areas=[],
    var area1 = new Object();
    var area2=new Object();
    area1.areaId = $("#areaId1").val();
    area1.areaLocation = $("#areaLocation1").val();  
    area1.areaLandMark = $("#areaLandMark1").val();  
    area1.email = $("#email1").val();

    area2.areaId = $("#areaId2").val();
    area2.areaLocation = $("#areaLocation2").val();
    area2.areaLandMark = $("#areaLandMark2").val();
    area2.email = $("#email2").val();

    areas.push(area1, area2);
    $.ajax({
        type : 'POST',
        url : '/${your project context path here}/areabatch',
        dataType : 'json',
        data : JSON.stringify(areas),
        contentType : 'application/json',
        success : function(data) {
            alert('Batch Update Successfull');
        },
        error : function() {
            alert('error');
        }
    });

}

I will continue in my next blog.........................