jQuery Ajax

Preface

 

jQuery를 통한 Ajax 사용과 관련된 자세한 내용을 담고 있는 동영상은 없는 것 같아 생활코딩에 있는 글과 Chat-GPT의 내용만을 바탕으로 간단하게 글을 업로드한다.

---

 

- jQuery의 Ajax API 링크: https://api.jquery.com/jQuery.ajax/

jQuery.ajax() | jQuery API Documentation

 

 

- jQuery를 이용해서 Ajax를 사용하는 이유

1) 간편한 구현: jQuery는 간결하고 사용하기 쉬운 API를 제공하여 Ajax 요청을 쉽게 작성할 수 있다.

→ JavaScript의 네이티브 XMLHttpRequest 객체보다 더 간편한 방법으로 Ajax 요청을 처리할 수 있다.
2) 크로스 브라우징 문제 해결: 브라우저 간의 차이점을 처리하는 부분을 jQuery가 처리해준다.
3) 강력한 기능: jQuery는 Ajax 요청에 대한 다양한 기능과 옵션을 제공한다.

→ 데이터의 비동기적인 로딩, 서버와의 통신, 데이터의 전송 및 수신, 페이지 갱신 등 다양한 작업을 쉽게 처리할 수 있다.

 

 

- 크로스 브라우징(Cross-Browser Compatibility): 웹 페이지 또는 웹 애플리케이션이 다양한 웹 브라우저에서 동일한 방식으로 작동하고 모습이 일관되도록 하는 개념

 

 

- $.ajax 기본 문법

jQuery.ajax( [settings ] )

 

 

- settings에 들어갈 속성값

1) data: 서버로 데이터를 전송할 때 이 옵션을 사용한다.

2) dataType: 서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다.

→ xml, json, script, html이 올 수 있고, 형식을 지정하지 않으면 jQuery가 알아서 판단한다.

3) success: 성공했을 때 호출할 콜백을 지정한다.

→ Function( PlainObject data, String textStatus, jqXHR jqXHR)

4) type: 데이터를 전송하는 방법을 지정하며, get, post를 사용할 수 있다.

→ 디폴트 값은 get이므로 post 방식은 type 값을 따로 지정해야 한다.

 

 

- $.ajax 예제 코드

$.ajax({
  url: 'http://example.com/api/data',
  method: 'GET',
  data: { key: 'value' },
  success: function(response) {
    // 성공적으로 응답을 받았을 때 실행되는 콜백 함수
    console.log(response);
  },
  error: function(xhr, status, error) {
    // 요청이 실패했을 때 실행되는 콜백 함수
    console.log(error);
  }
});

 

 

 

- 출처: https://opentutorials.org/module/904/6851

jQuery Ajax - 웹브라우저 JavaScript