AJAX란?
페이지를 새로고침하지 않아도 데이터가 로드되게끔 합니다.
JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술입니다.
JQuery는 간단한 문법으로 AJAX를 사용할 수 있도록 ajax라는 인터페이스를 제공합니다.
AJAX만을 사용하기 위해 JQuery를 사용하기에는 파일자체가 무거워질 수 있습니다.
따라서, Axios나 Superagent, Isomorphic-fetch같은 라이브러리를 사용하는 것도 좋습니다.
ajax 사용법
먼저, JQuery를 이용할 때는 꼭, cdn을 추가(링크)하거나, 다운로드를 해주어야합니다.
그 후 아래처럼 ajax를 사용해봅시다!
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
위의 url에 미세먼지API의 url을 넣어주도록 합니다.
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
콘솔창에 출력해보면, 아래와 같이 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;
}
</style>
<script>
function q1() {
//버튼을 누르면, 기존에 있었던 내용을 삭제시킨다.
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
//API에서 데이터를 빼서 정리!
const DATA = response['RealtimeCityAir']['row']
for(let i=0; i<DATA.length; i++){
let gu = DATA[i]['MSRSTE_NM'], dust = DATA[i]['IDEX_MVL'];
let temp_html = `<li>${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>
위와 같이 코드를 입력하면, 아래와 같이 버튼을 누를때마다, 데이터를 받아와서 페이지에 표시하게 됩니다.
결과는 아래와 같습니다.
'📝 꾸준함이 무기 > JavaScript' 카테고리의 다른 글
| Javascript Array 판별법 (0) | 2021.11.26 |
|---|---|
| 13가지 유용한 자바스크립트 배열 팁과 정보 (2) | 2021.10.21 |
| 형 변환 (0) | 2021.05.10 |
| Javascript (0) | 2021.01.25 |
| input range에 스타일 추가하기 (0) | 2021.01.25 |
