My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
JSPAndAJAXExamples  
Examples of JSP and AJAX
Updated Feb 4, 2010 by fangyid...@gmail.com

Example 1 - Server side JSP encoding

service.jsp:

  <%@page contentType="text/html; charset=UTF-8"%>
  <%@page import="org.json.simple.JSONObject"%>
  <%
    JSONObject obj=new JSONObject();
    obj.put("name","foo");
    obj.put("num",new Integer(100));
    obj.put("balance",new Double(1000.21));
    obj.put("is_vip",new Boolean(true));
    obj.put("nickname",null);
    out.print(obj);
    out.flush();
  %>

Please note that you need to place json_simple-1.1.jar in WEB-INF/lib before running the JSP. Then the client side will get the resulting JSON text.

Example 2 - Client side XMLHttpRequest

client.html:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<script type="text/javascript">
function createXMLHttpRequest(){
  // See http://en.wikipedia.org/wiki/XMLHttpRequest
  // Provide the XMLHttpRequest class for IE 5.x-6.x:
  if( typeof XMLHttpRequest == "undefined" ) XMLHttpRequest = function() {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {}
    throw new Error( "This browser does not support XMLHttpRequest." )
  };
  return new XMLHttpRequest();
}

var AJAX = createXMLHttpRequest();

function handler() {
  if(AJAX.readyState == 4 && AJAX.status == 200) {
      var json = eval('(' + AJAX.responseText +')');
      alert('Success. Result: name => ' + json.name + ',' + 'balance => ' + json.balance);
  }else if (AJAX.readyState == 4 && AJAX.status != 200) {
    alert('Something went wrong...');
  }
}

function show(){
  AJAX.onreadystatechange = handler;
  AJAX.open("GET", "service.jsp");
  AJAX.send("");
};
</script>

<body>
  <a href="#" onclick="javascript:show();"> Click here to get JSON data from the server side</a>
</html>

Please place client.html and service.jsp (see Example 1) in the same directory and then open client.html in IE or Firefox, click the link and you'll get result.

Comment by kiran...@gmail.com, Feb 10, 2009

thanks! A simple example

Comment by KuanFan99, Mar 8, 2009

ggg hghgh

Comment by megar...@gmail.com, Apr 22, 2009

dfg

Comment by yau...@gmail.com, Jun 17, 2009

Hi, Just found out the output JSON response is not compatible with Jquery getJSON function. Any idea?

Comment by i...@danielbruessler.de, Jun 17, 2009

Hey, it works very great!!

Comment by pa.mardo...@gmail.com, Jul 3, 2009

crack que buen ejemplo perro te pasaste

Comment by deep.k...@gmail.com, Jul 12, 2009

A great tool... A No Frills library. something exactly what I was looking for. No dependencies on common-jar, logging blah blah...

Thanks a TON..!!!

Comment by vikash.1...@gmail.com, Aug 10, 2009

Just Great!

Comment by kausalya...@gmail.com, Oct 5, 2009

server side jsp is not working for me.... In which WEB-INS/lib the jar file have to put in

Comment by jadhav.d...@gmail.com, Oct 11, 2009

Kausalya.tce: You would need to add the json_simple-1.1.jar in the WEB-INF/lib folder of your web application. You can just paste the jar file in the lib folder without creating any subfolders. Please post the exact error message that you get when you run the server side jsp. Creators of this utility: Thank you so much....As the name suggests this is really really simple to implement.

Comment by mven...@gmail.com, Nov 2, 2009

Nice Example Thank you very much. Really when i am thinking about sending arrayList using Ajax to client side . JSON is good approach .

for More reference on JSON : JSON.org

Comment by erich.re...@gmail.com, Dec 7, 2009

This is amazing and will help my project greatly. Thank you very much for this!

Comment by bharath....@gmail.com, Dec 17, 2009

Thanks a lot.. I was looking to develop a web 2.0 application using dojo and jsp at the server side.. Thanks a ton!

