ajax에 대해 알아보기 전에 서버와 클라이언트 사이의 통신에 대해 이해해보자.
서버와 클라이언트는 보통 JSON(JavaScript Object Notation)으로 통신한다.
JSON은 {name : 'kim'} 모양(key : value)으로 구성되어 있으며, 문자열 외에도 다양한 타입의 데이터 유형이 있다.
예를 들어보자. 날씨 정보를 웹에 띄우고 싶다면, 기상청이나 다른 외부 서버의 데이터를 받아와야한다.
그러기 위해선, 외부 서버의 공개된 API(Application Programming Interface)를 사용해야 하는데, API가 JSON형태다.
API는 은행의 창구와 같다. 은행은 서버고, 우리는 요청하는 클라이언트다.
우리가(클라이언트) 창구(api)에 가서 돈 주세요(요청)하면 은행(서버)에서 돈을 주는 것처럼(응답) 말이다.
API를 요청할 때에도 방식이 있는데, GET과 POST다.
GET은 영화 목록 조회 요청 등에 사용되고, POST는 외부에 보여지면 안되는 정보(비밀번호, 개인정보) 등을 요청할 때 사용한다.
ajax는 비동기식 데이터 통신이다.
과거에는, 브라우저가 어떤 정보를 요청하면 서버는 해당 정보를 포함한 페이지 전체를 보내주었는데,
ajax가 생긴 후, 브라우저는 서버로부터 데이터만 응답 받을 수 있게 되었다.
ajax로 응답받은 데이터는 XML과 JSON으로 받을 수 있지만 오늘 날에는 JSON이 기본이 되었다.
$.ajax({
type: "GET", // GET 방식 요청
url: "요청할 주소",
data: {}, // 요청과 동시에 전송해줄 데이터 (변수에 담긴 데이터 등)
dataType:'html', // ''안에 담긴 형식으로 값을 담아온다.(꼭 HTML이 아니어도 된다.)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 받은 데이터를 이용해서 코드 작성
}
})ajax사용의 기본 뼈대다.
여기서 GET과 POST에 대해 알아보자면,
GET 요청
- 서버에서 데이터를 요청할 때 사용한다.
- 캐시가 가능하다.
- 브라우저 기록이 남는다.
- 북마크 추가가 가능하다.
- 길이 제한이 있다. (브라우저마다 다르다.)
- 중요한 정보를 다루지 않는다. ('URL 끝의 파라미터'( = 쿼리 스트링)에 노출되기 때문)
- idempotent(멱등성 : 어떤 조작을 몇 번을 반복해도 결과가 동일한 것)
POST 요청
- 서버의 데이터를 생성, 수정할 때 사용한다.
- 캐시되지 않는다.
- 브라우저 히스토리에 남지 않는다.
- 북마크가 되지 않는다.
- 데이터 길이에 제한이 없다.
- 멱등성이 없다.
(생성에는 POST, 수정은 PUT 또는 PATCH, 삭제는 DELETE 가 더 용도에 맞는 메소드라고 할 수 있다.)
function q1() {
$(`#names-q1`).empty();
$.ajax({
type: "GET",
url: "https://api.coinpaprika.com/v1/tickers",
data: {},
success: function (response) {
for (let i = 0; i < response.length; i++) {
let name = response[i]['name'];
let symbol = response[i]['symbol'];
let price = response[i]['quotes']['USD']['price'];
let html = `<tr id="tr">
<td>${name}</td>
<td>${symbol}</td>
<td>${price}</td>
</tr>`
$(`#names-q1`).append(html);
}
}
})
}코인 API를 사용해서 이름, 가격, 심볼을 보여주는 코드를 작성해봤다.
JSON으로 응답받은 데이터들 중 하나인데, 한 줄이 아닌 여러줄로 적힌 코드라 낯설었다.
설명하자면, 코인 정보 전체를 response(response = [코인1 정보, 코인2 정보 ...])로 받고
response의 i 번째(코인1 정보)의 name과, symbol, 그리고 코인1 정보 속의 quotes의 USD를 사용했다.
잘 나온다!
