블록체인 기술사업 교육 31일차

Ajax(Asynchronous Javascript and xml)

- 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법(비동기 처리 기법) 중 하나

ex) 페이지를 전환하지 않고도 예상 결과를 보여줌 (아이디 중복체크)

※ 요즘은 ajax보다는 fetch()나 axios를 사용

기본 메소드

- $.ajax() = ajax를 이용하여 HTTP 요청을 전송($.get + $.post)

- $.ajax().done() = HTTP 요청이 성공할 경우 done()에 데이터 전달

- $.ajax().fail() = HTTP 요청이 실패할 경우 오류와 상태에 관한 데이터를 fail()에 전달

- $.ajax().always() = HTTP 요청 성공 유무와 상관없이 실행

 

- $.get() = 지정한 주소로 GET 방식으로 HTTP 요청
- $.post() = 지정한 주소로 POST 방식으로 HTTP 요청
- $.getScript() = 웹 페이지에 스크립트를 추가
- $.getJSON() = 지정한 주소로 GET 방식의 HTTP 요청을 전송 및 응답으로 JSON을 반환받도록 설정

- $.load(파일 경로) = 서버에서 파일을 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 표시

$.ajax({
     url: "/ajax", // 서버 주소
     method: "GET", // HTTP 요청 방식
     datatype: "json", // 서버에서 보내줄 데이터의 타입
     data: {
        _id: $("#input_id").val(),
     } // HTTP 요청과 함께 서버로 전송할 데이터   
})

문법 형태

- 콜백 방식 = ajax에 콜백 함수 전달

- 프로퍼티 방식 = 함수를 포함한 JSON 전달

- 프로미스 방식 = 프로미스 객체를 통해 메서드 체이닝 이용

- 헤더 설정 = http 헤더 설정 후 요청

// 콜백 방식
$.get('url', (data) => { console.log(data); });

// 프로퍼티 방식
$.get('url', {
  success: () => { console.log("요청 성공"); },
  error: () => { console.log("요청 실패"); },
  always: () => { console.log("요청 완료"); }
});

// 프로미스 방식 (메서드 체이닝)
$.get('url')
    .done(() => { console.log("요청 성공"); })
    .fail(() => { console.log("요청 실패"); })
    .always(() => { console.log("요청 완료"); });

// 헤더 설정
$.ajax({
    type: "GET",
    url: "url",
    beforeSend: (xhr) => { // 서버에 요청 보내기전 헤더 설정
        xhr.setRequestHeader("Content-type", "application/json");
		xhr.setRequestHeader("ApiKey", "daskjoljasb"); 
    }
});