[Javascript/jQuery] GET/POST 방식 | AJAX 란?

GET / POST

두 방식 모두 서버에 요청하는 메소드이다.

 

get 방식은 입력한 데이터 값을 URL에 붙여서 전송하는 방식이다.

www.sample.com?name=testName&pass=1234

 

이런형태로 url 에 key / value 의 형태로 붙어서 주소창에 보여지게 된다.

 

• key = name  /  value = testName
• key = pass  /  value = 1234

 

post방식에 비해 보안이 취약할수있고 간단한 데이터를 넣게 설계돼있어서 길이가 너무 길 경우 오류가 날 수 있다.

 

 

post 방식은 URL에 값을 붙여서 보내는 get방식과는 다르게 BODY에 데이터를 실어서 보내는 형태이다. 

헤더필드중 BODY의 데이터를 설명하는 Content-Type이라는 헤더 필드가 들어가고 어떤 데이터 타입인지 명시한다.

 

 

---

ajax

AJAX는 비동기 방식으로 페이지 이동이나 리로드 되지않고 데이터를 불러오는 방식으로 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request한다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

 

$.ajax ({
  // URL은 필수 요소이므로 반드시 구현해야 하는 Property입니다.
  url	: "url", // 요청이 전송될 URL 주소
  type	: "GET", // http 요청 방식 (default: ‘GET’)
  async : true,  // 요청 시 동기화 여부. 기본은 비동기(asynchronous) 요청 (default: true)
  cache : true,  // 캐시 여부
  timeout : 3000, // 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백을 호출.(단위: ms)
  data  : {key : value}, // 요청 시 포함되어질 데이터
  processData : true, // 데이터를 컨텐트 타입에 맞게 변환 여부
  contentType : "application/json", // 요청 컨텐트 타입 
  dataType    : "json", // 응답 데이터 형식 (명시하지 않을 경우 자동으로 추측)
  beforeSend  : function () {
    // XHR Header를 포함해서 HTTP Request를 하기전에 호출됩니다.
  },
  success : function(data, status, xhr) {
    // 정상적으로 응답 받았을 경우에는 success 콜백이 호출되게 됩니다.
    // 이 콜백 함수의 파라미터에서는 응답 바디, 응답 코드 그리고 XHR 헤더를 확인할 수 있습니다.
  },
  error	: function(xhr, status, error) {
        // 응답을 받지 못하였다거나 정상적인 응답이지만 데이터 형식을 확인할 수 없기 때문에 
        // error 콜백이 호출될 수 있습니다.
        // 예를 들어, dataType을 지정해서 응답 받을 데이터 형식을 지정하였지만,
        // 서버에서는 다른 데이터형식으로 응답하면  error 콜백이 호출되게 됩니다.
  },
  complete : function(xhr, status) {
    // success와 error 콜백이 호출된 후에 반드시 호출됩니다.
    // try - catch - finally의 finally 구문과 동일합니다.
  }
});

 

AJAX의 진행과정

1. XMLHttpRequest Object를 만든다.
   • request를 보낼 준비를 브라우저에게 시키는 과정
   • 이것을 위해서 필요한 method를 갖춘 object가 필요함
2. callback 함수를 만든다.
   • 서버에서 response가 왔을 때 실행시키는 함수
   • HTML 페이지를 업데이트 함
3. Open a request
   • 서버에서 response가 왔을 때 실행시키는 함수
   • HTML 페이지를 업데이트 함
4. send the request

 

 

*개인적으로 crud연습하면서 ajax를 사용할때 success : function(data, status, xhr) 파라미터에 idCHkRersult 이런식으로 네이밍된 변수를 넣곤했는데 통상적으론 주고받는값이기 때문에 result, res, response 같은 네이밍으로 넣는것이 좋다!

 

 

출처: https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80