文档章节

Ajax_XML_JSON

CarlDing
 CarlDing
发布于 2016/05/21 22:50
字数 1250
阅读 51
收藏 4

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

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

// 模拟查询数据库

List<Stud> list = new ArrayList<>();

for (int i = 0; i < 10; i++) {

list.add(new Stud("Jack" + i, 3 * i));

}

//模拟查询完成

//可以手工的转

resp.setContentType("text/xml;charset=UTF-8");

StringBuffer sb = new StringBuffer("<?xml version='1.0' encoding='UTF-8'?><studs>");

for(Stud stud:list){

sb.append("<stud><name>"+stud.getName()+"</name><age>"+stud.getAge()+"</age></stud>");

}

sb.append("</studs>");

PrintWriter out = resp.getWriter();

out.print(sb.toString());

}

 

测试是否可以显示一个xml的数据:

 

 

 

2:用JSP帮助转换

<%@ page language="java" contentType="text/xml; charset=UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<studs>

<c:forEach items="${list}" var="stud">

<stud>

<name>${stud.name}</name>

<age>${stud.age}</age>

</stud>

</c:forEach>

</studs>

 

 

3:使用第三方的工具转换

 将List<Bean>转成XML文档。

 Xstream  >

   

 

2前台来获取数据:

1:使用 DOM方式去解析

var contextPath = "${pageContext.request.contextPath}";

$("#btnGet").click(function() {

var url = contextPath + "/stud";

xhr.open("GET", url, true);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

//都可以通过responseText的方式验证返回的数据是否正确

//var res = xhr.responseText;

//alert(res);

//获取DOM对象

var dom = xhr.responseXML;

//将dom当成文档对象

var studs = dom.getElementsByTagName("stud");

for (var i = 0; i < studs.length; i++) {

//目前使得的是JS的dom方式

var stud = studs[i];

var nm = stud.getElementsByTagName("name")[0].firstChild.nodeValue;

var age = stud.getElementsByTagName("age")[0].firstChild.nodeValue;

var html = "<tr><td>"+nm+"</td><td>"+age+"</td></tr>";

$("#tb").append(html);

}

}

}

};

xhr.send();

});

 

 

2:使用jquery解析xml文档

var contextPath = "${pageContext.request.contextPath}";

$("#btnGet").click(function() {

var url = contextPath + "/stud";

xhr.open("GET", url, true);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

//都可以通过responseText的方式验证返回的数据是否正确

//var res = xhr.responseText;

//alert(res);

//获取DOM对象

var dom = xhr.responseXML;

//可以使用jquery解析

$(dom).find("stud").each(function(idx,ele){//<stud><name/><age/></stud>

var nm =  $(ele).find("name").text();

var age = $(ele).find("age").text();

var html = "<tr><td>"+nm+"</td><td>"+age+"</td></tr>";

$("#tb").append(html);

});

 

}

}

};

xhr.send();

});

 

 

 

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


function sendXml() {

xhr.open("POST", contextPath + "/stud", true);

xhr.setRequestHeader("Content-Type", "text/xml;charset=UTF-8");

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

if(xhr.status==200){

alert("成功了");

}

}

};

var xml ='<studs><stud><name>Jack</name></stud><stud><name>张三</name></stud></studs>';

xhr.send(xml);

}

 

后台的解析:

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

req.setCharacterEncoding("UTF-8");

InputStream in =

req.getInputStream();

StringBuffer sb = new StringBuffer();

byte[] bs = new byte[1024*4];

int len = 0;

while((len=in.read(bs))!=-1){

sb.append(new String(bs,0,len));

}

//解析

try {

DocumentBuilder db =  DocumentBuilderFactory.newInstance().newDocumentBuilder();

Document dom =  db.parse(new ByteArrayInputStream(sb.toString().getBytes()));

NodeList nl =  dom.getElementsByTagName("stud");

for(int i=0;i<nl.getLength();i++){

Element ele = (Element) nl.item(i);

String nm =  ele.getElementsByTagName("name").item(0).getTextContent();

System.err.println(nm);

}

 

} catch (Exception e) {

e.printStackTrace();

}

 

}

 

 

 

3:获取服务器返回的JSON数据

1:JSON的结构

   List/Object[]  - []
   Map        - {}

2 json本质是文本。

 

思想:

   1:ajax这边都是通过 responseText方式来获取数据。

   2:后台通过将对象转成 字符串 - json字符的形式返回数据。

 

 

1:获取服务器返回json数据

1:开发服务

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

// 模拟查询数据库

