<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	
	function passDataUsingJQueryAJAXInXML()
	{
		var firstName = $("#firstName").val();
		var LastName = $("#lastName").val(); 
		var processData = 'XML'; 
		  $.ajax({  
		    type: "GET",  
		    url: "./JQueryServlet",  
		    data: "firstName="+firstName+"&lastName="
		    		+LastName+"&processData="+processData,  
		    success: function(result){
		      var firstName = $(result).find('firstName').text();
			  var lastName = $(result).find('lastName').text();
			  alert("First Name: "+ firstName+"  Last Name: "
					  +lastName);
		    },
		  	error: function (xhr, ajaxOptions, thrownError) {
		        alert("Error status code: "+xhr.status);
		        alert("Error details: "+ thrownError);
		    }
		  }); 

	}
	
	function passDataUsingJQueryAJAXInJSON()
	{
		var firstName = $("#firstName").val();
		var LastName = $("#lastName").val(); 
		var processData = 'JSON'; 
		  $.ajax({  
		    type: "GET",  
		    url: "./JQueryServlet",  
		    data: "firstName="+firstName+"&lastName="
		    		+LastName+"&processData="+processData,  
		    success: function(result){
		      var firstName = result.firstName;
			  var lastName = result.lastName;
			  alert("First Name: "+ firstName+"  Last Name: "
					  +lastName);
		    },
		  	error: function (xhr, ajaxOptions, thrownError) {
		        alert("Error status code: "+xhr.status);
		        alert("Error details: "+ thrownError);
		    }
		  }); 

	}
		

</script>
</head>
<body>

First Name: <input type="text" value="" id="firstName"><br>
Last Name: <input type="text" value="" id="lastName"><br><br>
<input type="Submit" value="Process XML data AJAX" 
			onclick="passDataUsingJQueryAJAXInXML();">
<input type="Submit" value="Process JSON data AJAX" 
			onclick="passDataUsingJQueryAJAXInJSON();">

</body>
</html>