[ajax] 데이터 전송

화면 전환 없이 데이터를 전송하기 위해 ajax를 사용하고 있다.
필요할 때마다 찾아보고 기존 것을 활용해 복붙을 하여도 충분하지만,
계속 이러다가는 발전이 없을 것 같아 정리.

---

Ajax(Asynchronous JavaScript and XML)란?
자바스크립트를 이용한 비동기식으로 XML 이용하여 서버와 통신하는 방식.
최근에는 XML보다 JSON을 더 많이 사용
주로 화면 전체를 전환시키지 않고 부분적으로 처리할 때 사용
페이지 일부분에만 새로운 콘텐츠를 로드하는 기능은 사용자의 전체적인 사용 경험을 향상
SPA(Sinlge Page Application, 브라우저에서 실행되지만 마치 소프트웨어 애플리케이션 같은 느낌을 주는 웹 기반 도구)가 등장하는 계기

Ajax의 동작 방식
브라우저에서 Ajax 요청을 담당하는 XMLHttpRequest라는 객체를 통해 서버에 정보를 요청, 응답받는다.

콜백 동작 순서
성공 시 : success > complete > done > always
실패 시 : error > complete > fail > always

jQuery를 이용한 Ajax
Ajax의 기본 Method를 이용하면 XMLHttpRequest를 직접 사용하게 되는데 때문에 이러한 복잡한 과정 없이 jQuery를 이용하면 간단하게 서버와 데이터를 주고받을 수 있습니다. 또한 크로스 브라우징 문제도 jQuery가 알아서 해결해주고 여러 가지 편리한 기능들을 제공한다.

$.ajax([settings]) 함수의 property

$.ajax ({
	url	: "url", 							// (Required) 요청이 전송될 URL 주소  
	type	: "GET", 						// (default: ‘GET’) http 요청 방식  
	async : true,  							// (default: true, asynchronous) 요청 시 동기화 여부  
	cache : true,  							// (default: true, false for dataType 'script' and 'jsonp') 캐시 여부  
	timeout : 3000, 						// (ms) 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백 호출  
	data  : {key : value}, 					// 요청 시 전달할 데이터  
	processData : true, 					// (default: true) 데이터를 컨텐트 타입에 맞게 변환 여부  
	contentType : "application/json", 		// (default: 'application/x-www-form-urlencoded; charset=UTF-8')  
	dataType    : "json", 					// (default: Intelligent Guess (xml, json, script, or html)) 응답 데이터 형식  
	beforeSend  : function () {    			
		// XHR Header 포함, HTTP Request 하기전에 호출  
	},  
	success : function(data, status, xhr) { 
	   // 정상적으로 응답 받았을 경우 파라미터는 응답 바디, 응답 코드 그리고 XHR 헤더 
	}, 
	error	: function(xhr, status, error) {
	    // 응답을 받지 못하거나 정상적인 응답이지만 데이터 형식을 확인할 수 없는 경우  
	},  
	complete : function(xhr, status) {
		// success와 error 콜백이 호출된 후에 반드시 호출, try - catch - finally의 finally 구문과 동일
	}
});

출처: https://string.tistory.com/128 [Sky Archive:티스토리]

---

1. JSON 형태로 데이터 전송

	$.ajax({
      url: '데이터를 보낼 곳 url',
      type: 'form 태그의 method 속성(post / get)',
      data: {
              "변수1": "변수1의 값"
            , "변수2": "변수2의 값"
      },
      success: function (data) {
              alert("데이터 전송이 성공적으로 끝났을 때 실행");
          }
	});

2. form 데이터 한번에 전송

	var queryString = $('#폼id').serialize();
    $.ajax({
        url: '데이터를 보낼 곳 url',
        type: 'form 태그의 method 속성(post 또는 get)',
        data: {"폼 데이터 변수 이름": queryString},
        success: function (data) {
                alert("데이터 전송이 성공적으로 끝났을 때 실행");
            }
    });

3. 체크박스 데이터 등 배열 형태로 데이터 전송

• 배열 형태의 데이터 전송시, 배열데이터를 직렬화하는 코드(jQuery.ajaxSettings.traditional = true;)를 작성해야 한다.

	var array = {1,2,3,4,5};
	jQuery.ajaxSettings.traditional = true;
    
	$.ajax({
    url: '데이터를 보낼 곳 url',
    type: 'form 태그의 method 속성(post 또는 get)',
    data: {"배열변수": array},
    success: function (data) {
            alert("데이터 전송이 성공적으로 끝났을 때 실행");
        }
	});

현재 작업 중인 소스에서 기존에 자주 사용하는 양식

	$.ajax({
	url : '<%=request.getContextPath() %>블라블라.do',
    type : "post",
    mimeType: 'text/json',
    data : { 
    		  "dlbrt_cmmb_id" : dlbrt_cmmb_id
    		, "type" : "tout" 
    },
    processData : true,
    success : function(data) {
    	if(data.flag == "0") {
    		$("#unique_check_btn").css("display","none");
    		$("#unique_check_btn_rollback").css("display","inline-block");
    		$("#unique_check").val("true");
    		$("#dlbrt_cmmb_id").prop("readonly", true);
    	} else {
    		$("#unique_check").val("false");
    	}
    	alert(data.msg);
    } ,
    error : function(data){
    	console.log(data);
    	alert("오류가 발생했습니다.");
    } ,
    complete : function() {
    }
});