List<Stud> list = new ArrayList<>();

for (int i = 0; i < 9; i++) {

list.add(new Stud("Jack" + i, 3 * i));

}

//将List转成json - [{"name":"jack","age":33},....];

String json  = "[";

for(Stud stud:list){

if(json.equals("[")){

json+="{\"name\":\""+stud.getName()+"\",\"age\":"+stud.getAge()+"}";

}else{

json+=","+"{\"name\":\""+stud.getName()+"\",\"age\":"+stud.getAge()+"}";

}

}

json+="]";

resp.setContentType("text/plain;charset=UTF-8");

resp.getWriter().print(json);

}

 

 

 

 

2:使用第三方的工具

Apache-json-lib.jar

Fastjson.jar - alibaba

gson.jar - Google

 

 

JsonArray - 用于解析最外层是List,Object[],Set

JsonObject - 用于解析 Map,Bean

 

 

 

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

// 模拟查询数据库

List<Stud> list = new ArrayList<>();

for (int i = 0; i < 9; i++) {

list.add(new Stud("Jack" + i, 3 * i));

}

String json =  JSONArray.toJSONString(list);

resp.setContentType("text/plain;charset=UTF-8");

resp.getWriter().print(json);

}

 

 

 

 

2:前台获取数据

1:使用ajax获取数据

通过responseText返回的是JSON串:

如何将jSON串转成JSON对象:

   Var str  = [{...}];

   Str = eval((+str+));

 

$("#btnGet").click(function() {

var url = contextPath + "/stud2";

xhr.open("GET", url, true);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

var jsonString = xhr.responseText;

var json = eval("("+jsonString+")");

for(var i=0;i<json.length;i++){//{name:Jack,age:00}

var nm = json[i].name;

var age = json[i].age;

var html = "<tr><td>"+nm+"</td><td>"+age+"</td></tr>";

$("#tb").append(html);

}

}

}

};

xhr.send();

});

 

 

2:遍历的方式不同使用jquery的遍历

$.each(json, function(index, ele) {

var html = "<tr><td>" + ele.nm + "</td><td>" + ele.age

+ "</td></tr>";

$("#tb").append(html);

});

 

 

 

 

4:封装ajax的请求

   Var ajax  =new Ajax();

   Ajax.get(url,function(){       },json);

 

 

function Ajax(){

var xhr = null;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHttp");

}

 

 

//添加一个方法

this.get=function(url,fun,type){//json,xml,txt

xhr.open("GET",url);

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

if(xhr.status==200){

var res = null;

if(type=='json'){

res = xhr.responseText;

res = eval("("+res+")");

}else if(type=='xml'){

res = xhr.responseXML;

}else{

res = xhr.responseText;

}

if(typeof(fun)=="function"){

fun(res);

}

}

}

};

xhr.send();

};

 

}

 

 

 

 

 

 

 

© 著作权归作者所有

CarlDing
粉丝 5
博文 106
码字总数 78103
作品 0
济南
其他
私信 提问
最简单最实用的ajax(一)基础通用ajax

最简单最实用的ajax(一)基础通用ajax 最通用的ajax实现整理,不调用jquery,asp.net ajax等框架,最原始ajax实现,兼容IE,FireFox。 三种最常用的数据格式(字符串、XML、JSON)的ajax实现...

科技小毛
2017/10/12
0
0
JSON简介

http://baike.baidu.com/view/136475.htm 转自百度百科 什么是JSON? [ 编辑本段] JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生...

晨曦之光
2012/03/09
302
0
struts2使用json不能在后台action中获取前台jsp的值?

xml中我配置了相对应的,前台var param = {}; param={ "checkIds":"1" }; alert(JSON.stringify(param)); param = JSON.stringify(param); $.ajax({ type:"POST", url:"setting_ajax!ajax.a......

蛇叔
2013/09/21
1K
0
JSON4J

JavaScriptTM 对象表示法 (JSON4J) 库是一组 JavaScript 对象表示法 (JSON) 的实现,用于处理 Java 环境中使用的类。JSON4J 库提供了下列功能: 简单 Java 模型,用于构造和处理要作为 JSON...

匿名
2012/03/30
1K
0
thinkphp中的AJAX返回ajaxReturn()

系统支持任何的AJAX类库,Action类提供了ajaxReturn方法用于AJAX调用后返回数据给客户端。并且支持JSON、XML和EVAL三种方式给客户端接受数据,通过配置DEFAULTAJAXRETURN进行设置,默认配置采...

桃子红了呐
2017/01/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
今天
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部