Comment by suki...@gmail.com, Jan 5, 2010

fd

Comment by BlueSkyS...@gmail.com, Mar 4, 2010

Hi, Please help.

I'm a beginner. As said above, I copied json_simple-1.1.jar into WEB-INF folder and found this error. "Class org.json.simple.JSONObject not found in import.".

Do I need to download org.json.JSONObject.jar too?

Comment by project member fangyid...@gmail.com, Mar 8, 2010

json_simple-1.1.jar should be enough. Please make sure you put it in WEB-INF/lib (instead of WEB-INF).

Comment by vinod...@gmail.com, Mar 29, 2010

Thx a tone!!! Vinod Kumar(vinodiap)

Comment by javafue...@gmail.com, May 8, 2010

I've always been confused by the use of the "pseudo-procotol" in HTML event handler attributes, as show in the example above... "onclick='javascript:show()'" The pseudo-protocol is completely unnecessary. "onclick='show()'" is sufficient, and will execute exactly the same.

Comment by dinost...@gmail.com, Oct 8, 2010

how you could run something like this in google app engine?

Comment by moi...@gmail.com, Oct 10, 2010

Wow! I was looking for an easy and simple example about handle JSON object interchange between client and server using JSP, like this one. Thanks so much!

Comment by wmust...@gmail.com, Oct 12, 2010

thanx!!!!!!!!!!!!!!!!!

loco

Comment by java.bla...@gmail.com, Oct 26, 2010

FrameWork?: JQuery 1.4.2 client.html

<html> <head>

<title>.:: Ejemplo JSON-simple co AJAX ::.</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript">
function show2() {
$.getJSON('service.jsp', function(data) {
alert('Success. Result: name => ' + data.name + ',' + 'balance => ' + data.balance);
});

} </script> </head> <body>

<a href="#" onclick="javascript:show2();"> Click here to get JSON data from the server side</a></body>
</html>

Comment by jamessun...@gmail.com, Dec 13, 2010

thanks ^^

Comment by vinod.ma...@gmail.com, Jan 9, 2011

The import org.json cannot be resolved, error i am getting, what to do for that?

Comment by kgog...@gmail.com, Feb 23, 2011

Thank-you for the example!

Comment by FuyeK...@gmail.com, Mar 16, 2011

good!

Comment by rajib26...@gmail.com, Apr 22, 2011

great!

Comment by chaitany...@gmail.com, Aug 16, 2011

My Client.html is not making a call to service.jsp!!

Comment by sid.s.an...@gmail.com, Aug 27, 2011

i am passing the data from servlet but when i am passing the source its not identifying and i am getting alerts from the function as undefined json

Comment by mauricio...@gmail.com, Sep 19, 2011

Thanks!

Comment by mgav...@gmail.com, Sep 25, 2011

Thanks!

Comment by pranay.m...@gmail.com, Oct 4, 2011

this one is to get data to client side ,what if i want to send data to server and store it in database

Comment by Espoi...@gmail.com, Oct 17, 2011

Please How to send data to server and store it in database?

Comment by sinuxcre...@gmail.com, Dec 5, 2011

wow..helped me a lot..; Can we create multidimensional json object?

Comment by phanloi1...@gmail.com, Dec 8, 2011

please help me.it is error undefind

Comment by tukuna.p...@gmail.com, Feb 28, 2012

it worked for me..

nice one.

Comment by vidhi.si...@gmail.com, Mar 12, 2012

thanks for giving this small and helpfull example

by itsme_vidhi1010@rediffmail.com

Comment by s.hashm...@gmail.com, Mar 19, 2012

thanks! very nice examples.

Comment by aditiran...@gmail.com, Mar 23, 2012

sir\mem,i am not understand how to execute the program of ajax with help jsp program.......... plz help me...........send me tree structure of execution of program

Comment by to...@g.softbank.co.jp, Apr 15, 2012

僕が成功した。ありがとう!


Sign in to add a comment
Powered by Google Project Hosting