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文档。
核心：
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(//解析
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= "[";
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;
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();
};
}
