`

JSON servlet实例 Ajax应用

    博客分类:
  • java
阅读更多

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的第一行注释掉,否则报错。

分享到:
评论

相关推荐

    jquery+ajax+json+servlet实例源码

    【标题】:“jQuery + AJAX + JSON + Servlet 实例源码” 这个实例源码主要展示了如何在Web开发中利用jQuery库进行AJAX异步请求,与后台Servlet进行数据交互,并通过JSON格式来序列化和反序列化数据。这些技术是...

    Ajax + JSON + Servlet + prototype.js(实现的一个Ajax实例)

    在Ajax应用中,Servlet通常用于接收客户端发送的Ajax请求,处理数据,然后返回JSON格式的响应。Servlet生命周期包括加载、初始化、服务、销毁等阶段,可以处理HTTP请求,并通过Response对象将结果回传给客户端。 **...

    Ajax+Servlet 实例

    **Ajax+Servlet 实例** Ajax(Asynchronous JavaScript and XML)技术是现代Web开发中的关键组成部分,它允许在不刷新整个页面的情况下与服务器进行异步数据交互。Servlet是Java Web开发中的一个标准,用于处理和...

    java+servlet+ajax程序

    四、Java + Servlet + Ajax 结合应用 1. 用户交互:Ajax允许用户在不离开当前页面的情况下发送请求,Servlet在后台处理请求并返回数据,JavaScript更新页面部分区域,提升了用户体验。 2. 实时更新:例如聊天应用,...

    基于jsp+servlet+Ajax异步登陆模拟web项目

    【基于jsp+servlet+Ajax异步登陆模拟web项目】是一个典型的Web开发实例,它整合了三种核心技术:JavaServer Pages(JSP)、Servlet以及Asynchronous JavaScript and XML(Ajax)。这个项目的核心目的是实现用户登录...

    Eclipse平台下的 Servlet AJAX代码实例.rar

    总之,"Eclipse平台下的Servlet AJAX代码实例"是一个很好的学习资源,它展示了如何在JSP页面中集成Servlet和AJAX技术,实现动态交互的Web应用。通过实践这个项目,开发者可以深入理解这两种技术的工作原理,提升Web...

    Servlet+ajax+jsp 购物车系统

    【Servlet+Ajax+jsp 购物车系统】是一个典型的Web应用程序示例,它整合了Java后端技术、异步JavaScript和XML(Ajax)以及JavaServer Pages(jsp)来实现动态网页交互。在这个系统中,MySQL数据库用于存储商品信息和...

    AJAX+servlet实例入门,搞定AJAX简单易学

    本教程将带你入门AJAX和Servlet的实战应用。 一、AJAX基础 1. **什么是AJAX**:AJAX并不是一种新的编程语言,而是使用现有技术(JavaScript、XML、HTML、CSS等)的新方法。它通过创建XMLHttpRequest对象,实现...

    检来的json+servler+ajax 实例

    在本实例中,“json+servler+ajax”结合使用,实现了一种常见Web应用的交互模式:前端使用Ajax发送请求到后端Servlet,Servlet处理请求并生成JSON数据,再将这些数据以JSON格式响应给Ajax,最后前端JavaScript解析...

    AJAX+servlet入门实例用户注册

    在Web开发中,AJAX(Asynchronous JavaScript and XML)和Servlet是两种关键的技术,它们共同构建了动态、交互性强的Web应用程序。这个入门实例将向我们展示如何利用AJAX与Servlet实现用户注册功能,从而提升用户...

    AJAX+servlet实例入门

    在提供的文件列表中,"28094453982.doc" 可能包含一个具体的AJAX和Servlet结合的实例教程,指导读者如何实现这样的功能。"lindsoft.net源码必读.txt" 可能是一份关于阅读和理解相关源码的指南,帮助开发者更好地学习...

    Ajax JSON 实例For Java

    本实例以"JSON2.0"库为基础,结合Servlet技术,展示了如何在Java环境中构建一个Ajax应用。JSON2.0是Douglas Crockford提供的一个纯JavaScript实现的JSON解析器和字符串化器,支持所有现代浏览器,包括IE8及以上版本...

    Servlet+Ajax实现简易的仿百度搜索框智能提示

    当第一个请求到达时,服务器会实例化Servlet并调用其`init()`方法进行初始化。之后,每次请求都将调用`service()`方法来处理。最后,当Servlet不再需要时,服务器会调用`destroy()`方法释放资源。 2. **Servlet配置...

    Ajax和servlet数据交互小实例

    - **JSON数据格式**:现代应用中,通常使用JSON而非XML作为Ajax传输的数据格式,因为JSON更简洁且易读。 综上所述,Ajax和Servlet的结合为Web应用提供了高效的数据交互手段,实现了无刷新验证等实用功能,极大地...

    基于jsp+servlet+ajax的图书管理系统.zip

    在IT行业中,构建Web应用程序是常见的任务,而“基于jsp+servlet+ajax的图书管理系统”就是一个这样的实例,它利用了Java Web技术栈来实现对图书信息的高效管理和交互。这个系统的核心组件包括JSP(JavaServer Pages...

    ajax+servlet/struts/json

    通过学习这个资源,开发者将能够理解如何在实际项目中整合Ajax、Servlet、Struts和JSON,提升Web应用的交互性和性能。这些技术的结合使得开发者可以构建出响应式、高效的Web应用程序,同时减少了网络带宽的消耗和...

    servlet+ajax做的两个下拉列表联动

    在Web开发中,"servlet+ajax做的两个下拉列表联动"是一...总之,"servlet+ajax做的两个下拉列表联动"是Web开发中一个典型的前后端交互实例,它结合了服务器处理和客户端动态更新,提供了一种高效、流畅的用户交互方式。

    java+ajax+json+jquery完整实例

    这个“java+ajax+json+jquery完整实例”提供了一个实际的应用场景,展示了如何将这些技术有效地结合在一起。下面,我们将详细讨论这些技术以及在这个实例中的应用。 1. **Java**:Java是一种广泛使用的面向对象的...

    ajax和servlet验证实例

    本实例将结合两者,展示如何在后台使用Servlet进行数据验证,而在前端利用Ajax实现实时反馈。 首先,我们需要理解Ajax的工作原理。Ajax的核心是XMLHttpRequest对象,它允许JavaScript向服务器发送HTTP请求,并接收...

Global site tag (gtag.js) - Google Analytics