Ajax XMLHttpRequest caching 방지

요즘엔 비동기 호출을 할때 대부분 오픈프레임웩에서 제공하는 라이브러리르 쓰니 이런고민을 해보지 않았는데,
어쩌다 XMLHttpRequest를 만들어 사용하다보니 브라우저 캐싱 문제에 봉착.
알고보면 아주아주 간단한건데, 이런적이 없다보니 검색 키워드의 부재로 인해 열심히.....

아무튼 각설하고,

xmlHttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT"); //캐싱방지

(이렇게 해주면 리플레시 할때마다 다른 부라우저로 인식 한다고 하는데, 어떤의민지는.. 알면 리플좀..)
이거 하나면 되는거다. 

요즘엔 브라우저거 점점더 좋아지다보니, 캐싱이 거의 default...
위방밥을 이곳저곳 산재해서 쓰다간 웹브라우저가 풀썩 죽어버릴수도 있으니 주의.

 XMLHttpRequest 필요에의해 만든 예든예제.

/**

 * AjaxUtil 

 * @param url

 * @param methodType   : get 혹은 post

 * @param asynchronous : 비동기(true) 동동기(false)

 * @param params

 * @param callbackmethod

 * @param responseType : XML / TEXT / JSON 

 * @returns

 * 

 * @example 

 * new AjaxUtil(url, methodType, asynchronous, params ,callbackmethod , responseType);

 */

var AjaxUtil = function(url, methodType, asynchronous, params ,callbackmethod , responseType){

var actionUrl = url;

var xmlHttp = new XMLHttpRequest();

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState == 0){

//UNINITIALIZED :: open()이 아직 호출되지 않은 상태

}else if(xmlHttp.readyState == 1){

//LOADING :: send()가 호출되지 않은 상태 (load중)

}else if(xmlHttp.readyState == 2){

//LOADED::send() 호출 완료하여 header 와 status 사용이 가능한 상태이며, load완료

}else if(xmlHttp.readyState == 3){

//INTERACTIVE :: 일부 data 를 받을 수 있는 상태로 처리중

}else if(xmlHttp.readyState == "4"){

//COMPLETE :: 모든 데이터를 받을 수 있는 상태로 완료

if(xmlHttp.status == "200"){

//this.handleResponse(xmlHttp, callbackmethod, responseType);

new AjaxResponseUtil(xmlHttp, callbackmethod, responseType);

}else if(xmlHttp.status == "404"){

}else if(xmlHttp.status == "500"){

}

}

};

if(methodType.toUpperCase() == "GET"){

xmlHttp.open("get" , actionUrl +"?" + params , asynchronous);

//항상 open과 send사이에 있어야함.

xmlHttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT"); //캐싱방지

xmlHttp.send(null);

}else if(methodType.toUpperCase() == "POST"){

xmlHttp.open("POST", actionUrl, asynchronous);

//Post 방식에서 다음 헤더 지정

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlHttp.setRequestHeader("Content-length", params.length);

xmlHttp.setRequestHeader("Connection", "close");

xmlHttp.send(params);  //parameter 를 전송

}

};

AjaxUtil.prototype = {

handleResponse : function (response, callbackmethod){

},

uninitialized : function (){//readyState 0

},

open : function (){//readyState 1

},

sent : function (){//readyState 2

},

receiving : function (){//readyState 3

},

loaded : function(){//readyState 4

}

};

/**

 *기본 response Handling Ajaxutil 

 *

 *@param response 

 *@param callbackmethod 종료후 실행 function

 *@param responseType json/xml/text 택일

 */

var AjaxResponseUtil = function(response, callbackmethod, responseType){

var handlingData = this.responseHandling(response, responseType)

callbackmethod(handlingData);

}

AjaxResponseUtil.prototype = {

responseHandling : function(response, responseType){

var resJSON = eval('(' + response.responseText + ')'); //JSON

var resXML = response.responseXML;  //XML

var resText = response.responseText;  //Text

var resObj = new Object();

switch(responseType.toUpperCase()){

case "JSON": resObj = resJSON;

break;

case "XML": resObj = resXML;

break;

case "TEXT": resObj = resText;

break;

default : resObj = resJSON; 

break;

}

return resObj;

}

}

function ajajUtilCallSample(){

var url = "/employ/summertimeManagement/getSMTList.hr";

var methodType = 'get';

var asynchronous = true;

var params = {} 

var callbackmethod = callbackMethod 

var responseType = "JSON";

try{

new AjaxUtil(url, methodType, asynchronous, params ,callbackmethod , responseType);

}catch(e){

alert(e.message);

}

}

function callbackMethod(resManufacture){

//TODO : resManufacture 사용

}