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文档。

核心：

后台输出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();

};

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!