Ajax如何傳輸Json和xml數(shù)據(jù)
更新時間：2016年09月15日 16:06:09 作者：wangjian_an
這篇文章主要為大家詳細(xì)介紹了Ajax如何傳輸Json和xml數(shù)據(jù),具有一定的參考價值，感興趣的小伙伴們可以參考一下
ajax傳輸xml數(shù)據(jù)：只要把數(shù)據(jù)封裝成xml格式就可以實(shí)現(xiàn)傳輸，前臺js用responseXML接收xml參數(shù)，后臺讀取用流和dom4j來解析
前臺頁面
<%@ 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數(shù)據(jù)處理演示</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設(shè)置訪問方式
xhr.open("GET", url, true);
//4設(shè)置訪問成功返回后的操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//返回
if(xhr.status==200){//響應(yīng)代碼正常
var txt=xhr.responseText;
alert(txt);
}
}
};
xhr.send(null);
}
</script>
<!-- 前臺以xml的格式向服務(wù)器發(fā)送數(shù)據(jù) -->
<script type="text/javascript">
//post方式ajax
function send2(){
alert("222");
//1創(chuàng)建ajax對象
var xhr = null;
if(window.XMLHttpRequest){//高版本
xhr = new XMLHttpRequest();
}else{//低版本
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//2請求地址
var url = "<c:url value='/XmlServlet'/>";
//3設(shè)置訪問方式
xhr.open("POST", url, true);
//4設(shè)置訪問成功返回后的操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//返回
if(xhr.status==200){//響應(yīng)代碼正常
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中有點(diǎn)小差別
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數(shù)據(jù)處理演示</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設(shè)置訪問方式
xhr.open("GET", url, true);
//4設(shè)置訪問成功返回后的操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//返回
if(xhr.status==200){//響應(yīng)代碼正常
var txt=xhr.responseText;
alert(txt);
}
}
};
xhr.send(null);
}
</script>
<!-- 前臺以xml的格式向服務(wù)器發(fā)送數(shù)據(jù) -->
<script type="text/javascript">
//post方式ajax
function send2(){
alert("222");
//1創(chuàng)建ajax對象
var xhr = null;
if(window.XMLHttpRequest){//高版本
xhr = new XMLHttpRequest();
}else{//低版本
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//2請求地址
var url = "<c:url value='/XmlServlet'/>";
//3設(shè)置訪問方式
xhr.open("POST", url, true);
//4設(shè)置訪問成功返回后的操作
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//返回
if(xhr.status==200){//響應(yīng)代碼正常
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中有點(diǎn)小差別
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數(shù)據(jù)的要點(diǎn)利用Apache或者阿里巴巴的JSONArray類進(jìn)行傳輸
前臺代碼
<%@ 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數(shù)據(jù)處理演示</title>
<script type="text/javascript">
function ask1() {
//1創(chuàng)建ajax對象
var xhr = null;
if (window.XMLHttpRequest) {//高版本
xhr = new XMLHttpRequest();
} else {//低版本
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//2請求地址
var url = "<c:url value='/JsonServlet1'/>";
//3設(shè)置訪問方式
xhr.open("POST", url, true);
//4設(shè)置訪問成功返回后的操作
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {//返回
if (xhr.status == 200) {//響應(yīng)代碼正常
//※※※※※解析后臺返回的json串
//js中eval()方法的功能：是校驗(yàn)參數(shù)文本串符合js中哪一種數(shù)據(jù)類型，并把其轉(zhuǎn)換成對應(yīng)類型的對象
var txt = xhr.responseText;
var users = eval("(" + txt + ")"); //把符合json格式的文本串 轉(zhuǎn)換成 json對象
for ( var i = 0; i < users.length; i++) {
alert(users[i].id + "," + users[i].name + ","
+ users[i].age);
}
}
}
};
//5 發(fā)送
xhr.send(null);
}
function ask2() {
//1創(chuàng)建ajax對象
var xhr = null;
if (window.XMLHttpRequest) {//高版本
xhr = new XMLHttpRequest();
} else {//低版本
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//2請求地址
var url = "<c:url value='/JsonServlet2'/>";
//3設(shè)置訪問方式
xhr.open("POST", url, true);
//4設(shè)置訪問成功返回后的操作
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {//返回
if (xhr.status == 200) {//響應(yīng)代碼正常
//※※※※※解析后臺返回的json串
//js中eval()方法的功能：是校驗(yàn)參數(shù)文本串符合js中哪一種數(shù)據(jù)類型，并把其轉(zhuǎn)換成對應(yīng)類型的對象
var txt = xhr.responseText;
//alert(txt);
//把符合json格式的文本串 轉(zhuǎn)換成 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 發(fā)送
xhr.send(null);
}
function ask3() {
//1創(chuàng)建ajax對象
var xhr = null;
if (window.XMLHttpRequest) {//高版本
xhr = new XMLHttpRequest();
} else {//低版本
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//2請求地址
var url = "<c:url value='/JsonServlet2'/>";
//3設(shè)置訪問方式
xhr.open("POST", url, true);
//4設(shè)置訪問成功返回后的操作
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {//返回
if (xhr.status == 200) {//響應(yīng)代碼正常
//※※※※※解析后臺返回的json串
//js中eval()方法的功能：是校驗(yàn)參數(shù)文本串符合js中哪一種數(shù)據(jù)類型，并把其轉(zhuǎn)換成對應(yīng)類型的對象
var txt = xhr.responseText;
//alert(txt);
//把符合json格式的文本串 轉(zhuǎn)換成 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 發(fā)送
xhr.send(null);
}
</script>
</head>
<body>
<input type="button" onclick="ask1();" value="ajax請求后臺數(shù)據(jù)(手動封裝json方式)" />
<br />
<input type="button" onclick="ask2();"
value="ajax請求后臺數(shù)據(jù)(用apache工具封裝json方式)" />
<input type="button" onclick="ask3()" value="ajax請求后臺數(shù)據(jù)(用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 {
//調(diào)用后臺service.dao.query()，到數(shù)據(jù)庫當(dāng)中把信息讀取出來
//為簡化知識點(diǎn)的理解，此處后臺部分的功能直接模擬
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轉(zhuǎn)換成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));
users.add(new User("A002","Rose",22));
users.add(new User("B001","張三",20));
users.add(new User("B002","李四",30));
//用fastjson工具(只有一個jar包)幫我們把list轉(zhuǎn)換成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());
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Ajax二級聯(lián)動菜單實(shí)現(xiàn)原理及代碼
二級聯(lián)動菜單,一個多么方便且實(shí)用的用戶交互功能，有需求的朋友可以參考下本文，或許對你的菜單知識深入學(xué)習(xí)有幫助，好了，閑話不多說，看代碼吧2013-01-01
這篇文章主要為大家詳細(xì)介紹了ajax無刷新驗(yàn)證注冊信息示例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了ajax請求添加自定義header參數(shù)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Ajax中數(shù)據(jù)傳遞的另一種模式 javascript Object Notation思想（JSON）
JSON是一個誘人的技術(shù)，準(zhǔn)備做一個大量的試用。希望屆時可以獲取大的性能提高。2010-12-12
ajax實(shí)現(xiàn)從后臺拿數(shù)據(jù)顯示在HTML前端的方法
今天小編就為大家分享一篇ajax實(shí)現(xiàn)從后臺拿數(shù)據(jù)顯示在HTML前端的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Ajax請求發(fā)送成功但不進(jìn)success的解決方法
下面小編就為大家分享一篇Ajax請求發(fā)送成功但不進(jìn)success的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
下面小編就為大家?guī)硪黄猘jax局部刷新實(shí)例 (三種方法推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
在web頁面中使用ajax加載進(jìn)度條，可以讓用戶預(yù)先判斷等待的時間，而且還可以減少用戶等待信息加載過程中的心理焦慮感，所以進(jìn)度條加載必不可少，下面小編給大家介紹ajax加載進(jìn)度條代碼是如何實(shí)現(xiàn)的2015-10-10
Ajax 匯總以及初步評價...2006-08-08
ajax中的$.getJSON方法想必大家非常熟悉吧，本文接下來將在為你鞏固一下，感興趣的你可以參考下，希望對你有所幫助2013-03-03