Saturday, May 30, 2009

Ajax and JSON example, How to use JSON with Ajax

In my previous post, I had explained easy example of JSON. In this post I am explaining how to use JSON with Ajax.
No need to require any other software, just create one dynamic web project and paste below code.

1. StudentInfo.java (This is a Servlet)

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class StudentInfo extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String roll = request.getParameter("roll");
PrintWriter out = response.getWriter();
out.println(getResult(roll));
}

public String getResult(String roll){
String name = "";
String hostel = "";
String contact = "";
String[] subjects = new String[]{};
if(roll.equalsIgnoreCase("110")){
name = "Binod Kumar Suman"; hostel = "Ganga"; contact = "999999999";
subjects= new String[]{"C++","JAVA","DataBase"};
} else if(roll.equalsIgnoreCase("120")){
name = "Pramod Kumar Modi"; hostel = "Godawari"; contact = "111111111111";
subjects= new String[]{"C++","QT","Linux"}; }
else{ name = "Roll Number not found"; }

String result = "var student={"; result += "name:'" + name + "', ";
result += "hostel:'" + hostel + "', ";
result += "contact:'" +contact +"',";
result += "subject:[";
for(int i=0;i<subjects.length;i++){
if(i == subjects.length - 1){
result += "'"+subjects[i] + "']";
}
else{
result += "'"+subjects[i] +"',";
}
}
result += "};";
return result;

}
}

2. ShowStudentInfo.jsp

<html><head><
title>Binod Java Solution AJAX </title>
<script type="text/javascript">
var request; f
unction getName(){
var roll = document.getElementById("roll").value;
var url = "http://localhost:8080/Ajax_JSON/StudentInfo?roll="+roll;
if(window.ActiveXObject){ request = new ActiveXObject("Microsoft.XMLHTTP"); }
else if(window.XMLHttpRequest){ request = new XMLHttpRequest(); } request.onreadystatechange = showResult;
request.open("POST",url,true);
request.send();
}

function showResult(){
if(request.readyState == 4){
var response = request.responseText;
eval(response);
document.getElementById("NamelH1").innerHTML = student.name; document.getElementById("HostelH1").innerHTML = student.hostel; document.getElementById("ContactH1").innerHTML = student.contact; document.getElementById("SubjectH1").innerHTML = student.subject; } }

</script>
</head><body>
<h2> GET STUDENT INFO </h2>
<br> Enter Roll Number <input type="text" id="roll">
<input type="button" value="Get Name" onclick="getName();"/> <br>
<table border=2>
<tr><td>Name</td><td><span id="NamelH1">
</span></td></tr> <tr><td>Hostel</td>
<td><span id="HostelH1"></span></td></tr> <tr><td>Contact</td><td><span id="ContactH1">
</span></td></tr> <tr><td>Subject</td>
<td><span id="SubjectH1"></span></td></tr>
</table>
</body>
</html>

After compile and start the server, open internet explorer and put URL (like http://localhost:8080/Ajax_JSON/ShowStudentInfo.jsp) and put roll no. 110

This is very basic and fundamental tutorial, you can build a good project on Ajax and JSON with the help of this easy example.

Please dont forget put your comment to enhance this blog. :)

3 comments:

  1. i have war project and i would like to know if i need anyting else then json library?

    ReplyDelete

You can put your comments here (Either feedback or your Question related to blog)