Written by 최태열
on January 18, 2021

Ajax에서 파일 데이터 받아오기

CSV 형식으로 받아오기

response.jsp

<%@ page language="java" contentType="text/plane; charset=UTF-8" pageEncoding="UTF-8"%>유재석,연예인,40

<button onclick="ajaxReq()">1. 비동기 요청 - csv형식으로 응답 </button> <br>

직업 : <div id="dataView"></div>

<script type="text/javascript">
    function ajaxReq() {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //csv 형식으로 응답 완료
                //, 구분자로 문자열을 분해 - split() 배열로 반환
                data = xhr.responseText;

                console.log(data);
                data = data.split(",");
                console.log(data[1]);

                document.getElementById("dataView").innerText = data[1];
            }
        };
        xhr.open("POST", "response.jsp", true);

        //	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send();
    }
</script>

Json 형식으로 받아오기

responseJSON.jsp

<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
{"name":"유재석", "job":"연예인", "age":40}

<button onclick="ajaxReq2()">2. 비동기 요청 - JSON형식으로 응답 </button> <br>
<div id="dataView2"></div>

<script type="text/javascript">
    function ajaxReq2() {
        xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                data = this.responseText;
                data = JSON.parse(data);
                document.getElementById("dataView").innerHTML = data.job;

            }
        };
        xhr.open("POST", "responseJSON.jsp", true);
        xhr.send();
    }
</script>

JSP 태그를 통해 DB 정보 가져오기

responseDEPT.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="model.DeptDAO ,model.domain.DeptDTO ,java.util.ArrayList" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
	DeptDAO dao = new DeptDAO();
	ArrayList<DeptDTO> all = dao.deptAll();
	request.setAttribute("all", all);
%>

<table border="1">
	<tr><th>부서번호</th><th>부서명</th><th>지역</th></tr>
	<c:forEach items="${requestScope.all}" var="data">
		<tr>
			<td>${data.deptno}</td><td>${data.dname}</td><td>${data.loc}</td>
		</tr>
	</c:forEach>
</table>

<button onclick="ajaxReq3Dept()">3. 비동기 요청 - 모든 Dept table 정보 검색</button>
<div id="dataView2"></div>

<script type="text/javascript">
    function ajaxReq3Dept() {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("dataView2").innerHTML = this.responseText;
            }
        };
        xhr.open("POST", "responseDEPT.jsp", true);
        xhr.send();
    }
</script>

Discussion and feedback

← → Top