ajax傳輸xml資料：只要把資料封裝成xml格式就可以實現傳輸，前台js用responseXML接收xml參數，後台讀取用流和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資料處理示範</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>
後台頁面
<%@ 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='/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); } 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)); users.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()); }}
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
