javascript ajax 사용방법 예제 (바닐라, 기본 javascript)

순수 자바스크립트를 사용해서 ajax를 호출하는 방법에 대해서 정리한다.

ajax를 잘 모르는 사람도 내용을 보고 사용할 수 있도록 쉽게 정리한다.

 

jquery를 사용해서 호출하면 가독성도 좋고 편리하지만, 사실 순수 javascript 로만으로도 ajax 구현은 당연히 가능한 부분이다. 

 

jquery ajax 호출에 대한 부분에 대해서는 아래 포스팅을 참조하도록 하자.

 

jquery ajax 사용방법 예제

jquery ajax 사용방법 예제

 

 

1. ajax기본 전송 - method POST

ajax 기본전송에 대해  아래 코드를 통해서 자세히 알아보시기 바랍니다.

 

 

// AJAX 요청을 보내는 함수 선언
function sendAjaxRequest(url, method, data, callback) {
  // XMLHttpRequest 객체 생성
  var xhr = new XMLHttpRequest();
  
  // 요청을 열고 초기화
  xhr.open(method, url, true);
  
  // 요청 상태가 변경될 때마다 호출되는 콜백 함수 설정
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) { // 요청이 완료되었을 때
      if (xhr.status === 200) { // 응답 상태 코드가 200 (성공)인 경우
        callback(null, xhr.responseText); // 콜백 함수 호출 (오류 없음)
      } else {
        callback(new Error('Request failed with status: ' + xhr.status), null); // 콜백 함수 호출 (오류 발생)
      }
    }
  };

  // 요청 헤더 설정
  xhr.setRequestHeader('Content-Type', 'application/json');
  
  // 요청 데이터를 JSON 문자열로 변환하여 전송
  xhr.send(JSON.stringify(data));
}

 

2. 사용 예시 

위에서 작성된 ajax 함수를 이용해서 아래와 사용할 수 있습니다.

// 사용 예시
var requestData = {
  key1: 'value1',
  key2: 'value2'
};

// AJAX 요청 보내고 응답을 처리하는 함수 호출
sendAjaxRequest('https://example.com/api', 'POST', requestData, function (error, response) {
  if (error) {
    console.error('AJAX request error:', error);
  } else {
    console.log('AJAX response:', response);
    // 여기서 응답 데이터를 처리합니다.
  }
});

 

3. 결괏값 처리

서버호출 이후에는 response를 받으므로 받은 데이터 값을 json 파싱 하여 사용할 수 있습니다.

var result = JSON.stringfy(response);

 

 

※ javascript를 웹페이지에서 간편하게 바로 테스트해볼 수 있습니다.

아래 포스팅도 함께 확인해 보시기 바랍니다.

 

javascript 테스트 사이트

javascript 테스트 사이트