Ajax in Jquery

 

---

 

1. JavaScript를 이용하여 ajax 사용하기

javaScript를 이용해서 ajax를 사용하려면 대체로 코드가 길어집니다.

또한 request 오픈 -> 데이터 전송 -> 콜백 / 응답 이 따로 존재 하기 때문에

캡슐화를 제대로 하지 못하면 로직이 분리 되거나 유지보수 하기 힘들어 질 수 있습니다.

 

// XMLHttpRequest 객체의 생성
const xhr = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
xhr.open('GET', 'data/data.html');
// Request를 전송한다
xhr.send();

// Event Handler
xhr.onreadystatechange = function () {
  // 서버 응답 완료 && 정상 응답
  if (xhr.readyState !== XMLHttpRequest.DONE) return;
  if (xhr.status === 200) {
    console.log(xhr.responseText);
    document.getElementById('content').innerHTML = xhr.responseText;
  } else {
    console.log(`[${xhr.status}] : ${xhr.statusText}`);
  }
};

 

2. Jquery를 이용하여 ajax 사용하기

jquery를 사용하면 가독성도 좋고 json 포맷으로 옵션을 추가 할수 있어

더 직관적이고 캡슐화 효과도 볼수 있습니다.

$.ajax({
  url: this.url,
  type: 'POST',
  data: this.formData,
  success: function (data) {
  	console.log("success data : " + data)
  }, error: function (xhr, status) {
  	console.log("error data : " + xhr + " : " + status);
  }
});

 

3. Jquery ajax 또 다른 장점

ajax를 사용하는 로직 거의 대부분은 사용자도 모르게 데이터를 보내고 콜백을 기다려야 하기 때문에,

대부분 로딩바가 돌아가는 로직을 추가 시켜

사용자는 현재 웹사이트가 '무엇인가를 처리하고 있구나' 라고 알려 줘야 합니다.

(로딩바가 돌아간다) -> ajax 전송 -> 서버 응답 -> (로딩바가 멈춘다)

이와 같은 로직을 $.ajax는 'beforeSend' 와 'complete' 옵션을 이용해서 쉽게 구현이 가능 합니다.

$.ajax({
	url: url,
	type: 'POST',
	data: formData,
	success: function (data) {
		console.log("success data : " + data)
	},error: function (xhr, status) {
		console.log("error data : " + xhr + " : " + status);
	},beforeSend:function(){
		//로딩바 출력 하기
		$(loadingBar).show();
	},complete:function(){
		//로딩바 감추기
		$(loadingBar).hide();
	}
});

 

4. Jquery ajax 캡슐화

ajax는 여러 페이지에서 자주 사용하는 함수 입니다.

그리고 거의 모든 페이지에서 옵션들이 고정이기 때문에

저는 아래 소스 코드 처럼 캡슐화 시켜놓고 사용 합니다.

function ComAjax(formId){
	this.formId = gfn_isNull(formId) == true ? "commonForm" : formId;
	this.formData = new FormData($('#' + this.formId)[0]);
	this.url = "";
	this.loadingBar;
	
	this.addParam = function addParam(key, value){
		this.formData.append(key, value);
	};
	
	this.setUrl = function setUrl(url){
        this.url = url;
    };
     
    this.getUrl = function getUrl(url){
        return this.url;
    };
    
    this.setLoadingBar = function setLoadingBar(loadingBar){
        this.loadingBar = loadingBar;
    };
	
    this.ajax = function ajax(){
        $.ajax({
            url: this.url,
            processData: false,
            contentType: false,
            type: 'POST',
            data: this.formData,
            success: function (data) {
            	console.log("success data : " + data)
            },error: function (xhr, status) {
            	console.log("error data : " + xhr + " : " + status);
            },beforeSend:function(){
            	$(this.loadingBar).show();
            },complete:function(){
            	$(this.loadingBar).hide();
            }
        });
    };
}