package com.lj.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.lj.lingling.model.Person;
public class ResponseBody extends HttpServlet
{
Map<Integer, List<Person>> persons=new HashMap<Integer, List<Person>>();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
//获取部门id
int did=Integer.parseInt(request.getParameter("did"));
//获取用户列表对象
List<Person> ps=persons.get(did);
//拼接xml
StringBuffer px=new StringBuffer();
px.append("<persons>");
for(Person p:ps){
px.append("<id>").append(p.getId()).append("</id>");
px.append("<name>").append(p.getName()).append("</name>");
px.append("<age>").append(p.getAge()).append("</age>");
}
px.append("</persons>");
out.write(px.toString());
out.flush();
out.close();
}
public ResponseBody()
{
List<Person> list=new ArrayList<Person>();
list.add(new Person(1,"james",25));
list.add(new Person(2,"smith",22));
persons.put(1, list);
}
}
这里有一个关键的地方就是设置response的ContentType：
response.setContentType("text/xml;charset=utf-8");
这里把返回文本类型设置为text/xml，这样浏览器就会对文本内容进行xml的解析，并显示在浏览器里。
然后是js的代码：
<script type="text/javascript">
window.onload=init;
function init(){
var btn=document.getElementById("getData");
btn.onclick=getData;
}
function getData(){
var xhr=new XMLHttpRequest();
console.log(xhr);
xhr.open("POST", "<%=path%>/servlet/ResponseBody?did=1", true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//console.log(xhr.responseText);
console.log(xhr.responseXML);
//获取person节点
var pns=xmlDoc.getElementsByTagName("persons");
// console.log(pns.length);
//遍历所有节点， 获取id，name， age
for(var i=0;i<pns.length;i++){
console.log((pns[i].getElementsByTagName("id"))[1].firstChild.nodeValue);
}
}
};
}
</script>
</head>
<body>
<input type="button" value="获取数据" id="getData"/>
<div id="serverData"></div>
</body>
</html>
========================================================================
接下来是json数据类型
首先在servlet里面通过PrintWriter写入数据。
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
//获取部门id
int did=Integer.parseInt(request.getParameter("did"));
//获取用户列表对象
List<Person> ps=persons.get(did);
//拼接xml
StringBuffer px=new StringBuffer();
px.append("[");
for(Person p:ps){
px.append("{");
px.append("id:").append(p.getId()).append(",");
px.append("name:\"").append(p.getName()).append("\",");
px.append("age:").append(p.getAge()).append("},");
}
px.deleteCharAt(px.lastIndexOf(","));
px.append("]");
out.write(px.toString());
out.flush();
out.close();
页面里的js代码如下：
function getData(){
var xhr=new XMLHttpRequest();
console.log(xhr);
xhr.open("get", "<%=path%>/servlet/ResponseJson?did=1", true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//console.log(xhr.responseText);
console.log(xhr.responseText);
var ps=eval(xhr.responseText);
console.log(ps.length);
var node="";
for(var i=0;i<ps.length;i++){
node+=ps[i].id+"-------"+ps[i].name+"======<br>";
}
document.getElementById("persons").innerHTML=node;
}
};
}
这里调用了eval(xhr.responseText)， 该函数的作用是讲获取的数据转换成json数据类型。
然后通过for循环来获取所有对象内容。
分享到：
相关推荐
在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种技术，它允许页面在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。而Struts2是一个强大的MVC（Model-View-Controller）框架，它广泛应用...
JSON支持的数据类型包括字符串、数字、布尔值、数组、对象以及null，这些都可以直接被JavaScript解析。 2. **Ajax基础** Ajax的核心是XMLHttpRequest对象，它允许在后台与服务器端交换数据，并在不刷新页面的情况...
在"Ajax Tutorial for Beginners with XML - JSON- Part 2"这个压缩包中，可能包含了第二部分的教程内容，涉及如何在ASP.NET中设置Ajax请求，以及如何处理XML或JSON数据。可能涵盖的话题包括： 1. 创建ASP.NET Web...
ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，能够帮助开发者在网页上实现复杂的数据展示。本教程将深入讲解如何通过AJAX技术实现ECharts...
4. **AJAX请求**：当用户提交影片信息后，JavaScript会使用XMLHttpRequest或更现代的fetch API发送异步请求到服务器，将数据传送到后台。 5. **JSON格式**：在发送和接收数据时，通常使用JSON（JavaScript Object ...
在探讨如何利用JavaScript实现前后台（后端与前端）之间传输JSON数据时，首先需要明确JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript的一个子集。JSON易于人阅读和编写，同时也...
这种技术通常涉及到AJAX（Asynchronous JavaScript and XML），即使页面不刷新也能实现数据交换。本文将详细讲解如何利用JS从PHP获取大量数据，并将其有效地展示在网页上。 首先，我们需要理解PHP的角色。PHP是一种...
1. **数据类型配置（`dataType`）：**当后台数据为 JSON 格式时，`dataType` 应设置为 "json"。这样 jQuery 会自动将返回的 JSON 数据解析成 JavaScript 对象。 2. **处理数据的传统性（`traditional`）：**设置为 ...
在Ajax配置中，`url`指定请求的服务器端URL，`dataType`定义了预期的服务器响应数据类型，这里是JSON。`type`是请求类型，可以是GET或POST，这里使用了POST。`async`表示是否异步执行，这里设为`false`意味着同步...
在与Servlet交互时，后台可以通过`response.getWriter().write()`将JSON数据返回给前端，前端通过eval或JSON.parse将字符串转化为JavaScript对象。 针对GET请求的替换，我们可以使用AJAX的GET方式，例如： ```...
### ASP.NET 2.0中利用Ajax 2.0实现JSON传送大量页面数据 #### 一、背景介绍 在Web开发中，随着用户对交互体验的要求越来越高，如何高效地处理前端与后端之间的数据交互成为了关键问题之一。尤其是在ASP.NET 2.0...
5. **JavaScript处理响应**：在客户端，接收到响应后，JavaScript解析数据（JSON或XML），并更新页面上的提示区域，展示匹配的结果。 6. **用户交互**：用户可以选择提示中的某一项，或者继续输入，触发新的Ajax...
这篇文章主要介绍了使用JavaScript（简称JS）的Ajax技术将数据传送到服务器后台，并对后台返回的字符串进行处理的方法。本文将详细阐述相关知识点，包括Ajax技术、HTTP请求方法、JSON数据格式处理，以及如何在后台...
虽然名称中包含XML，但现代的Ajax交互更常使用JSON（JavaScript Object Notation）格式来传递数据。AjaxFileUpload.js 可能会期望服务器返回JSON格式的数据，以便解析并处理上传响应。 ### 5. 事件处理 该库提供了...
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下更新部分网页内容。 传统的Web应用通常采用“请求-等待-请求”的模式，用户每次提交表单或点击链接后...
2. **数据交换**：使用XML或JSON等格式进行数据交换。 3. **局部更新**：通过JavaScript操作DOM来实现页面局部更新，而不是整个页面刷新。 #### 四、XMLHttpRequest详解 `XMLHttpRequest`对象是实现AJAX的核心技术...
服务器端的处理可能包括验证文件类型、大小、存储位置等，并可能将处理结果以JSON或XML格式返回给前端。 在实现过程中，需要注意的是文件上传的安全性和性能优化。比如，可以设置文件大小限制，防止大文件导致...
这些报表通常由专门的报表工具生成，如BIRT (Business Intelligence and Reporting Tools) 或FlexReport等，它们能够连接到各种数据源，如数据库、XML文件或Web服务，将数据转换为易于理解的视觉元素。 在提供的...
在聊天室中，AJAX用于后台数据的实时拉取，当用户发送消息后，AJAX发送请求到服务器，服务器处理后返回最新的聊天记录，然后在客户端使用JavaScript更新聊天窗口，实现即时通讯。 2. **JSP（JavaServer Pages）**：...
3. **信息格式和错误处理**：确定客户端与服务器之间的通信格式（如 JSON、XML 等），并设计合理的错误处理机制。 4. **跨平台兼容性**：确保客户端支持主流浏览器（如 IE、Firefox）和操作系统（如 Windows、Linux...