// 한국환경공단_에어코리아_대기오염정보 를 활용하였다.
public class AirVo { // 공공데이터포탈의 항목명과 동일해야 한다.
private String stationName; // 측정소명
private String dataTime; // 측정일시
private String khaiValue; // 통합대기환경수치
private String so2Value; // 아황산가스 농도
private String coValue; // 일산화탄소 농도
private String o3Value; // 오존 농도
private String no2Value; // 이산화질소 농도
private String pm10Value; // 미세먼지(PM10) 농도
// getter/setter/tostring 생략..
}
<!-- index.jsp -->
<h2>실시간 대기오염 정보</h2>
지역 :
<select id="location">
<option>서울</option>
<option>부산</option>
<option>대구</option>
<option>경기</option>
<option>인천</option>
<option>강원</option>
</select>
<button id="btn1">실시간 대기오염정보 확인(json방식)</button>
<button id="btn2">실시간 대기오염정보 확인(xml방식)</button>
<button id="btn3">실시간 대기오염정보 확인(jsp 요청방식)</button>
<table id="result1" border="1" align="center">
<thead>
<tr>
<th>측정소명</th>
<th>측정일시</th>
<th>통합대기환경수치</th>
<th>미세먼지 농도</th>
<th>일산화탄소 농도</th>
<th>이산화질소 농도</th>
<th>아황산가스 농도</th>
<th>오존 농도</th>
</tr>
</thead>
<tbody>
<!-- 여기에 데이터를 보여줄 예정... -->
</tbody>
</table>
(공부용으로 CSS가 안이쁜 점 양해해주세요...)
1. JSON방식
<script>
$(function () {
$("#btn1").click(function () {
$.ajax({
url : "air.do",
data : {location : $("#location").val()},
success : function (data) {
// data -> json형태로 파싱된 데이터(js객체형태)
let value = "";
let {items} = data.response.body;
for(let air of items ){
value += `<tr> // value값에 하나씩 이어준다(한 행)
<td>${air.stationName}</td>
<td>${air.dataTime}</td>
<td>${air.khaiValue}</td>
<td>${air.pm10Value}</td>
<td>${air.coValue}</td>
<td>${air.no2Value}</td>
<td>${air.so2Value}</td>
<td>${air.o3Value}</td>
</tr>`
}
$("#result1>tbody").html(value);
// 위의 value값을 <tbody>태그 내부에 출력해주기
}
})
})
})
</script>
@RestController //모든데이터를 값 자체로 반환해줌
public class APIController {
public static final String serviceKey = "pyKJk6gnPbgNEZykF%2BDsN~~~~";
// 공공데이터포탈에서 발급받은 내 API인증키를 넣어준다
@RequestMapping(value="air.do", produces="application/json; charset=UTF-8")
public String airPollution(String location) throws IOException {
// OpenAPI서버로 요청할 URL주소 설정
String url = "http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty";
//url에 key=value값으로 필요한 항목들을 넣어 보내준다
url += "?serviceKey="+serviceKey;
url += "&sidoName="+URLEncoder.encode(location, "UTF-8");
url += "&returnType=json";
url += "&numOfRows=50"; // 반환받는 결과값 개수 지정
// 1. 요청하고자 하는 URL주소를 매개변수로 전달하면서 URL객체 생성
URL requestUrl = new URL(url);
// 2. 생성된 URL을 통해 httpUrlConnection객체 생성
HttpURLConnection urlConnection = (HttpURLConnection)requestUrl.openConnection();
// 3. 전송방식 설정
urlConnection.setRequestMethod("GET");
// 4. 요청주소에 적힌 OpenAPI서버로 요청보내기
BufferedReader br = new BufferedReader( new InputStreamReader(urlConnection.getInputStream()));
String responseText = "";
String line;
while( (line = br.readLine()) != null) {
// BufferedReader로 읽어온 데이터의 line이 null이 아닐 경우
// 응답해줄 line변수에 이어서 담아준다
responseText += line;
}
br.close();
urlConnection.disconnect();
// 사용한 자원 반납해주기
return responseText;
}
}
2. XML 방식
<script>
$(function () {
$("#btn2").click(function () {
$.ajax({
url : "air2.do",
data : {location : $("#location").val()},
success : function(data) {
// data -> xml형식의 데이터
// find() -> 내가 선택한 요소의 후손요소 찾음
let $items = $(data).find("item");
let value = "";
$items.each(function (index, item) {
value += `<tr>
<td>${$(item).find("stationName").text()}</td>
<td>${$(item).find("dataTime").text()}</td>
<td>${$(item).find("khaiValue").text()}</td>
<td>${$(item).find("pm10Value").text()}</td>
<td>${$(item).find("coValue").text()}</td>
<td>${$(item).find("no2Value").text()}</td>
<td>${$(item).find("so2Value").text()}</td>
<td>${$(item).find("o3Value").text()}</td>
</tr>`
})
$("#result1>tbody").html(value);
}
})
})
})
</script>
public class APIController {
public static final String serviceKey = "pyKJk6gnPbgN~~~~";
// RequestMapping Annotation의 produces 속성값만 변경해줌
@RequestMapping(value="air2.do", produces="text/xml; charset=UTF-8")
public String airPollution2(String location) throws IOException {
// 내용은 air.do와 동일하므로 생략...
return responseText;
}
}
