AJAX란, JavaScript의 라이브러리중 하나
Asynchronous Javascript And Xml (비동기식 자바스크립트와 xml)의 약자
-
자바스크립트를 통해서 서버에 데이터를 요청하는 것
-
AJAX라는 네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있다.
-
Ajax 기본 구조
Ajax는 jQuery를 임포트한 페이지에서만 동작 가능
$.ajax({
type: "GET", // GET 방식으로 요청
url: "여기에URL을입력", // 요청할 url
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두기)
success: function(response){
console.log(response)
}
})-
GET
통상적으로 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회 -
POST
통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
동기 (Synchronous : 동시에 일어나는)
- 동기는 말그대로 동시에 일어난다는 뜻
- 요청과 그 결과가 동시에 일어난다는 약속
- 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 한다.
비동기 (Asynchronous : 동시에 일어나지 않는)
- 동시에 일어나지 않는다는 것을 의미
- 요청과 결과가 동시에 일어나지 않을거라는 약속
- 요청한 그 자리에서 결과가 주어지지 않음
장단점
동기방식
- 설계가 매우 간단하고 직관적
- 결과가 주어질때까지 아무것도 못하고 대기해야하는 단점
비동기방식
- 동기보다 복잡
- 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점
JSON
- 데이터를 저장하거나 전송할 때 많이 사용
- JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용
- JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법
- key / value가 존재
서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다.
JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어졌다.
- 자바스크립트의 문법과 굉장히 유사하지만
텍스트 형식일 뿐이다.
처음 Ajax 강의를 들었을 땐 이거는 기본 구조가 이렇고 구조 안에 이 부분은 이렇게 작성하고 코드를 따라치면서 했었는데 이번에 다시 보면서 내가 지금 ajax가 정확히 뭔지 알고 코드를 작성하고 있는지 의문이 들어서 구글링을 통해서 좀 더 알아봤다. ajax는 클라이언트가 서버에 데이터를 요청하고 그 결과를 웹 페이지의 일부분에만 표시할 수 있는 개발 기법 중에 하나라고 한다. 새로 고침 없이 페이지 일부의 데이터를 바꿀 수 있는 것이 장점이라고 하는데 아직은 간단한 연습문제로만 공부를 해서 그런지 그렇게 와닿지는 않는 것 같다. 지금은 일단 ajax를 이용했을 때 어떠한 장단점들이 있는지 알고만 있는 게 좋을 것 같다..!
