Ajax란?
Asynchronous JavaScript and XML의 약자이다. 웹페이지의 전체를 다시 로딩하지 않고도 웹페이지의 일부부만을 갱신 할 수 있다.다음은 기존 웹 응용프로그램과 Ajax를 이용한 웹 응용프로그램의 동작 원리이다.
이를 보면 웹페이지 전체를 다시 로딩하지 않고도 Ajax 요청을 처리하여 특정 요소만 업데이트가 가능함을 알 수 있다.
일반적인 ajax 문의 골격은 다음과 같은데,
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})type이 "GET"인 것은 GET 방식으로 요청한다는 것인데,
이는 HTTP 요청 방식을 칭하는 것으로 브라우저가 서버에 HTTP 요청을 보낼 때는 다음의 두가지 방식 중 하나를 사용한다.
-
GET 방식
이는 주소에 데이터를 추가하여 전달하는 방식으로 해당 요청은 브라우저에 의해 캐시되어 저장되고 query string에 포함되어 전송된다. 이 때문에 길이의 제한과 캐시 됨으로 인한 보안상의 취약점이 존재한다. -
POST 방식
POST방식은 데이터를 별도로 첨부하여 전달하는 방식으로 길이의 제한이 없고, 보안성이 뛰어나다.
"여기에URL을입력" 부분에 OpenAPI링크를 입력하고
해당 링크에서 가져오고자하는 정보들을 function(response){}에 기입한다.
그리고 밑의 body 부분에 해당 ajax 동작을 적용할 id를 명명하고 함수 내에 해당 id에 기입할 내용을 입력하면 된다.
내일배움캠프에서 이를 버튼을 통해 정보를 갱신하는 것으로 연습해 보았다.
첫번째로는 서울시 미세먼지 정보를 받아서 버튼을 누를 때 마다 정보를 갱신하고 그 중 일정 수치 이상의 미세먼지값을 나타내는 구 정보를 빨간색으로 표시하였다.
해당 Ajax 코드는 다음과 같다.
<script>
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function(response){
let rows = response['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
let temp_html = ''
if (gu_mise > 90) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>
또한 위의 사진처럼 그림과 해당 그림의 정보를 페이지 새로고침시마다 업데이트 하는 코드도 작성해 보았는데, 하기에 서술하겠다.
<!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;
}
div.question-box > div {
margin-top: 30px;
}
</style>
<script>
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rtan",
data: {},
success: function(response){
let url = response['url']
let msg = response['msg']
$('#img-rtan').attr('src',url)
$('#text-rtan').text(msg)
}
})
}
</script>
</head>
<body>
<h1>JQuery+Ajax의 조합을 연습하자!</h1>
<hr/>
<div class="question-box">
<h2>3. 르탄이 API를 이용하기!</h2>
<p>아래를 르탄이 사진으로 바꿔주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">르탄이 나와</button>
<div>
<img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
<h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
</div>
</div>
</body>
</html>여기에서 Ajax 코드를 살펴보면
http://spartacodingclub.shop/sparta_api/rtan 에서
가져온 이미지 주소와 문구를 body의 "img-rtan", "text-rtan"에 결합시켜 새로고침 시마다 업데이트 되도록 하였다.
잘 보고 갑니다 ㅎㅎㅎ