TIL 2주차: Ajax

iriskwak·2020년 8월 9일
0

Ajax(Asynchronous Javascript And Xml) 통신 기초

데이터 표현방식 'JSON'(서버→클라이언트)

  • JSON은 Key:Value로 이루어져 있음. 자료형 Dictionary와 매우 유사함.
    ex)
  • 위 그림의 RealTimeCityAir라는 키 값에 딕셔너리형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있음.

HTTP request method (클라이언트→서버)

esp. GET 요청(Request) 이해하기

  • HTTP: 웹은 HTTP라는 규칙을 따름. url에서 http://가 HTTP라는 통신규약을 따른다는 표시
  • 클라이언트는 서버의 API에 요청(Request)를 보내어 데이터(HTML, CSS, JS포함)를 응답(Response)받음.

클라이언트가 요청할 때에도, '방식'이 존재함

클라이언트는 요청할 때 HTTP request method(요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 알려줌. 여러 요청 방식이 존재함 (참고: https://developer.mozilla.org/ko/docs/Web/HTTP/Methods) 대표적인 예시로:

  • GET : 통상적으로 데이터 조회(Read)를 요청할 떄
  • POST : 통상적으로 데이터를 (Create), 변경(Update), 삭제(Delete)요청할 때. ex) 회원가입, 회원탈퇴, 비밀번호 수정

GET 방식

https://movie.naver.com/movie/bi/mi/basic.nhn?code=30688

  • 위 주소는 크게 ?를 기준으로 두 부분이 쪼개짐.
    ? 기준으로 앞 부분이 <서버주소>, 뒷 부분이 영화번호임
  • 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
  • 영화 번호: code=30688

그렇다면 'code'라는 이름으로 영화번호 데이터를 전달해주자는 것은 누가 정하나?

--> 프론트엔드와 백엔드 개발자가 미리 정해둔 약속.

GET 방식으로 데이터를 전달하는 방법

  • ?: 여기서부터 전달할 데이터가 작성된다는 의미
  • & : 전달할 데이터가 더 있다는 의미
    ex) google.com/search?q=해리포터&sourceid=chrome&ie=UTF-8
    위 주소는 google.com의 search 창구에 다음과 같은 정보를 전달함
  • q= 해리포터 (검색어 q의 값은 해리포터)
  • sourcedid=chrome (브라우저 정보 souredid의 값은 chrome)
  • ie=UTF-8 (인코딩 정보 ie의 값은 UTF-8)

Ajax로 서버와 통신하기

Ajax는 '비동기 서버 통신 방식'
여기서 '서버 통신'은 웹 기초 동착 원리에서 배운 요청-응답을 이야기함.
'비동기' 덕분에 Ajax를 사용하면 웹페이지 전체를 새로곷미하지 않고서 작업을 수행할 수 있게됨. 즉, 동작(event)이 일어났을 때, 전체 페이지가 아닌 일부분만을 업데이트할 수 있게 됨.

Ajax로 주로 하는 작업:

  1. 웹 페이지 새로고침 없이 서버에 요청(Request)
  2. 서버로부터 데이터를 받고 작업을 수행

비동기란?

  • 작업 요청을 해두고 작업 결과가 오기 전까지 다른 작업을 처리하는 것. 비동기로 하게 되면 자원을 효율적으로 활용할 수 있다는 장점이 있음.
  • Ajax를 사용하게 되면, 서버에 요청을 해두고 응답이 오기 전까지 다른 작업을 처리함. 응답이 오면 그 떄 정해놓은 함수(callback Function)를 호출해 실행.
  • 그림으로 이해하기:

Ajax의 장점

  1. 웹페이지의 속도 향상
  2. 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
  3. 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어듦
  4. 기존 웹에서 불가능했던 다양한 UI를 가능하게 함

Ajax의 단점

  1. 히스토리 관리가 안됨(보안에 신경써야)
  2. 연속으로 데이터를 요청하면 서버 부하가 증가함
  3. XMLHttpRequest를 통해 통신을 하는 경우 사용자에게 아무런 진행 정보가 주어지지 않음. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생.

Ajax 사용하기

Ajax를 jQuery를 통해 사용할 예정. jQuery를 사용하기 위해 웹페이지에 jQuery가 import되어야 함.

  • jQuery로 Ajax 사용하기 위해 jQuery를 import하기!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

서울시의 OpenAPI(실시간 대기 환경정보)를 ajax로 사용하기

  • GET 방식으로 요청해서 API가 응답하는 데이터 사용
$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})
코드 상세 설명
  • type : "GET" → GET 방식으로 요청함
  • url : 요청할 url
  • data : 요청하면서 함께 줄 데이터(GET 요청시엔 비워두기)
    -- 요청 데이터를 주는 방식:
    --- GET 요청은 url 뒤에 아래와 같이 붙여서 데이터를 줌
    --- ex) http://naver.com ?param=value&param2=value2
    --- POST 요청은, data : {} 에 넣어서 데이터를 줌
    --- ex) data : {param:'value', param2:'value2'}
  • success : 콜백함수(=요청에 대한 결과가 오면 실행할 함수). 요청에 성공해 응답이 정상적으로 오면, response에 서버의 결과값을 담아 함수를 실행 (서버 결과가 response에 들어가는 이유는, jQuery 내부에 구현되어있는 코드(링크)를 살펴보면 알 수 있음. 우선은 넘어가자)

API

API는 어떻게 요청하고 어떤 응답 데이터를 보내줄 것인지 모두 약속이 되어있음.
이를 사용하면 데이터를 가져다 쓰거나 기능을 편하게 사용할 수 있음.

도움받은 사이트:

  • https://coding-factory.tistory.com/143
  • https://www.notion.so/2-a163fcbaa4e145e0b0c235e94bbc41e7#51dd7747cee945d5930c771788f13d6d

0개의 댓글