Ajax_XML_JSON

前端之家收集整理的这篇文章主要介绍了Ajax_XML_JSON前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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数据@H_502_57@@H_502_57@

1:为什么要返回xml数据 - 返回的数据不是单一的一个值,如果返回的是一个集合List<Map> Map Studs[],object[],List<Bean>

在Ajax中,的回调函数中,只能接收文本,就要求将对象转成XML数据。

示例:

通过ajax查询数据库中的所有学生信息- List<Stud>,显示到界面上。

将List<Stud>转成XML文档。

核心:

后台输出XML的文档结构。

ajax这边使用xhr.responseXMl获取一个dom对象。

1:开发后台@H_502_57@@H_502_57@

查询List<Stud>

1:手式转换成 XML@H_502_57@@H_502_57@

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

// 模拟查询数据库

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

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

.add(new@H_502_57@@H_502_57@Stud("Jack"+ ));

}

//模拟查询完成

//可以手工的转

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

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

for@H_502_57@@H_502_57@(Stud stud:){

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

"</studs>"PrintWriter out= .getWriter();

.print(.toString());

}

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

2:用JSP帮助转换@H_502_57@@H_502_57@

<%@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:使用第三方的工具转换@H_502_57@@H_502_57@

将List<Bean>转成XML文档。

Xstream >

2前台获取数据:@H_502_57@@H_502_57@

1:使用 DOM方式去解析@H_502_57@@H_502_57@

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

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

var@H_502_57@@H_502_57@url = contextPath + "/stud"xhr.open("GET"502_57@@H_502_57@xhr.onreadystatechange = function@H_502_57@@H_502_57@() {

if@H_502_57@@H_502_57@(xhr.readyState == 4) {

if@H_502_57@@H_502_57@(xhr.status == 200) {

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

//var res = xhr.responseText;

//alert(res);

//获取DOM对象

var@H_502_57@@H_502_57@dom = xhr.responseXML;

//将dom当成文档对象

var@H_502_57@@H_502_57@studs = dom.getElementsByTagName("stud"(var@H_502_57@@H_502_57@i = 0; i < studs.length; i++) {

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

var@H_502_57@@H_502_57@stud = studs[i];

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

var@H_502_57@@H_502_57@age = stud.getElementsByTagName("age"html = "<tr><td>"+nm+"</td><td>"+age+"</td></tr>""#tb").append(html);

}

};

xhr.send();

});

2:使用jquery解析xml文档@H_502_57@@H_502_57@

var@H_502_57@@H_502_57@//可以使用jquery解析

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

var@H_502_57@@H_502_57@nm = $(ele).find().text();

var@H_502_57@@H_502_57@age = $(ele).find(});

});

2:向服务器发送XML结构数据@H_502_57@@H_502_57@

关键 :

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@H_502_57@@H_502_57@sendXml() {

"POST"xhr.setRequestHeader("Content-Type"xhr.onreadystatechange=function@H_502_57@@H_502_57@(){

if@H_502_57@@H_502_57@(xhr.readyState==4){

if@H_502_57@@H_502_57@(xhr.status==200){

alert("成功了"};

var@H_502_57@@H_502_57@xml ='<studs><stud><name>Jack</name></stud><stud><name>张三</name></stud></studs>'xhr.send(xml);

后台的解析:

@Override

protected@H_502_57@@H_502_57@doPost(HttpServletRequest .setCharacterEncoding("UTF-8"InputStream in=

.getInputStream();

StringBuffer();

byte@H_502_57@@H_502_57@[] bsbyte@H_502_57@@H_502_57@[1024*4];

int@H_502_57@@H_502_57@len= 0;

while@H_502_57@@H_502_57@((=.read())!=-1){

.append(new@H_502_57@@H_502_57@String(//解析

try@H_502_57@@H_502_57@{

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

Document dom.parse(new@H_502_57@@H_502_57@ByteArrayInputStream(.toString().getBytes()));

NodeList nl.getElementsByTagName(=0;<.getLength();++){

Element ele= (Element) .item(String nm).item(0).getTextContent();

System.err@H_502_57@.println(}

} catch@H_502_57@@H_502_57@(Exception e) {

.printStackTrace();

}

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

1:JSON的结构

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

2 json本质是文本。

思想:

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

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

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

1:开发服务@H_502_57@@H_502_57@

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

json= "[";

for@H_502_57@@H_502_57@){

if@H_502_57@@H_502_57@(.equals()){

+="{\"name\":\"""\",\"age\":""}"}else@H_502_57@@H_502_57@{

","+"]";

"text/plain;charset=UTF-8");

.getWriter().print();

2:使用第三方的工具@H_502_57@@H_502_57@

Apache-json-lib.jar

Fastjson.jar - alibaba

gson.jar - Google

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

JsonObject - 用于解析 Map,Bean

= JSONArray.toJSONString}

2:前台获取数据@H_502_57@@H_502_57@

1:使用ajax获取数据@H_502_57@@H_502_57@

通过responseText返回的是JSON串:

如何将jSON串转成JSON对象:

Var str = [{...}];

Str = eval((+str+));

"/stud2"(xhr.status == 200) {

var@H_502_57@@H_502_57@jsonString = xhr.responseText;

var@H_502_57@@H_502_57@json = eval("("+jsonString+")"i=0;i<json.length;i++){//{name:Jack,age:00}

var@H_502_57@@H_502_57@nm = json[i].name;

var@H_502_57@@H_502_57@age = json[i].age;

var@H_502_57@@H_502_57@

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

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

var@H_502_57@@H_502_57@+ ele.nm + + ele.age

+ ).append(html);

});

4:封装ajax的请求@H_502_57@@H_502_57@

Var ajax =new Ajax();

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

function@H_502_57@@H_502_57@Ajax(){

var@H_502_57@@H_502_57@xhr = null@H_502_57@@H_502_57@;

if@H_502_57@@H_502_57@(window.XMLHttpRequest){

xhr = new@H_502_57@@H_502_57@XMLHttpRequest();

ActiveXObject("Microsoft.XMLHttp"}

//添加一个方法

this@H_502_57@@H_502_57@.get=function@H_502_57@@H_502_57@(url,fun,type){//,xmltxt

(xhr.status==200){

var@H_502_57@@H_502_57@res = null@H_502_57@@H_502_57@(type=='json'){

res = xhr.responseText;

res = eval(+res+if@H_502_57@@H_502_57@'xml'res = xhr.responseXML;

}

if@H_502_57@@H_502_57@(typeof@H_502_57@@H_502_57@(fun)=="function"fun(res);

xhr.send();

};

}

猜你在找的Ajax相关文章