javascript获取后台传送的xml类型数据以及json类型数据

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循环来获取所有对象内容。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值