Ajax는 무엇이고, 어떻게 사용하나요?

by 마켓플레이어, 마케터 봉 2024. 10. 6. 20:23

Ajax는 서버와 통신해 데이터를 주고 받는 과정을 말한다.

jQuery의 경우 화면에 표현되는 것만 보여줬는데, 새로고침을 하면 다시 리셋될 수 밖에 없다. 왜냐하면 어딘가에 저장이 되지 않았기 때문이다. 그리고 보통 사이트들은 서버에 데이터들을 저장을 해두고, ajax로 통신하여 데이터를 주고 받는다.

서버와 통신을 주고 받을 때 보통 json 파일 형식을 띈다.

그냥 이 파일을 열면 가독성이 떨어지기 때문에, 보통은 크롬 확장프로그램을 써서 가독성을 높인다.

그런 의미로 설치가 안되어있다면, 아래 링크를 통해 크롬 확장프로그램을 설치하자.

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

JSONVue - Chrome 웹 스토어

Validate and view JSON documents

chromewebstore.google.com

아래 이미지를 보면, 얼마나 가독성을 높이는 지 알 수 있다.

서울시 미세먼지 open api 링크다.

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

이걸 보면 json 파일은 key-value 형태인 딕셔너리 구조를 갖고 있음을 알 수 있다.

어쨌든 다시 본론으로 돌아와서, ajax는 서버와 통신하는 것이다.

그리고 서버와 통신하는 것은 아래 2가지 타입으로 나눠진다.

- GET 타입 : 통상적으로 데이터 조회(Read)를 요청할 때 사용.

ex) 목록 조회, 정보 조회, 회원정보 표시 등

- POST 타입 : 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 사용.

ex) 회원가입, 회원정보변경, 비밀번호변경, 회원탈퇴 등

그렇다면 어떻게 사용해야할까?

우선 jQuery를 임포트 해야만 사용 가능하다.

참고 : https://marketerbong.tistory.com/47

즉, 아래 스크립트를 <head>~</head> 사이에 넣어야 한다는 것이다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

ajax의 기본 골격은 다음과 같다.

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

위 jason 파일을 통해 미세먼지 지수가 70이하면 빨간색으로 표시하도록 했다.

<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 {
    color: red;
}
</style>

<script>
function update() {
    $.ajax({
        type: "GET",
        url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
        data: {},
        success: function(response){

            $('#update_list').empty()
            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>70){
                    temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                } else {
                    temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                }
                $('#update_list').append(temp_html)

                // 위 내용과 동일함.
                // if(gu_mise>40){
                //     let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                //     $('#names-q1').append(temp_html)
                // } else {
                //     let temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                //     $('#names-q1').append(temp_html)
                // }
            }
        }
    })
}
</script>

</head>

<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>

<hr />

<div class="question-box">
<h2>서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여진다.</p>
<button onclick="update()">업데이트</button>
<ul id="update_list">
</ul>
</div>
</body>

</html>

그랬더니 아래 화면과 같은 결과가 나온다.

하나씩 되짚어 보자.

1. 우선 페이지를 불러왔을 땐 아무것도 없어야 하므로, (업데이트를 눌렀을 때 누적되어 쌓이면 안되므로)

$('#update_list').empty() 코드를 삽입했다. 데이터가 보여주는 리스트의 id값이 update_list이다.

2. api 내에서 정의된 RealtimeCityAir 라는 리스트 안에 row 값을 활용해야 하기에 해당 값을 rows로 재정의 해줬다.

let rows = response['RealtimeCityAir']['row']

3. for문(반복문)을 통해 전체 rows데이터 중에서 구 이름(MSRSTE_NM)과 미세먼지수치(IDEX_MVL)를 찾아, 내가 보기 편하게 재정의해줬다.

let gu_name = rows[i]['MSRSTE_NM']

let gu_mise = rows[i]['IDEX_MVL']

4. 그리고 if문과 jQuery를 활용해 조건에 맞으면 빨간색 표시를 하고, 리스트를 html화 하여, update_list에 넣으라고 요청했다.

참고 : https://marketerbong.tistory.com/47

'7. 봉드로이드_개발공부' 카테고리의 다른 글

vs code에 python(파이썬) 패키지 설치 방법 (3)	2024.10.07
python(파이썬) 기본 문법 정리 (0)	2024.10.07
jQuery는 무엇이고, 어떻게 사용하나요? (0)	2024.10.06
javascript 기본 개념 총 정리! (2)	2024.10.05
특정 클래스 안에 있는 객체(버튼)만 수정하고 싶어요. (2)	2024.10.05