Ajax的XML/JSON处理
Ajax
XHR/JS/
onreadystatechange=回调函数
readyState = 0,1,2,3,4
status = 服务器响应状态码
xhr.responseText/responseXML
处理XML数据
1:收发XML 2：JSON
3：封装AJAX的实现
1：获取服务器返回的XML数据
1：为什么要返回xml数据 - 返回的数据不是单一的一个值，如果返回的是一个集合List<Map> Map Studs[],object[],List<Bean>
在Ajax中，的回调函数中，只能接收文本,就要求将对象转成XML数据。
示例：
通过ajax查询数据库中的所有学生信息- List<Stud>，显示到界面上。
将List<Stud>转成XML文档。
核心：
ajax这边使用xhr.responseXMl获取一个dom对象。
1：开发后台
查询List<Stud>
1：手式转换成 XML
protectedvoiddoGet(HttpServletRequest req,HttpServletResponse resp) throwsServletException,IOException {
List<Stud> list= newArrayList<>();
for(inti= 0; < 10; ++) {
.add(newStud("Jack"+ ));
}
//模拟查询完成
//可以手工的转
.setContentType("text/xml;charset=UTF-8");
StringBuffer sbStringBuffer("<?xml version='1.0' encoding='UTF-8'?><studs>");
for(Stud stud:){
.append("<stud><name>"+.getName()+"</name><age>".getAge()+"</age></stud>"}
"</studs>"PrintWriter out= .getWriter();
.print(.toString());
}
测试是否可以显示一个xml的数据：
2：用JSP帮助转换
<%@pagelanguage="java"contentType="text/xml; charset=UTF-8"%><%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%>
<studs>
c:forEachitems="${list}"var="stud"studname>${stud.name}</age${stud.age}c:forEach>
3：使用第三方的工具转换
将List<Bean>转成XML文档。
Xstream >
2前台来获取数据：
1：使用 DOM方式去解析
varcontextPath = "${pageContext.request.contextPath}";
$("#btnGet").click(function() {
varurl = contextPath + "/stud"xhr.open("GET"xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
//都可以通过responseText的方式验证返回的数据是否正确
//var res = xhr.responseText;
//alert(res);
//获取DOM对象
vardom = xhr.responseXML;
//将dom当成文档对象
varstuds = dom.getElementsByTagName("stud"(vari = 0; i < studs.length; i++) {
//目前使得的是JS的dom方式
varstud = studs[i];
varnm = stud.getElementsByTagName("name")[0].firstChild.nodeValue;
varage = stud.getElementsByTagName("age"html = "<tr><td>"+nm+"</td><td>"+age+"</td></tr>""#tb").append(html);
}
};
xhr.send();
});
2：使用jquery解析xml文档
var//可以使用jquery解析
$(dom).find().each(function(idx,ele){//<stud><name/><age/></stud>
varnm = $(ele).find().text();
varage = $(ele).find(});
});
2：向服务器发送XML结构数据
关键 ：
1：必须是post类型。
2：必须设置请求头为 xhr.setRequestHeader(“Content-type”,”text/xml;charset=UTF-8”);
3：在send(“<xml....”);
4：服务器如何接收XML且解析XML - >
req.getInputStream(),解析XML - >DOm - > Jaxp-dom /dom4j
functionsendXml() {
"POST"xhr.setRequestHeader("Content-Type"xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
alert("成功了"};
varxml ='<studs><stud><name>Jack</name></stud><stud><name>张三</name></stud></studs>'xhr.send(xml);
后台的解析：
@Override
protecteddoPost(HttpServletRequest .setCharacterEncoding("UTF-8"InputStream in=
.getInputStream();
StringBuffer();
byte[] bsbyte[1024*4];
intlen= 0;
while((=.read())!=-1){
.append(newString(//解析
try{
DocumentBuilder db= DocumentBuilderFactory.newInstance().newDocumentBuilder();
Document dom.parse(newByteArrayInputStream(.toString().getBytes()));
NodeList nl.getElementsByTagName(=0;<.getLength();++){
Element ele= (Element) .item(String nm).item(0).getTextContent();
System.err.println(}
} catch(Exception e) {
.printStackTrace();
}
3:获取服务器返回的JSON数据
1：JSON的结构
List/Object[] - []
Map - {}
2 json本质是文本。
思想：
1：ajax这边都是通过 responseText方式来获取数据。
2：后台通过将对象转成 字符串 - json字符的形式返回数据。
1：获取服务器返回json数据
1：开发服务
< 9; //将List转成json- [{"name":"jack","age":33},....];
json= "[";
for){
if(.equals()){
+="{\"name\":\"""\",\"age\":""}"}else{
","+"]";
"text/plain;charset=UTF-8");
.getWriter().print();
2：使用第三方的工具
Apache-json-lib.jar
Fastjson.jar - alibaba
gson.jar - Google
JsonArray - 用于解析最外层是List,Object[],Set
JsonObject - 用于解析 Map,Bean
= JSONArray.toJSONString}
2：前台获取数据
1：使用ajax获取数据
通过responseText返回的是JSON串：
如何将jSON串转成JSON对象：
Var str = ‘[{...}]’;
Str = eval(“(“+str+”)”);
"/stud2"(xhr.status == 200) {
varjsonString = xhr.responseText;
varjson = eval("("+jsonString+")"i=0;i<json.length;i++){//{name:Jack,age:00}
varnm = json[i].name;
varage = json[i].age;
var
2:遍历的方式不同使用jquery的遍历
$.each(json,function(index,ele) {
var+ ele.nm + + ele.age
+ ).append(html);
});
4:封装ajax的请求
Var ajax =new Ajax();
Ajax.get(url,function(){ },”json”);
functionAjax(){
varxhr = null;
if(window.XMLHttpRequest){
xhr = newXMLHttpRequest();
ActiveXObject("Microsoft.XMLHttp"}
this.get=function(url,fun,type){//,xmltxt
(xhr.status==200){
varres = null(type=='json'){
res = xhr.responseText;
res = eval(+res+if'xml'res = xhr.responseXML;
}
if(typeof(fun)=="function"fun(res);
xhr.send();
};
}