28. ajax

fe.syhan·2023년 10월 31일

JS 기초

목록 보기

25/52

GET / POST

GET

클라이언트에서 서버로 어떠한 리소스로 부터 정보를 요청하기 위해 사용되는 메서드이다.

예로 게시판의 게시물을 조회할 때 쓸 수 있다.

GET을 통한 요청은 URL 주소 끝에 파라미터로 포함되어 전송되며, 이 부분을 쿼리 스트링이라고 한다.

www.example.com/show?key1=value1&key2=value2

URL 끝에 “?” 를 붙이고 그 다음 변수명1=값1&변수명2=값2 … 형식으로 이어 붙인다.

서버에서는 key1, key2 라는 파라미터 명으로 값1, 값2 의 파라미터 값을 전달 받을 수 있다.

특징

캐시가 가능하다. : 서버에 리소스를 요청할 때 웹 캐시가 요청을 가로채 서버로부터 리소스를 다시 다운로드 하는 대신 리소스의 복사본을 반환한다. HTTP 헤더에서 cache-control 헤더를 통해 캐시 옵션을 지정할 수 있다.
브라우저 히스토리에 남는다.
북마크 될 수 있다.
길이 제한이 있다. : 길이 제한의 표준이 있는건 아니지만 브라우저마다 제한이 다르다.
중요한 정보를 다루면 안된다. (보안) : 파라미터에 다 노출이 되기 때문에 최소한의 보안 의식이라고 생각 하자
데이터를 요청할 때만 사용 된다.

POST

클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용되는 메스드다.

예로 게시판에 게시글을 작성하는 작업 등을 할 때 사용 된다.

전송할 데이터를 HTTP 메시지 body 부분에 담아서 서버로 보낸다. (body의 타입은 Content-Type 헤더에 따라 결정 된다.)

GET에서 URL의 파라미터로 보냈던 name1=value1&name2=value2 가 body에 담겨 보내진다 생각하면 된다.

데이터를 전송할 때 길이 제한이 따로 없어서 용량이 큰 데이터를 보내거나, GET과는 달리 데이터가 외부적으로 드러나는건 아니라 보안이 필요한 부분에 사용 된다.

(하지만 데이터를 암호화하지 않으면 body의 데이터도 결국 볼 수 있는건 똑같다.)

특징

캐시되지 않는다.
브라우저 히스토리에 남지 않는다.
북마크 되지 않는다.
데이터 길이에 제한이 없다.

GET vs POST

사용목적 : GET은 데이터를 요청할 때, POST는 리소스를 새로 생성하거나 업데이트할 때 사용한다.
요청에 body 유무 : GET은 URL 파라미터에 요청하는 데이터를 담아 보내기 때문에 HTTP 메시지에 body가 없가. POST는 반대로 body가 존재함.
멱등성(idempotent) : GET = 멱등o / POST = 멱등x

💡 **멱등이란?** 사전적 정의는 연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질을 의미한다. GET은 리소스를 조회 한다는 점에서 여러 번 요청하더라도 응답이 똑같을 것이다. 반대로 POST는 리소스를 새로 생성하거나 업데이트할 때 사용되기 때문에 멱등이 아니라고 할 수 있다.

AJAX

AJAX란?

비동기 자바스크립트와 XML(Asynchronous Javascript And XML).

서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는것을 말한다.

JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다.

특징

페이지 전체를 리프레쉬 하지 않고서드 수행 되는 비동기 성.
서버로부터 데이터를 받고 작업을 수행

JQuery로 비동기요청

GET

$.get('url')
	.done(function(data) {
		// 요청 성공시, 
	}).fail(function(err) {
		// 요청 실패시,
	});

get 메서드에 get방식으로 요청할 URL 을 입력하고,

요청이 성공하면 실행될 코드를 done()를 적어준다.

이 때, done() 안에 콜백함수의 파라미터에(data) 요청한 결과들이 담긴 값들이 담겨 있다.

$.get()

제이쿼리에서 Ajax를 이용하여 전달받은 주소로 GET 방식의 HTTP 요청을 구현한 메서드이다.

$.get(url[,data][,success][,dataType]);

	Type	desc.
url	String	요청을 보낼 주소
data	PlainObject, String	HTTP 요청과 함께 서버로 보낼 데이터
success	Function	요청이 성공 했을 시, 실행할 콜백함수
dataType	String	서버에서 어떤 데이터 타입을 받을 것인지 정의