AJAX (Asynchronous Javascript And XML)
- AJAX는 자바스크립트를 사용하여 웹 서버와 클라이언트 간 비동기적으로 XML데이터를 교환하고 조작하기 위한 웹 기술이다.
- 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 로드하지 않고 필요한 일부 페이지의 데이터만을 로드하는 기법
- HTML만으로는 어려운 다양한 작업을 웹 페이지에서 구현해서 이용자가 웹 페이지와 자유롭게 상호 작용할 수 있또록 구현하는 기법
비동기 방식이란..
동기는 말 그대로 동시에 일어난다는 말이다. 동기의 반대의미인 비동기는 동시에 일어나지 않는 것을 일컫는다. 요청과 결과가 동시에 일어나지 않는 것이다. 직관적으로 설명하자면 한 코드의 연산이 이루어질 동안 멈추지 않고 다른 코드의 실행을 계속하는 것이다.
장단점
| 동기 | 비동기 | |
| 장점 | 설계가 직관적이고 간단하다. | 설계가 복잡하다. |
| 단점 | 한 코드의 연산 결과가 나올때까지 대기해야 한다. | 동시작업이 가능하므로 자원의 효율성이 좋다. 필요한 부분만 요청하여 사용할 수 있다. |
AJAX 사용예제
기본 골격구조는 다음과 같다.
$.ajax({
type: "GET",
url: "사용하고자 하는 api 주소",
data: {},
success: function (res) {
//구현
}
})
서울시 미세먼지 api로 연습을 해보자. 페이지 구성은 다음과 같다. 업데이트 버튼을 누를 때 마다 미세먼지 정보가 업데이트 되도록 구현해보자.
페이지 기본구성 코드
<!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.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function q1() {
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (res) {
}
});
}
</script>
</head>
<body>
<h1>jQuery+Ajax 예제</h1>
<hr/>
<div class="question-box">
<h2>서울시 OpenAPI(실시간 미세먼지 상태)</h2>
<p>업데이트 버튼을 누를 때마다 실시간 미세먼지 정보가 업데이트 됩니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="mise-info">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
</div>
</body>
</html>
먼저 어떤 정보를 가져오는지 콘솔에 찍어보자
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (res) {
console.log(res)
}
})다음과 같이 RealtimeCityAir안에 정보들이 담겨있는 것을 확인 가능하다.
api 페이지를 살펴보면
RealtimeCityAir 안의 row안에 데이터가 담겨있는 것을 추측할 수 있다. 그럼 정보들을 출력해보자
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (res) {
let rows = res['RealtimeCityAir']['row'];
console.log(rows)
}
})위와 같이 잘 출력되는 것을 알 수 있다. 이제 데이터를 찾았으니 알맞게 필요한 것만 뽑아쓰면 된다.
필요한 것은 구이름과 미세먼지농도이다. 리스트에서 필요한 것을 추출해보자
이렇게 두 정보가 필요하다.
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (res) {
let rows = res['RealtimeCityAir']['row'];
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM'];
let gu_mise = rows[i]['IDEX_MVL'];
console.log(gu_name, gu_mise);
}
}
})먼저 리스트 한 인덱스에 딕셔너리 형태로 정보들이 들어있으니 반복문을 돌면서 해당 요소를 각각 추출해주면 된다.
콘솔에 찍어보았을 때 잘 나타나는 것을 볼 수 있다. 이제 이 정보를 새로 페이지에 업데이트를 해주면된다. 저번 글에 썼던 jquery를 이용하여 손쉽게 업데이트 할 수 있다.
[Javascript] JQuery 사용법
CSS 오픈 라이브러리가 부트스트랩이라면 Javascript에는 JQuery라는 오픈 소스 기반의 자바스크립트 라이브러리가 있다. JQuery를 이용하면 이벤트 처리를 손쉽게 구현할 수 있고 Ajax 응용 프로그램
diddl.tistory.com
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (res) {
let rows = res['RealtimeCityAir']['row'];
$('#mise-info').empty(); /* 원래 있던 내용을 지운다. */
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM'];
let gu_mise = rows[i]['IDEX_MVL'];
let tmp_html = `<li>${gu_name} : ${gu_mise}</li>`; /* 새로운 내용 형식('따옴표'가 아닌 `백틱`임을 주의하자) */
$('#mise-info').append(tmp_html); /* 새로운 내용을 추가해준다. */
}
}
})이렇게 손쉽게 추가할 수 있다.
결과물
'기타 공부들' 카테고리의 다른 글
| [Gitbash] Git 설치 및 사용법 (0) | 2021.11.01 |
|---|---|
| [Python] BeautifulSoup으로 크롤링하기 (네이버 영화순위) (0) | 2021.10.11 |
| [Javascript] JQuery 사용법 (0) | 2021.10.07 |
| [CSS] 부트스트랩 (Bootstrap 예쁜 CSS 가져오기) (0) | 2021.10.03 |
| [CSS] 구글 웹 폰트 적용하기 (0) | 2021.10.01 |