English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 所在位置
  2. 首页
  3. 经验笔记
  4. 正文

Ajax이 Json과 xml 데이터를 전송하는 방법

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");
   //1ajax 객체 생성
   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");
   //1ajax 객체 생성
   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() {
  //1ajax 객체 생성
  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() {
  //1ajax 객체 생성
  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)//맵의 순회 방식
      alert("속성:" + key + ",값:" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//리스트의 순회 방식
      //alert(users[i].id +",+users[i].name+",+users[i].age);
     //}
   };
  };
  //5 전송
  xhr.send(null);
 }
 function ask3() {
  //1ajax 객체 생성
  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)//맵의 순회 방식
      alert("속성:" + key + ",값:" + users[key]);
     }
     //for ( var i = 0; i < users.length; i++) {//리스트의 순회 방식
      //alert(users[i].id +",+users[i].name+",+users[i].age);
     //}
   };
  };
  //5 전송
  xhr.send(null);
 }
</script>
</head>
<body>
 <input type="button" onclick="ask1();" value="뒤받침 요청 백엔드 데이터(수동으로 JSON 방식으로 포장)" />
 <br />
 <input type="button" onclick="ask2();"
  value="뒤받침 요청 백엔드 데이터(APACHE 도구로 JSON 방식으로 포장)" />
 <input type="button" onclick="ask3()" value="뒤받침 요청 백엔드 데이터(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());
 }
}

이것이 이 문서의 전체 내용입니다. 많은 도움이 되길 바라며, 많은 지원을 해 주시기를 바랍니다.

선언: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 모두 소유합니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반 내용을 발견하면, 이메일을 notice#w로 보내 주시기 바랍니다.3codebox.com（이메일을 보내면, #을 @으로 변경하십시오. 신고를 해 주시고, 관련 증거를 제공하십시오. 사실이 확인되면, 이 사이트는 즉시 위반 내용을 삭제합니다.）

기본 튜토리얼
추천 합니다