JSON servlet实例 Ajax应用

1.    jsonjava实现,下载:http://www.json.org/java/index.html

2.       jsonjavascript脚本,下载:http://www.json.org/js.html

配合使用客户端的JSON JavaScript脚本和服务器端的JSON Java实现,我们可以在客户端将JavaScript对象转换为JSON串发送到服务端,在服务端可以将Java对象转换为JSON串发送到客户端,从而简化数据的解析处理。

 

开发步骤:

1.  WebRoot目录下新建json子目录,将json2.js复制到该目录下。

2. JSONJava实现源文件连同所在的包一起复制到src目录下。

3. 编写jsonBook.jsp

4. 编写JsonBookServlet.java

 

JsonBookServlet.java:

public class JsonBookServlet extends HttpServlet {

 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  doPost(req,resp);
 }

 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  
  String jsonStr=readJsonFromRequestBody(req);
  System.out.print(jsonStr);
  //保存请求数据的JSONArray对象
  JSONArray jsonArray=null;
  //用户选择的图书信息以JSONObject对象来表示
  JSONObject jsonObject=null;
  //用于保存响应数据的JSONAray对象
  JSONArray jsonRespArray=new JSONArray();
  
  try{
   //以客户端发送的JSON串构造JSONAray对象
   jsonArray=new JSONArray(jsonStr);
   for(int i=0;i<jsonArray.length();i++){
    jsonObject=jsonArray.getJSONObject(i);
    int id=jsonObject.getInt("id");
    Book book=BookManager.getBook(id);
    
    jsonRespArray.put(new JSONObject(book));
   }
  }
  catch(JSONException e){
   e.printStackTrace();
  }
  
  resp.setContentType("text/json;charset=UTF-8");
  PrintWriter out=resp.getWriter();
  out.println(jsonRespArray.toString());
  out.close();
 }

 /**
  *  从请求体中读取客户端发送的JSON串
  *  @param request 请求对象
  *  @return String 类型,接收到的JSON串
  */
 private String readJsonFromRequestBody(HttpServletRequest req){
  StringBuffer jsonBuf=new StringBuffer();
  char[] buf=new char[2048];
  int len=-1;
  try{
   BufferedReader reader=req.getReader();
   while((len=reader.read(buf))!=-1){
    jsonBuf.append(new String(buf,0,len));
   }
  }
  catch(IOException e){
   e.printStackTrace();
  }
  return jsonBuf.toString();
 }
 
}

jsonBook.jsp:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>      
 <script type="text/javascript" src="json/json2.js"></script>
 <script type="text/javascript" src="js/commonBook.js"></script>
 <script type="text/javascript" src="js/jsonBook.js"></script>
 
  </head>
 
  <body>
 <form action="#">
  <select id="books" size="5" multiple="multiple" onchange="sendBooks();">
   <%
    List books=BookManager.getBooks();
    Iterator it=books.iterator();
    while(it.hasNext()){
     Book book=(Book)it.next();
    %>
    <option value="<%=book.getId() %>"><%=book.getTitle() %></option>
    <% } %>
  </select>
  
  <span id="booksHeader"></span>
  <table id="booksTable" border="0">
   <tbody id="booksBody">
   </tbody>
  </table>
 </form>  
  </body>
</html>

jsonBook.js:

var xmlHttp;
function createXMLHttpRequest(){
  if(window.ActiveXObject)
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 else if(window.XMLHttpRequest)
  xmlHttp=new XMLHttpRequest();
}

function createJson(){
 var books=new Array();
 var options=document.getElementById("books").options;
 var option=null;
 var j=0;
 
 for(var i=0;i<options.length;i++){
  option=options[i];
  if(option.selected){
   books[j]=new Book(option.value);
   j++;
  }
 }
 //将javascript 的数组转换为JSON串返回
 return JSON.stringify(books);
}

function Book(id){
 this.id=id;
}

//发送异步请求
function sendBooks(){
 createXMLHttpRequest();
 var jsonBook=createJson();
 //这个文件是放在WebRoot下js目录,访问servlet时出现问题?
 //var url="../jsonBookServlet?timeStamp="+new Date().getTime();
 var url="/json-servlet/jsonBookServlet?timeStamp="+new Date().getTime(); //使用绝对路径
 xmlHttp.open("POST",url,true);
 xmlHttp.onreadystatechange=handleStateChange;
 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 xmlHttp.send(jsonBook);
}

//处理响应数据
function handleStateChange(){
 if(xmlHttp.readyState==4){
  if(xmlHttp.status==200){
   clearPreviousResult();
   parseResults();
  }
 }
}

//解析服务器响应的json串
function parseResults(){
 //将服务器发回的JSON串转换为javascript中的数组
 var bookArray=eval('('+xmlHttp.responseText+')');
 if(bookArray.length>0){
  createTableHeader();
 }

 for(var i=0;i<bookArray.length;i++){
  addTableRow(bookArray[i]);
 }
 
 var booksHeader=document.createElement("h2");
 var booksHeaderText=document.createTextNode("你所选择的图书详细信息: ");
 booksHeader.appendChild(booksHeaderText);
 document.getElementById("booksTable").setAttribute("border", "1");
}

运行前把json2.js的第一行注释掉,否则报错。

你可能感兴趣的:(JavaScript,json,Ajax,应用服务器,servlet)