[Ajax] Csv형식의 데이터 파싱하기

이번 포스팅에서는 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형식의 데이터를 받아오게됩니다.

 

[Ajax] Ajax란 무엇인가?

[Ajax] Ajax를 활용하여 다른페이지에 있는 데이터 받아오기

[Ajax] 웹 페이지 로딩시 로딩바 구현하기