혁로그

웹페이지에서 동기방식으로 서버로 데이터를 보낼 때, 클라이언트는 응답을 기다리고 다른 일을 처리할 수 없게 된다. 

이를 해결하기 위해서 비동기통신을 이용하게 된다. 

비동기통신을 이용하면 페이지를 새로 로드하지 않고 페이지를 재구성할 수 있다. 

비동기 통신을 하기 위해 ajax를 사용했다.

jQuery ajax() Method (w3schools.com)

위 사이트에서 jQuery에서 제공하는 ajax를 이용하는 법을 배울 수 있다.

$.ajax({
	url:"/admin/product/regist",
	type:"post",
        data:{
            id:"hi"
        },
	success:function(result){
		alert(result);
	}
});

위의 $.ajax형태를 보게 되면 JSON형식(key:value)으로 이루어져있다고 볼 수 있다.

url은 통신할 url 정보를 입력

type은 get/post... 와 같은 통신방식을 입력

data는 서버로 전송할 파라미터

success는 서버와 통신을 성공하고 서버로부터 결과값을 받았을 때 실행할 익명함수를 입력한다. 

비동기통신을 이용하여 파일업로드

var formData = new FormData($("form")[0]);//<form>태그와는 다름.. 전송할 때 파라미터들을 담을 수 있지만 이 자체가 폼태그가 아니다!!

//미리보기했던 이미지들은 파일컴포넌트화 되어있지 않기 때문에, 전송데이터에서 빠져있다..
//따라서 formData전송 전에, 동적으로 파일컴포넌트화시켜 formData에 추가하자!!!
//java에서의 improved for문과 동일한 역할(주로 컬렉션에서 객체를 꺼낼 때 사용..)
//formData.append(name값, 업로드할 파일 객체, 파일명);
$.each(uploadFiles, function(i, file){
//미리보기만 가능했던 이미지들을 전송할 수 있는 형태로 만듬
formData.append("addImg", file, file.name);//<input type="file" name="addImg"> 동일
console.log(file.name);
});

나는 이미지를 미리보기하여 태그에 추가하여서 form태그 안에 컴포넌트화되어 있지 않기 때문에 동적으로 파일컴포넌트화시켜서 비동기통신 시 데이터로 보냈다.

$.ajax({
    url:"/admin/product/regist",
    data:formData,
    contentType:false,/*false일 경우 multipart/form-data로 지정한 효과!*/
    processData:false,/*false일 경우 query-string으로 전송하지 않음, 문자열만 보내는게 아니라 이미지도 껴있기 떄문에 stream방식*/
    type:"post",
    success:function(result){
    alert(result);
    }
});

형식은 일반 문자열을 보낼 때와는 비슷하지만, 추가로 작성해야된 부분이 있다.

contentType를 false로 주게 되면, multipart/form-data형식으로 서버로 전송하겠다는 뜻이다.

procesData를 false로 주게 되면, test.com?id=dasd 이런 파라미터를 이용하여 데이터를 전송(query-string방식)하는 게 아니라, 이미지와 같은 데이터를 보내기위한 stream방식으로 보내기위함이다.