[jQuery] 클라이언트와 서버간의 비동기통신에 대해 알아보자. / 3부
1부 링크 - Ajax와 XMLHttpRequest에 대한 개념
[Javascript] 클라이언트와 서버간의 비동기통신에 대해 알아보자. / 1부
1. Ajax란? 'Asynchronous JavaScript and XML'의 약자다. Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로
ururuwave.tistory.com
2부 링크 - 콜백함수, promise, Fetch API에 대한 개념
[Javascript] 클라이언트와 서버간의 비동기통신에 대해 알아보자. / 2부
💡클라이언트와 서버간 비동기 통신 방법에는 크게 세가지가 있다. XMLHttpRequest 객체 Fetch API jquery의 ajax 통신 지난 1부에서는 XMLHttpRequest 객체 사용법에 대해 알아봤다. 2024.01.14 - [프로그래밍 언
ururuwave.tistory.com
3부에서는 jQuery의 ajax통신에 대해 알아보려고 한다.
💡서론
2015년 전에는 Fetch API가 없었다.
XMLHttpRequest는 사용법이 복잡하여 코드 가독성과 유지보수성이 떨어졌기때문에, 더 직관적이고 간결한 jQuery의 ajax통신이 선호되었다.
또한 jQuery는 크로스 브라우저 호환성이 좋은 편이다. (오래된 브라우저에서도 안정적으로 통신을 할 수 있다.)
하지만 internet Explorer가 공식 종료된 이후에 Fetch API를 사용하는 개발자들이 더 많아졌다.
크로스 브라우징 외에도 Fetch API는 공식 ECMAScript 표준이고 jQuery Ajax에서 제공되는 기능을 Fetch API에서 비슷하게 구현할 수 있다.
Fetch API가 더 현대적이고 간결한 접근 방식을 제공한다.
하지만 기존 코드를 Fetch API로 전환하는데 시간과 비용이 들기때문에 여전히 jQuery ajax를 사용하는 기존 프로젝트들이있기 때문에, jQuery ajax도 알 필요가 있다.
1. jQuery와 JavaScript의 관계
jQuery는 JavaScript를 쉽게 사용할 수 있도록 만들어진 경량 라이브러리다.
jQuery는 JavaScript 코드를 사용하며 JavaScript 없이는 존재할 수 없다.
최근 웹 개발 트렌드는 jQuery에 덜 의존하고 순수 JavaScript를 사용하는 방향으로 가고 있다.
왜냐하면,
- ECMAScript 6(ES6)에서 새로운 문법과 기능들이 도입되었는데 기존 보다 더 코드를 간결하고 효율적으로 작성할 수 있게 되었다.
- SPA(Single Page Application)의 인기가 높아짐에 따라 페이지를 부분적으로 갱신하는 jQuery의 접근 방식보다 React, Vue, Angular와 같은 프레임워크가 주목받게 되었다.
- 속도 이슈: jQuery는 자체적인 코드를 포함하는 라이브러리다. 그래서 웹 페이지 로딩 시 추가적인 다운로드가 필요하고 이는 페이지 로딩 속도에 영향을 줄 수 있다. 또한, 크로스 브라우징을 위해 다양한 기능에 대한 추상화 레이어를 제공하는데 내부적으로 추가적인 처리 단계가 필요하여 순수 javaScript코드에 비해 실행 속도가 느리다.
- 메모리 이슈 : jQuery는 내부적으로 여러 유틸리티, 메서드 , 객체를 관리한다. 이런 추가적인 메모리 사용은 메로리 자원이 제한적인 환경에서 문제가 될 수 있다.
2. jQuery Ajax란?
웹 페이지가 서버와 비동기적으로 데이터를 교환할 수 있게 하는 JavaScript 기능이다.
페이지 전체를 새로 고침하지 않고도 서버로부터 데이터를 받아 페이지의 일부를 업데이트할 수 있다.
3.jQuery AJAX의 내장 옵션
| 옵션 | 설명 |
| url | 요청을 보낼 URL |
| type | HTTP 요청 메서드(GET, POST 등) |
| data | 서버로 전송할 데이터. 객체 또는 쿼리 문자열 형태로 전달한다. |
| dataType | 서버로부터 반환되는 데이터 형식 |
| contentType | 요청의 컨텐츠 타입(ex. application/json) |
| processData | 데이터를 쿼리 문자열로 변환할지 여부. |
| success | 요청이 성공적으로 완료되었을 때 호출될 콜백 함수 |
| error | 요청이 실패했을 때 호출될 콜백 함수 |
| complete | 요청이 완료되었을때 호출될 콜백 함수 |
| beforeSend | 요청을 보내기 전 호출될 콜백 함수 |
| async | 비동기 요청 여부. 기본값은 'true' |
| timeout | 요청 타임아웃 시간(밀리초) |
4. 대용량 파일 업로드를 위한 코드 예시
(2부에 Fetch API에서도 대용량 파일 업로드 코드 예시가 있으니 비교해보는 것을 추천함)
<HTML 코드>
<input type="file" id="fileInput">
<button id="uploadButton">Upload</button>
<JavaScript(jQuery) 코드>
$(document).ready(function() {
$('#uploadButton').click(function() {
var fileData = $('#fileInput').prop('files')[0];
var formData = new FormData();
formData.append('file', fileData);
$.ajax({
url: 'https://example.com/upload', // 업로드를 처리할 서버 측 URL
type: 'POST', //HTTP 요청 메서드
data: formData, //서버에 보낼 데이터
processData: false, // 데이터를 쿼리 문자열로 변환하지 않도록 설정
contentType: false, // 기본 컨텐츠 타입 헤더를 설정하지 않도록 설정
success: function(data) { //성공했을때, 호출될 콜백함수
console.log('Upload success', data);
},
error: function(xhr, status, error) {//실패했을때, 호출될 콜백함수
console.error('Upload error', error);
}
});
});
});