[jQuery] 제이쿼리를 활용한 Ajax get 요청

제이쿼리 jQuery 란?

jQuery

제이쿼리는 자바스크립트 라이브러리의 일종이다. 라이브러리란 자주 쓰이는 코드를 보다 간편하게 쓰기 위한 코드들의 묶음이다. 제이쿼리에서 요소를 선택하는 선택자의 종류는 여기 에서 확인해 볼 수 있다.

 

제이쿼리 라이브러리를 적용하기 위하여 CDN을 이용한다. 직접 파일을 다운받아 적용하는 방법도 있다.

<!-- CDN 방식 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- 직접 다운로드하여 적용 -->
<script src="js/jquery.js"></script>

간단한 문법 정리

// 제이쿼리 문법
$('#url').val('입력을 하고 싶다') // 내용 변경
$('#url').val() // value 가져오기
$('#post-box').hide(); // 요소 감추기
$('#post-box').show(); // 요소 보여주기

// html 문자열 -> html 요소
let tmp_html = `<button>나는 버튼</button>`;
$('#cards-box').append(tmp_html); //원하는 요소에 컨텐츠 추가

기본적으로 $('selector') 문법으로 요소를 선택하고, 원하는 메서드를 실행한다. 

템플릿 리터럴로 html 태그를 작성하고, 이를 .append() 메서드로 지정된 요소에 추가할 수 있다.

Ajax란?

Asynchronous Javascript And Xml 의 약자로, 자바스크립트를 이용해 서버와 브러우저간 비동기 방식 데이터 교환을 가능하게 하는 통신 기능이다. Ajax는 브라우저에서 제공하는 Web API 인 XMLHttpRequest 객체를 이용하여, 비동기 방식으로 페이지 전체가 아닌 일부분만을 위한 데이터를 로드하는 기법이다. 매번 페이지 전체를 새로 변경하지 않아도 되기 때문에 속도가 향상되어 보다 부드러운 사용자 경험을 제공한다. 

jQuery 에서 Ajax get 방식 요청하기

다음은 제이쿼리를 사용하는  get 방식 요청 구문이다.

$.ajax({
  type: 'GET', // 요청방식
  url: '여기에URL을입력', // 클라이언트에서 HTTP 요청을 보낼 서버 주소
  data: {}, // 요청과 함께 전달할 데이터
  success: function (response) { // 요청 성공시 호출할 콜백함수
    console.log(response);
  },
});

해당 구문에서는 response 로, get 요청으로 전달받은 데이터(json 형식 등)을 가공하여 활용할 수 있다.