[Javascript] Ajax 모듈

팀 프로젝트를 진행하다가 JQuery를 안쓰고 Ajax를 사용하려니 코드량도 길고 반복되는 코드가 많아져서 조잡하지만 간단하게 ajax를 사용할 수 있는 모듈을 만들어보았다. 실용성은 그다지 모르겠으나.. 나의 의도대로 잘 동작하긴 한다. 이는 요긴하게 쓰일 수 있는 모듈이므로 차차 업데이트를 진행할 예정이다.

function ajax(obj){
	
	const xhr = new XMLHttpRequest();
	
	var method = obj.method || 'GET';
	var url = obj.url || '';
	var data = obj.data || null;
	
	
	if(obj.contentType)
		xhr.setRequestHeader('Content-Type', obj.contentType);	
	
	/* 성공/에러/중단 */
	xhr.addEventListener('load', function() {
		
		const data = xhr.responseText;
		
		if(obj.load)
			obj.load(data);
	});
	
	/* 성공 */
	xhr.addEventListener('loadend', function() {
		
		const data = xhr.responseText;
		
		//console.log(data);
		
		obj.loadend(data);
	});
	
	/* 실패 */
	xhr.addEventListener('error', function() {
		
		console.log('Ajax 중 에러 발생 : ' + xhr.status + ' / ' + xhr.statusText);
		
		if(obj.error){
			obj.error(xhr, xhr.status, xhr.statusText);
		}
	});
	
	/* 중단 */
	xhr.addEventListener('abort', function() {
		
		if(obj.abort){
			obj.abort();
		}
	});
	
	/* 진행 */
	xhr.addEventListener('progress', function() {
		
		if(obj.progress){
			obj.progress();
		}
	});
	
	xhr.open(method, url, true);
	xhr.send(data);
}

다음은 위 모듈의 사용법 예시이다. JQuery의 향수를 느껴 이와 비슷하게 했다.

ajax({
	method: 'GET',
	url: '/replies/10/1',
	contentType: 'application/json',
	data: JSON.Stringify({data: 'data', id: 10}),
	loadend: (result) => {
		console.log(data);
	},
	load: () => {
		console.log('load !!');
	},
	error: (xhr, status, statusText) => {
		console.log(status);
		console.log(statusText);
	},
	progress: () => {
		console.log('progress');
	}
});

이 모듈을 만들며 자바스크립트의 함수에 대해 깊이 있는 공부를 하게 되어 기쁘다.