2주차 - jQuery, Ajax
1. Javascript와 jQuery, Ajax 개념?
일단 자바스크립트는 웹페이지 개발에 쓰이는 언어다.
그리고 그 자바스크립트 라이브러리 중 하나가 jQuery이며,
Ajax는 자바스크립트에서 가능한 작업처리방식이다.
처음엔 Ajax도 라이브러리의 일종인 줄 알았는데 이름에 답이 있었다.
Asynchoronous Javascript And XML
'비동기 방식'으로 작업이 처리되는 방식을 말한다고 한다.
쉽게말해 한 페이지 내에서 각각의 작업들을 동시다발적으로 처리할 수 있는 방식이다.
반대되는 개념인 '동기 방식'에서는 페이지의 모든 작업들이 동기화되기 때문에
어떤 작업을 처리하려면 '새로고침'처럼, 서버로부터 필요한 데이터를 가져올 때까지 페이지 전체가 대기를 해야한다.
한번에 하나씩 작업들을 순차적으로 진행해야 되는 것이다.
반면, 비동기 방식의 경우 각각의 작업들이 별개로 이루어지기 때문에
여러 작업을 동시다발적으로 처리하는게 가능하다.
일단 서버에 데이터를 요청하면, 서버로부터 데이터를 가져올 때까지 해당 작업부분만 대기를 하고
그 외 나머지 기능들은 정상적으로 사용할 수가 있다.
jQuery를 임포트한 페이지에서만 Ajax요청을 사용할 수가 있다.
2. jQuery+Ajax 사용하기 (서울시 실시간 미세먼지 API 활용)
jQuery는 별도의 프로그램을 설치하는 과정 없이 인터넷(네트워크) 주소를 통해 사용할 수 있다.
이걸 CDN(Content Delivery Network)이라고 한다.
html 문서 내 head 태그 안에 아래와 같은 형태로 미리 짜여진 jQuery 주소를 넣어주면 임포트 끝!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
css에서 선택자(selector)로 'class'를 사용하는 반면,
jQuery에선 'id'를 사용하여 특정 요소들을 선택한다.
Ajax로 작업에 필요한 데이터를 서버에 요청할땐 JASON 형식으로 나타낸다.
클라이언트와 서버 간 데이터 요청과 응답을 주고받을때 약속된 형식이다.
딕셔너리처럼 {키(key):값(value)} 형태로 이루어져 있다.
서울시 미세먼지 open API를 페이지에서 Ajax를 통해 불러보자.
위와 같은 페이지 양식에서 업데이트 버튼을 클릭할때마다
서울시의 지역구별 미세먼지 상황을 불러오는 페이지를 만들 것이다.
버튼을 누를때마다 전체 페이지가 새로고침되지 않고, 그저 미세먼지 상황만 추가되는 비동기 방식이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</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;
}
.bad_dust {
color: red;
}
</style>
<script>
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function (response) {
$('#names-q1').empty()
let rows = response['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_dust = rows[i]['IDEX_MVL']
// console.log(gu_name,gu_dust)
let temp_html = ``
if (gu_dust > 40) {
temp_html = `<li class="bad_dust">${gu_name} : ${gu_dust}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_dust}</li>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
</ul>
</div>
</body>
</html>
여기서 직접적으로 작업이 이뤄지는 영역은
'q1'이라는 이름의 업데이트(onclick) 버튼 태그와, 'names-q1'이라는 id를 가진 리스트 태그다.
즉, '업데이트'라는 이름의 버튼을 클릭하면(onclick),
스크립트 영역에서 Ajax 요청이 실행되어 지정된 api 주소로부터 데이터를 불러오게 된다.
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
// GET요청을 할 API url
data: {},
// 요청에 필요한 데이터가 있을때 입력한다. (GET 요청시에는 사용x)
success: function(response){
// 서버로부터 응답받은 결과값을 resonse 변수로 저장 후 함수 실행
console.log(response) // 콘솔창에 결과값 출력 (결과값 확인)
}
})
그 뒤 해당 api 주소에서 필요한 정보가 있는 위치를 임의의 변수(rows)로 지정 후,
for문을 통해 순차적으로 가져올 정보(지역구이름['MSRSTE_NM'], 미세먼지 수치['IDEX_MVL'])를 불러와
'names-q1' 리스트 영역에 append로 추가해주는 것이다.
추가적으로 미세먼지 수치가 특정 수치 이상 넘어갈 경우 별도의 클래스로 지정하여 css로 수정해도 된다.
