ajax type

📌 get

get 요청은 서버에서 데이터를 가져오는데 사용된다.
보통 서버에 저장된 정보를 읽기만할때 사용되어지는데 URL 에 쿼리 문자열로 데이터를 전송한다.

• 데이터 전달방식 : url에 파라미터를 추가하여 전송
• 보안 : url 에 데이터가 노출되므로 민감한 데이터 전송에 적합하지 않음

📌 post

post 요청은 서버에 데이터를 보낼때 사용된다.
클라이언트에서 서버로 데이터를 안전하게 전송할수있는 방법으로 주로 회원가입, 로그인 데이터 저장등의 작업에 사용된다.

• 데이터 전달방식 : 데이터는 요청본문에 담겨 전송된다. url에 데이터가 노출되지않아 보안이 중요한 데이터전송에 적합.
• 보안 : get요청보다는 상대적으로 안정하지만 여전히 https 를 사용하는것이 좋음.

✨ JSON.stringify()

1. 필요할때
   서버가 "나한테 JSON 형식의 문자열로 줘" (application/json)라고 요구할 때 ( REST API 호출, 복잡한 객체나 배열을 그대로 전송할때)

- 객체 : 키와 값으로 이루어진 쌍으로 데이터가 저장된 형태
- 배열 : 숫자 인덱스를 사용하여 값에 접근 ex) ['a', 'b', 'c']

var myData = { id: "user1", items: ["apple", "banana"] };

$.ajax({
    url: "/api/save",
    type: "POST",
    contentType: "application/json", // ★ 서버에 "이건 JSON이야"라고 알림
    data: JSON.stringify(myData),    // ★ 객체를 문자열로 변환하여 전송
    success: function(res) { ... }
});

자바스크립트의 객체(object) 그 자체는 http 통신으로 날아갈 수 없기에 이를 텍스트(String) 형태로 변환해줘야 서버가 읽을수 있다.

2. 필요없을때
   서버가 "일반 폼 전송처럼 줘" (application/x-www-form-urlencoded)라고 할 때 , form 태그가 데이터를 보내는 기본방식이다. (단순 로그인 폼, 검색 조건, GET 요청의 파라미터 등.)

var myData = { name: "홍길동", age: 30 };

$.ajax({
    url: "/login",
    type: "POST",
    // contentType 설정을 안 하거나 "application/x-www-form-urlencoded" (기본값)
    data: myData, // ★ 그냥 객체를 넣으면 jQuery가 알아서 "name=홍길동&age=30"으로 변환해줌
    success: function(res) { ... }
});