"Ajax는 '비동기 서버 통신방식' 입니다. 여기서, '서버 통신'은 웹 기초 동작원리에서 배운 요청-응답 을 이야기합니다. 그리고 '비동기' 덕분에 Ajax를 사용하면, 웹 페이지 전체를 새로고침 하지 않고서도 작업을 수행할 수 있게 됩니다. 즉, 동작(event)이 일어났을 때, 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 되는 것이지요."
쉽게 얘기해서, 왼쪽처럼 모든 일이 순차적으로 진행되는 것이 아니라, 오른쪽처럼 동시에 진행이 되는것이 비동기이며 이를 통해 페이지의 일부만 업데이트가 가능해서 작동시간을 줄여줄 수 있다는 얘기이다
이제 Ajax를 이용한 연습을 해보자
사용할 API : http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
<!Doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery+Ajax의 조합을 연습하자!</title>
<!-- jQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function showMiseInfo() {
// 여기에 코드를 입력하세요
}
</script>
</head>
<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>
<hr/>
<div class="question-box">
<h2> 서울시 OpenAPI(실시간 대기환경 정보)를 이용하기</h2>
<p>모든 관측소(MSRSTE_NM)의 미세먼지 수치(PM10)를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="showMiseInfo()">업데이트</button>
<ul id="mise-info">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
</div>
</body>
</html>사용할 코드
우리는 위의 사진처럼 업데이트 버튼을 누를때 마다 모든 관측소의 미세먼지 수치를 표기하는 페이지를 만들 것이다
완성코드는 아래와 같다
function showMiseInfo() {
// 여기에 코드를 입력하세요
$('#mise-info').empty();
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let rows = response["RealtimeCityAir"]["row"];
for (let i = 0; i < rows.length; i++) {
let tempHtml = `<li>${rows[i]['MSRSTE_NM']} : ${rows[i]['PM10']}</li>`
$('#mise-info').append(tempHtml);
}
}
})
}
업데이트 버튼을 누르면 onclick 이벤트에 의해 showMiseInfo라는 함수가 실행이 된다
$('#mise-info').empty(); → id가 mise-info인 태그의 내용을 모두 지워라
$.ajax({ → ajax를 이용하자
type: "GET", → GET방식으로 요청한다(데이터 읽기 read)
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", → API주소data: {}, → 요청하면서 함께 '줄' 데이터(GET 요청시에는 비워둔다)
success: function (response) { → 서버에서 준 결과를 response라는 변수에 담아라
let rows = response["RealtimeCityAir"]["row"]; → rows를 response에 RealtimeCityAir라는 값의 row 값이라고 하자
for (let i = 0; i < rows.length; i++) { → 반복문
let tempHtml = `<li>${rows[i]['MSRSTE_NM']} : ${rows[i]['PM10']}</li>` → tempHtml을 rows의 i번째 항목의 MSRSTE_NM값 : rows의 i번째 항목의 PM10값이라고 하자
'${문자화}'는 {}안의 값을 문자로 나타내는 형식이다
$('#mise-info').append(tempHtml); → mise-info라는 id를 가진 태그의 맨 마지막에 tempHtml의 값을 추가하자
업데이트 버튼을 누르면 ajax에 의해 전체 페이지가 새로고침되는 것이 아니라 GET으로 가져온 값만 업데이트 되는 것을 확인할 수 있다
공감 부탁 드려요 :)
'아무것도 모르고 시작하는 코딩' 카테고리의 다른 글
| 랜덤 고양이 사진 API(.attr 이용) | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.16 |
|---|---|
| <오늘의 책> 프로젝트_개발일지_01(project schedule planning) | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.16 |
| 웹 주소에서 ?의 의미는? (feat.GET방식) | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.16 |
| JSON이란? | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.16 |
| JQuery append(요소 추가), val (값 가져오기)| 아무것도 모르고 시작하는 코딩 (0) | 2020.08.16 |