前台页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ajax XML数据处理演示</title> <script type="text/javascript"> //get方式ajax function send1(){ alert("ok"); var name=document.getElementsByName("name")[0].value; var age=do编程客栈cument.getElementsByName("age")[0].value; var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XMLHttp"); } var url="<c:url value='/XmlServlet?name='/>"+name+"&age="+age; //3设置访问方式 xhr.open("GET", url, true); //4设置访问成功返回后的操作 xhr.onreadystatechange=function(){ if(xhr.readyState==4){//返回 if(xhr.status==200){//响应代码正常 var txt=xhr.responseText; alert(txt); } } }; xhr.send(null); } </script> <!-- 前台以xml的格式向服务器发送数据 --> <script type="text/javascript"> //post方式ajax function send2(){ alert("222"); //1创建ajax对象 var xhr = null; if(window.XMLHttpRequest){//高版本 xhr = new XMLHttpRequest(); }else{//低版本 xhr = new ActiveXObject("Microsoft.XMLHttp"); } //2请求地址 var url = "<c:url value='/XmlServlet'/>"; //3设置访问方式 xhr.open("POST", url, true); //4设置访问成功返回后的操作 xhr.onreadystatechange=function(){ if(xhr.readyState==4){//返回 if(xhr.status==200){//响应代码正常 var xmlObj=xhr.responseXML; var users=xmlObj.getElementsByTagName("user"); for(var i=0;i<users.length;i++){ var id=users[i].getAttribute("id"); var name=users[i].childNodes[0].firstChild.data;//xml中的dom模型中的操作方法,和html中有点小差别 var age=users[i].childNodes[1].firstChild.data;//不能用childNodes["age"] alert(id+","+name+","+age); } } } }; var name=document.getElementsByName("name")[0].value; var age=document.getElementsByName("age")[0].value; var xml="<user><name>"+name+"</name><age>"+age+"</age></user>"; xhr.send(xml); } </script> </head> <body> Name: <input type="text" name="name"> <br /> Age: <input type="text" name="age"> <br /> <input type="button" value="Get提交" onclick="send1();" /> <br /> <input type="button" value="Post提交" onclick="send2()" /> <br /> </body> </html>
后台页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ajax XML数据处理演示</title> <script type="text/javascript"> //get方式ajax function send1(){ alert("ok"); var name=document.getElementsByName("name")[0].value; var age=document.getElementsByName("age")[0].value; var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XMLHttp"); } var url="<c:url value='/XmlServlet?name='/>"+name+"&age="+age; //3设置访问方式 xhr.open("GET", url, true); //4设置访问成功返回后的操作 xhr.onreadystatechange=function(){ if(xhr.readyState==4){/编程客栈/返回 if(xhr.status==200){//响应代码正常 var txt=xhr.responseText; alert(txt); } } }; xhr.send(null); } </script> <!-- 前台以xml的格式向服务器发送数据 --> <script type="text/javascript"> //post方式ajax function send2(){ alert("222"); //1创建ajax对象 var xhr = null; if(window.XMLHttpRequest){//高版本 xhr = new XMLHttpRequest(); }else{//低版本 xhr = new ActiveXObject("Microsoft.XMLHttp"); } //2请求地址 var url = "<c:url value='/XmlServlet'/>"; //3设置访问方式 xhr.open("POST", url, true); //4设置访问成功返回后的操作 xhr.onreadystatechange=function(){ if(xhr.readyState==4){//返回 if(xhr.status==200){//响应代码正常 var xmlObj=xhr.responseXML; var users=xmlObj.getElementsByTagName("user"); for(var i=0;i<users.length;i++){ var id=users[i].getAttribute("id"); var name=users[i].childNodes[0].firstChild.data;//xml中的dom模型中的操作方法,和html中有点小差别 var age=users[i].childNodes[1].firstChild.data;//不能用childNodes["age"] alert(id+","+name+","+age); } } } }; var name=document.getElementsByName("name")[0].value; var age=document.getElementsByName("age")[0].value; var xml="<user><name>"+name+"</name><age>"+age+"</age></user>"; xhr.send(xml); } </script> </head> <body> Name: <input type="text" name="name"> <br /> Age: <input type="text" name="age"> <br /> <input type="button" value="Get提交" onclick="send1();" /> <br /> <input type="button" value="Post提交" onclick="send2()" /> <br /> </body> </html>
--------------------------------------------------------------------------------
Ajax传输Json数据的要点利用Apache或者阿里巴巴的JSONArray类进行传输
前台代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Json数据处理演示</title>
<script type="text/javascript">
function ask1() {
//1创建ajax对象
var xhr = null;
if (window.XMLHttpRequest) {//高版本
xhr = new XMLHttpRequest();
} else {//低版本
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//2请求地址
var url = "<c:url value='/JsonServlet1'/>";
//3设置访问方式
xhr.open("POST", url, true);
//4设置访问成功返回后的操作
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {//返回
if (xhr.status == 200) {//响应代码正常
//※※※※※解析后台返回的json串
//js中eval()方法的功能:是校验参数文本串符合js中哪一种数据类型,并把其转换成对应类型的对象
var txt = xhr.responseText;
var users = eval("(" + txt + ")"); //把符合json格式的文本串 转换成 json对象
for ( var i = 0; i < users.length; i++) {
alert(users[i].id + "," + users[i].name + ","
+ users[i].age);
}
}
}
};
//5 发送
xhr.send(null);
}
function ask2() {
//1创建ajax对象
var xhr = null;
if (window.XMLHttpRequest) {//高版本
xhr = new XMLHttpRequest();
} else {//低版本
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//2请求地址
var url = "<c:url value='/JsonServwww.cppcns.comlet2'/>";
//3设置访问方式
xhr.open("POST", url, true);
//4设置访问成功返回后的操作
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {//返回
if (xhr.status == 200) {//响应代码正常
//※※※※※解析后台返回的json串
//js中eval()方法的功能:是校验参数文本串符合js中哪一种数据类型,并把其转换成对应类型的对象
var txt = xhr.responseText;
//alert(txt);
//把符合json格式的文本串 转换成 json对象
var users = eval("(" + txt + ")");
for ( var key in users)//map的便利方式
alert("属性:" + key + ",值:" + users[key]);
}
//for ( var i = 0; i < users.length; i++) {//list的遍历方式
//alert(users[i].id +","+users[i].name+","+users[i].age);
//}
};
};
//5 发送
xhr.send(null);
}
function ask3() {
//1创建ajax对象
var xhr = null;
if (window.XMLHttpRequest) {//高版本
xhr = new XMLHttpRequest();
} else {//低版本
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//2请求地址
var url = "<c:url value='/JsonServlet2'/>";
//3设置访问方式
xhr.open("POST", url, true);
//4设置访问成功返回后的操作
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {//返回
if (xhr.status == 200) {//响应代码正常
//※※※※※解析后台返回的json串
//js中eval()方法的功能:是校验参数文本串符合js中哪一种数据类型,并把其转换成对应类型的对象
var txt = xhr.responseText;
//alert(txt);
//把符合json格式的文本串 转换成 json对象
var users = eval("(" + txt + ")");
for ( var key in users)//map的便利方式
alert("属性:" + key + ",值:" + users[key]);
}
//for ( var i = 0; i < users.length; i++) {//list的遍历方式
//alert(users[i].id +","+users[i].name+","+users[i].age);
//}
};
};
//5 发送
xhr.send(null);
}
</script>
</head>
<body>
<input type="button" onclick="ask1();" value="ajax请求后台数据(手动封装json方式)" />
<br />
<input type="button" onclick="ask2();"
value="ajax请求后台数据(用apache工具封装json方式)" />
<input type="button" onclick="ask3()" value="ajax请求后台数据(用fastjson工具封装json方式)" />
</body>
</html>
JsonServlet1.java
package cn.hncu.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.hncu.domain.User; public class JsonServlet1 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //调用后台service.dao.query(),到数据库当中把信息读取出来 //为简化知识点的理解,此处后台部分的功能直接模拟 response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); List<User> users = new ArrayList<User>(); users.add(new User("A001","Jack",20)); users.add(new User("A002","Rose",22)); users.add(new User("B001","张三",20)); users.add(new User("B002","李四",30)); String json=""; //用java封装出json格式的字符串:[{name:"Jack",age:25}, {...}, {...} ] for(User u:users){ if(json.equals("")){ json="{name:\""+u.getName()+"\",id:\""+u.getId()+"\",age:"+u.getAge()+"}"; }else{ json = json +",{ name:\""+u.getName()+"\",id:\""+u.getId()+"\",age:"+u.getAge()+"}" ; } } json="["+json+"]"; out.print(json); } }
JsonServlet2.java
package cn.hncu.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.hncu.domain.User; import net.sf.json.JSONArray; import net.sf.json.JSONObject; public class JsonServlet2 extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); List<User> users = new ArrayList<User>(); users.add(new User("A001","Jack",20)); users.add(new User("A002","Rose",22)); users.add(new User("B001","张三",20)); users.add(new User("B002","李四",30)); String strJson=com.alibaba.fastjson.JSONArray.toJSONString(users); System.out.println(strJson); //用fastjson工具(只有一个jar包)帮我们把list转换成json串 Map<String, Object> map = new HashMap<String, Object>(); map.put("addr", "湖南"); map.put("height", "170"); map.put("marry", "no"); map.put("user", new User("A003","小李",25)); String strMap=com.alibaba.fastjson.JSONArray.toJSONString(map); out.print(strMap.toString()); } }
JsonServlet3.java
package cn.hncu.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import cn.hncu.domain.User; public class JsonServlet3 extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); List<User> users = new ArrayList<User>(); users.add(new User("A001","Jack",20)); userswww.cppcns.com.add(new User("A002","Rose",22)); users.add(new User("B001","张三",20)); users.add(new User("B002","李四",30)); //用fastjson工具(只有一个jar包)帮我们把list转换成json串 JSONArray json=JSONArray.fromObject(users); String strJson=json.toString(); System.out.println(strJson); Map<String, Object> map = new HashMap<String, Object>(); map.put("addr", "湖南"); map.put("height", "170"); map.put("marry", "no"); map.put("user", new User("A003","小李",25)); JSONObject obj = JSONObject.fromObject(map); System.out.println(obj.toString()); out.print(obj.toString()); } }
以上就是本文的全部内容,希望对大家的学习有所帮编程客栈助,也希望大家多多支持我们。
本文标题: Ajax如何传输Json和xml数据
本文地址: http://www.cppcns.com/wangluo/ajax/163461.html
© 著作权归作者所有
举报
发表评论
0/200