[Ajax] Csv형식의 데이터 파싱하기
- Web/Ajax
- 2018. 5. 21.
이번 포스팅에서는 Ajax를 활용하여 다른페이지에있는 CSV형식의 데이터를 받아오는 방법에 대해 알아보겠습니다. 바로 예제를 통해서 설명해드릴게요.
Csv형식의 데이터 파싱하기
먼저 이클립스 WebProject의 WebContent안에 js폴더를 만들어주시고 js파일하나를 집어넣겠습니다.
myAjax.js
//크로스 브라우징 처리
var getXhr = function() {
var xmlhttp = null;
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
} else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
var myAjax = function(requestUri, queryStr, callbackFn) {
var xhr = getXhr();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// console.log(this.responseText.trim());
this.callbackFn = callbackFn;
this.callbackFn();
}
};
xhr.open("POST", requestUri, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(queryStr);
return xhr;
};
csv데이터를 받을 Main.jsp입니다.
Main.jsp
<meta charset="UTF-8">
<title>csv 데이터 받기</title>
<style>
table, td {
border: 1px solid red;
}
</style>
<script src="../js/myAjax.js"></script>
<script>
//csv형식의 데이터 파싱하기
var parseData = function(element, txtData) {
arr = txtData.split("|");
var strTag = "<table width='500'>";
for(var i=0; i<arr.length; i++) {
arr2 = arr[i].split(":");
strTag += "<tr>";
for(var j=0; j<arr2.length; j++){
strTag += "<td>"+arr2[j]+"</td>";
}
strTag += "</tr>";
}
strTag += "</table>";
element.innerHTML = strTag;
/* arr = txtData.split("|");//user:KIM, msg:HELLO
arr2 = arr[0].split(":");//user, KIM
arr3 = arr[1].split(":");//msg, HELLO
var strTag = "<table width='500'>";
strTag += "<tr>";
strTag += "<td>"+arr2[0]+"</td><td>"+arr2[1]+"</td>";
strTag += "</tr>";
strTag += "<tr>";
strTag += "<td>"+arr3[0]+"</td><td>"+arr3[1]+"</td>";
strTag += "</tr>";
strTag += "</table>";
element.innerHTML = strTag; */
};
window.onload = function() {
var view_area = document.getElementById('view_area');
var btn = document.getElementById('btn');
btn.onclick = function() {
myAjax("data.jsp", "user=KIM&msg=HELLO", function() {
parseData(view_area, this.responseText.trim() );
});
};
};
</script>
<h1>Ajax 예제3</h1>
<h3>Javascript 비동기 처리</h3>
<div id="view_area">
아래의 버튼을 눌러 주세요.
</div>
<button id="btn">로드하기</button>
csv데이터가 있는 data.jsp입니다.
data.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String user = request.getParameter("user");
String msg = request.getParameter("msg");
%>
<%-- CSV 형식 --%>
USER:<%=user%>|MSG:<%=msg%>
결과화면입니다. 빨간색 박스안에있는 로드하기 버튼을 누르면
보시는바와 같이 div안에 data.jsp파일의 csv형식의 데이터를 받아오게됩니다.
'Web > Ajax' 카테고리의 다른 글
[Ajax] 웹 페이지 로딩시 로딩바 구현하기 (4) | 2018.05.18 |
---|---|
[Ajax] Ajax를 활용하여 다른페이지에 있는 데이터 받아오기 (3) | 2018.05.17 |
[Ajax] Ajax란 무엇인가? (7) | 2018.05.12 |