Simple Ajax with JQuery ~ balaram

Tuesday, October 9, 2012

Simple Ajax with JQuery

First I will write code with native Ajax then will write same code using Ajax.

The code below for add two number. There will be two text box on jps page and user has to enter first number and click on Add button then it will add first text box and second box number and will be showed to second text box. One clear button is also there to clear both text boxes.

Back side (Server side) will be came in both ways.

Pure (Native) Ajax:

var request;

function getRequest(){
      if(window.ActiveXObject){
        request = new ActiveXObject("Microsoft.XMLHTTP");
       }else if(window.XMLHttpRequest){
        request = new XMLHttpRequest();
      }
    }

function addAction(){
var first = document.getElementById("firstNumber").value;
if(first==null||first==""){
alert("Please enter first number");
return null;
}
var second = document.getElementById("secondNumber").value;
if(second==null||second==""){
second = 0;
}
calculation(first, second, "add");
}

function calculation(first, second, operation){
getRequest();
var url = "http://localhost:8080/Calculator/Calculator?first="+first+"&second="+second+"&operation="+operation;
request.open("POST",url,false);
request.onreadystatechange = showResult;
request.send();
}

function calculation2(first, second, operation){
getRequest();
var url = "http://localhost:8080/Calculator/Calculator";
     request.open("POST",url,false);
request.onreadystatechange = showResult;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("first="+first+"&second="+second+"&operation="+operation); // Why Null
}

function showResult(){

if(request.readyState == 4){
        var result = request.responseText;
        document.getElementById("secondNumber").value = result;
   }

}
function clearInput(){
document.getElementById("firstNumber").value="";
document.getElementById("secondNumber").value="";
}

JQuery Ajax code:

$(document).ready(function(){
$('#clearButton').click(function(){
$('#firstNumber').val('');
$('#secondNumber').val('');
});

$('#addButton').click(function(){
var first = $('#firstNumber').val();
var second = $('#secondNumber').val();
if(first==""){
alert("Pleae enter first number");
return;
}
if(second==""){second=0;}

$.ajax({
   type: 'POST',
   url: 'http://localhost:8080/Calculator/Calculator',
   async: false,
   data: {
   first: first,
   second: second,
   operation: 'add'
    },
    success: getAjaxData

});

});

function getAjaxData(data){
$('#secondNumber').val(data);
}

});

JSP Page Code:

<body>
It is simple Calculator
<br>
<input type="text" id="firstNumber"/>
<input type="button" id="addButton" value="Add" onclick="addAction()"/>
<input type="text" id="secondNumber" readonly="readonly"/>
<input type="button" id="clearButton" value="Clear" onclick="clearInput()"/>
</body>

Server side Code:

String first = request.getParameter("first");
String second = request.getParameter("second");
String operation = request.getParameter("operation");
logger.info("First Number :"+first);
logger.info("Second Number :"+second);
int result = Integer.parseInt(first)+Integer.parseInt(second);
response.setContentType("text/html");
response.getWriter().write(result+"");

For Ajax using DOJO

balaram

Tuesday, October 9, 2012