2주차(3) 웹개발 강의: Ajax

* API란?

:서버에서 클라이언트가 요청을 할 때 필요한 창구 역할

 

API에는 'GET'방식과 'POST'방식이 있다.

-GET방식: 데이터를 조회를 요청할 때 (예시: 우리가 무언가를 검색할 때)

-POST방식: 데이터를 생성, 변경, 삭제를 요청할 때 (예시:회워가입, 탈퇴, 비밀번호 수정 등)

 

* JSON(JavaScript Object Notation)

Json은 클라이언트가 서버로부터 받는 데이터 형식

key:value로 이루어져 딕셔너리와 리스트의 조합의 형식으로 보인다.

복잡한 데이터가 json뷰를 다운 받으면 정리된 모습으로 데이터를 보여준다.

 

JSON형식0

{ }: 객체(딕셔너리)

[ ]: 배열

" ": 문자열

 문자열 외: 숫자

[{ }]: 객체의 배열

 

-Jsonview(크롬에 설치)

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

 

*Ajax

Ajax는 자바스크립트를 이용하여 서버와 브라우저가 데이터를 교환할 수 있는 통신기능

Ajax는 JQuery를  임포트한 페이지에서만 동작 가능하다.

-Ajax기본골격 / 해당 url을 넣어주면 response가 데이터값을 받는다.

(Ajax기본골격은 외우지 않고 찾아서 복사하여 사용한다.)

<script>
    $.ajax({
        type: "GET",  //GET방식으로요청
        url: "여기에URL을입력",  
        data: {},     //요청후 함께 주는 데이터(GET은 비워둠)
        success: function(response){ //서버에서 주는 결과를 response변수에 담아 함수를 실행한다.
            console.log(response)    //서버에서 주는 결과로 나머지 코드 작성
        }
    })
</Script>