2주차 07~12강. 서버-클라이언트 통신 이해하기 (Ajax)
Ajax: 자바 스크립트로 페이지의 전환 없이 서버와 통신할 수 있는 방법
서버 -> 클라이언트: ‘JSON’ 이해하기
JSON: 서버가 클라이언트에 전달해 주는 데이터의 형식
JSONView: JSON 가시성 좋게 보는 chrome extension
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
JSON은 dictionary처럼 Key와 value 형태
클라이언트 -> 서버: ‘GET’ 요청 이해하기
클라이언트가 요청 할 때도, 타입이라는 것이 존재 함
– GET: 통상적으로, 데이터 조회(read)를 요청할 때. ex) 영화 목록 조회
– POST: 통상적으로, 데이터 생성(create), 변경(update), 삭제(delete)를 요청할 때 쓰임. ex) 회원가입, 회원탈퇴, 비밀번호 수정
GET 방식으로 서버에게 데이터를 전달하는 방법
예시1) https://movie.naver.com/movie/bi/ml/basic.nhn?code=161967
- movie.naver.com 이 서버 주소 (ex. 우리 은행 용산 지점)
- movie/bi/ml/basic.nhn 는 창구 이름 같은 것
- ? 이후: 데이터를 가져오기 위한 클라이언트와 서버 사이의 약속 코드.
?: 여기서부터 전달할 데이터가 작성된다는 의미
&: 전달할 데이터가 더 있다는 의미
예시2) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달한다.
q= 아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)
Ajax 시작하기
* 주의! Ajax는 jQuery가 import 되어있는 페이지에서만 동작함
jQuery import 코드:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
Ajax 기본 골격:
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})JSON 데이터가 있는 url을 입력하면, response에 데이터가 모두 저장 됨
예시1) 서울 미세먼지 농도 데이터
URL: http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
해당 url을 입력하면, response에 RealtimeCityAir 데이터가 모두 들어옴
미세먼지 농도 데이터) 연습 1 – 각 구 별로 미세먼지 수치 콘솔에 출력하기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
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']
console.log(gu_name, gu_mise)
}
}
})
</script>미세먼지 농도 데이터) 연습 2– update 버튼을 누를 때 마다 서울시 미세먼지 수치를 새로 가져와 출력하기. 미세먼지 수치가 70이 넘는 곳은 빨간색으로 출력.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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) {
console.log(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>=70)
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
else
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
console.log(temp_html);
$('#names-q1').append(temp_html);
}
}
})
}
</script>
<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">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
</div>
</body><style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color: red;
}
</style>예시2) 고양이 사진 데이터
서버 주소: https://api.thecatapi.com/v1/images/search
고양이 사진 데이터) 연습 – 고양이 사진 받아와서 출력하기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function q1() {
// 여기에 코드를 입력하세요
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let newImgUrl = response[0]['url'];
console.log(newImgUrl);
$('#img-cat').attr('src',newImgUrl);
}
})
}
</script><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-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
</div>
</body>기타 tip. 페이지가 다 로딩 되었을 때 동작 추가하는 방법
$(document).ready(function(){
// 원하는 동작 추가
});