일반 폼으로 XML 데이터 전송 (JSP+Javascript)

황제낙엽 2005.12.04 09:41 조회 수 : 2888 추천:148

Client Side: JavaScript 에서 XML 노드에 관련된 처리(노드 삽입/삭제/추가)를 수행한다. POST메소드를 이용해서 XML의 모든 내용을 서버에 전송한다.
Server Side: 전송된 XML문서를 저장하거나 그 외에 (Soap 통신등)작업을 수행한다.
관련기술. MSXML : (MSDN Library) - XML Web Services - XML Core - MSXML - XML - XML Reference

기타 XML 기술. 처리 순서
1. HTML, JSP 페이지에서 XML노드 작업을 한다.
2. 히든 필드로 XML을 넣는다.
3. 폼을 전송한다.
4. XML 파일을 파싱한다.

참조 파일 xml.html(클라이언트 측 파일) xml.jsp (서버측 파일)

[xml.html]

<html>
<head>
<script language="javascript">
// 지금은 노드 작업 없이 xml 내용만 전달한다.
// 실제 xml 노드 작업은 관련 메소드를 이용해서 수행 할 수 있다.
function readIt() {
var doc = document.all.SAMPLE_XML.documentElement;
alert(doc.text);
alert(doc.xml);
// <?xml version="1.0" encoding="euc-kr"?> 는 doc.xml 속성에 포함되지 않는다.
document.xml_form.xml_content.value=doc.xml;
return true;
}
</script>
</head>
<body>
<XML ID="SAMPLE_XML">
<?xml version="1.0" encoding="euc-kr"?>
<BOOK category="fiction">
<TITLE> Jonathan </TITLE>
<AUTHOR> 김영규 </AUTHOR> </BOOK> </XML>
<input type="button" value="read xml" omclick="javascript:readIt()"/>
<form name="xml_form" action="xml.jsp" method="post" omSubmit="return readIt();">
  <input type="hidden" name="xml_content"/>
  <input type="hidden" name="encoding" value="euc-kr"/>
  <input type="submit"/>
</form>
</body>
</html>




[xml.jsp]

<%@ page contentType="text/html; charset=euc-kr" %>
<%@ page import="java.io.*"%>
<%@ page import="org.w3c.dom.*"%>
<%@ page import="javax.xml.parsers.*"%>
<%
String xmlContent = request.getParameter("xml_content");
String encoding = request.getParameter("encoding");
System.out.println("xml content");
xmlContent = new String(xmlContent.getBytes("8859_1"), "KSC5601");
StringBuffer content = new StringBuffer();
// <?xml version="1.0" encoding="euc-kr"?> 은 전달되지 않는다.
// 한글을 사용하지 않았을 경우에는 이런 작업은 생략할 수 있다.
content.append("<?xml version="1.0" encoding="").append(encoding).append(""?>");
content.append(xmlContent);
xmlContent = content.toString();
System.out.println(xmlContent);
String author = "";
String title = "";
ByteArrayInputStream in = new ByteArrayInputStream(xmlContent.getBytes("KSC5601"));
try {
  DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
  DocumentBuilder builder = factory.newDocumentBuilder();
  Document doc = builder.parse(in);
  Element rootEl = doc.getDocumentElement();
  NodeList list = rootEl.getElementsByTagName("AUTHOR");
  if(list.getLength() > 0) {
   Element authorEl = (Element) list.item(0);
   author = authorEl.getFirstChild().getNodeValue();
   System.out.println(author);
  }
  list = rootEl.getElementsByTagName("TITLE");
  if(list.getLength() > 0) {
   Element titleEl = (Element) list.item(0);
   title = titleEl.getFirstChild().getNodeValue();
   System.out.println(title);
  }
} catch (Exception ex) {
  ex.printStackTrace();
}
%>
<html>
<body>
<table>
  <tr>
    <td> Title </td>
    <td><%= title %> </td>
  </tr>
  <tr>
    <td> Author </td>
    <td><%= author %> </td>
  </tr>
</table>
</body>
</html>
번호 제목 글쓴이 날짜 조회 수
246 [Gemini] ajax 와 fetch 의 차이 황제낙엽 2025.01.04 3419
245 [검토 완료] 디바이스 카메라로 촬영한 사진을 서버에 업로드하기 샘플 황제낙엽 2024.11.21 3987
244 브라우저에서 이미지를 편집(crop 등) 할 수 있는 오픈소스 Cropper.js 황제낙엽 2024.11.16 3842
243 [ChatGPT] json data 의 정렬 [1] 황제낙엽 2024.07.23 3352
242 DOMContentLoaded 이벤트와 window.onload 이벤트 황제낙엽 2024.07.15 3669
241 fetch() 사용 예제들 황제낙엽 2024.07.09 3380
240 [Copilot] Vanilla JavaScript에서 외부 스크립트 파일에 정의된 함수들을 로드 황제낙엽 2024.06.21 3758
239 [Copilot] ES6 모듈(module) 문법 황제낙엽 2024.06.21 3805
238 [Copilot] JSON 객체 내부 데이터를 순회하면서 조회하는 코드 황제낙엽 2024.06.02 3270
237 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 3615
236 json 데이터 내의 변수명에 prefix 로 type 표현하기 황제낙엽 2024.04.15 3361
235 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 3605
234 현재 document 의 host 와 port 를 얻는 방법 황제낙엽 2023.10.03 4209
233 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 3660
232 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 3715
231 (Bard) JavaScript로 JSON 배열을 작성하는 방법 황제낙엽 2023.08.21 3672
230 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 3703
229 navigator.mediaDevices 황제낙엽 2023.08.21 3798
228 Barcode Detection API 황제낙엽 2023.08.06 3854
227 정규식을 이용한 이메일 검증 스크립트 file 황제낙엽 2023.06.25 2894