크로스 브라우저 Ajax용 라이브러리

SYSTEM      :  잠정판 크로스 브라우저 Ajax용 라이브러리
PROGRAM    :  XMLHttpRequest에 의한 송수신을 합니다
FILE NAME  :  jslb_ajaxXXX.js
CALL FROM  :  Ajax 클라이언트
AUTHER      :  Toshirou Takahashi http://jsgt.org/mt/01/
SUPPORT URL :  http://jsgt.org/mt/archives/01/000409.html

//==============================================================================
//  SYSTEM      :  잠정판 크로스 브라우저 Ajax용 라이브러리
//  PROGRAM     :  XMLHttpRequest에 의한 송수신을 합니다
//  FILE NAME   :  jslb_ajaxXXX.js
//  CALL FROM   :  Ajax 클라이언트
//  AUTHER      :  Toshirou Takahashi http://jsgt.org/mt/01/
//  SUPPORT URL :  http://jsgt.org/mt/archives/01/000409.html
//  CREATE      :  2005.6.26
//  UPDATE      :  v0.512 2007.03.31 Safari2.0.4(419)のUA記述にも対処。
//  UPDATE      :  v0.511 2006.12.11 Safari2.04(418.9.1)のUA記述に対処。
//  UPDATE      :  v0.51  2006.11.15 .READMEを外へ移動しsendRequest実行前可視化。
//  UPDATE      :  v0.51  2006.11.15 内部のクオートをシングルに統一。
//  UPDATE      :  v0.50  2006.02.17 sendRequest.prototype.READMEを追加。
//  UPDATE      :  v0.50  2006.02.17 Win e7ネイティブXMLHttpRequest対応 。
//  UPDATE      :  v0.50  2006.02.17 引数dataにobject,array指定も追加 。
//  UPDATE      :  v0.39  2005.11.17 引数colbackにobject,array指定も追加。
//  UPDATE      :  v0.38  2005.10.18 chkAjaBrowser()を追加
//  UPDATE      :  v0.372 2005.10.14 uriEncodeを修正
//  UPDATE      :  v0.371 2005.10.7 GETとsload時の?の付け方を修正。
//  UPDATE      :  v0.37 2005.10.5.1 修正BSDライセンスやめました。
//                       著作権表示義務無し。商用利用、改造、自由。連絡不要です。
//  UPDATE      :  v0.37 2005.10.5 リクエストヘッダenctypeのセット方法等を変更
//                       setEncHeader、uriEncodeを追加
//                       @see http://jsgt.org/ajax/ref/test/enctype/test1.htm
//                       修正BSDライセンスにしました
//  UPDATE      :  v0.36 2005.7.20 (oj.setRequestHeader)がwinieでunknown
//                  を返すことが判明し修正（unknownなのに、動作はします）
//  UPDATE      :  v0.35 2005.7.19 POSTのContent-Type設定をOpera8.01対応
//  UPDATE      :  v0.34 2005.7.16 sendRequest()にuser,password引数を追加
//  UPDATE      :  v0.33 2005.7.3  Query Component(GET)の&と=以外を
//                                encodeURIComponentで完全エスケープ。
//  TEST-URL    :  헤더 http://jsgt.org/ajax/ref/lib/test_head.htm
//  TEST-URL    :  인증 http://jsgt.org/mt/archives/01/000428.html
//  TEST-URL    :  비동기 http://allabout.co.jp/career/javascript/closeup/CU20050615A/index.htm
//  TEST-URL    :  SQL http://jsgt.org/mt/archives/01/000392.html
//------------------------------------------------------------------------------
// 최신 정보    : http://jsgt.org/mt/archives/01/000409.html 
// 저작권 표시의무 없음. 상업 이용과 개조는 자유. 연락 필요 없음.
//
//

	////
	// 동작가능한 브라우저 판정
	//
	// @sample        if(chkAjaBrowser()){ location.href='nonajax.htm' }
	// @sample        oj = new chkAjaBrowser();if(oj.bw.safari){ /* Safari 코드 */ }
	// @return        라이브러리가 동작가능한 브라우저만 true  true|false
	//
	//  Enable list (v038현재)
	//   WinIE 5.5+ 
	//   Konqueror 3.3+
	//   AppleWebKit계(Safari,OmniWeb,Shiira) 124+ 
	//   Mozilla계(Firefox,Netscape,Galeon,Epiphany,K-Meleon,Sylera) 20011128+ 
	//   Opera 8+ 
	//
	
	function chkAjaBrowser()
	{
		var a,ua = navigator.userAgent;
		this.bw= { 
		  safari    : ((a=ua.split('AppleWebKit/')[1])?a.split('(')[0].split('.')[0]:0)>=124 ,
		  konqueror : ((a=ua.split('Konqueror/')[1])?a.split(';')[0]:0)>=3.3 ,
		  mozes     : ((a=ua.split('Gecko/')[1])?a.split(' ')[0]:0) >= 20011128 ,
		  opera     : (!!window.opera) && ((typeof XMLHttpRequest)=='function') ,
		  msie      : (!!window.ActiveXObject)?(!!createHttpRequest()):false 
		}
		return (this.bw.safari||this.bw.konqueror||this.bw.mozes||this.bw.opera||this.bw.msie)
	}

	////
	// XMLHttpRequest 오브젝트 생성
	//
	// @sample        oj = createHttpRequest()
	// @return        XMLHttpRequest 오브젝트(인스턴스)
	//
	function createHttpRequest()
	{
		if(window.XMLHttpRequest){
			 //Win Mac Linux m1,f1,o8 Mac s1 Linux k3 & Win e7용
			return new XMLHttpRequest() ;
		} else if(window.ActiveXObject){
			 //Win e4,e5,e6용
			try {
				return new ActiveXObject('Msxml2.XMLHTTP') ;
			} catch (e) {
				try {
					return new ActiveXObject('Microsoft.XMLHTTP') ;
				} catch (e2) {
					return null ;
	 			}
	 		}
		} else  {
			return null ;
		}
	}
	
	////
	// 송수신 함수
	//
	// @sample         sendRequest(onloaded,'&prog=1','POST','./about2.php',true,true)
	// @sample         sendRequest(onloaded,{name:taro,id:123,sel:1},','POST','./about3.php',true,true)
	// @sample         sendRequest({onload:loaded,onbeforsetheader:sethead},'',','POST','./about3.php',true,true)
	// @param {string} callback 수신시에 기동하는 함수명
	// @param {object} callback 수신시에 기동하는 함수명과 헤더 지정 함수명{onload:함수명,onbeforsetheader:함수명} 
	// @param {array}  callback 수신시에 기동하는 함수명과 헤더 지정  ary['onload']=함수명;ary['onbeforsetheader']=함수명 
	// @see                    http://jsgt.org/ajax/ref/head_test/header/Range/004/sample.htm
	// @param {string} data	   송신하는 데이터 string의 경우(&이름=값1&이름2=값2...)
	// @param {object} data	   송신하는 데이터 object의 경우{이름1:값1,이름2:값2,...}
	// @param {array}  data	   송신하는 데이터 array의 경우는 연상 배열 ary['이름1']=값1;ary['이름2']=값2
	// @param {string}method   "POST" 또는 "GET"
	// @param {string}url      요청하는 파일의 URL
	// @param {string}async	   비동기라면 true 동기라면 false
	// @param {string}sload	   수퍼 로드 true로 강제、생략또는 false는 기본
	// @param {string}user	   인증 페이지용 사용자 이름
	// @param {string}password 인증 페이지용 암호
	//
	sendRequest.README	 = {
		url		: 'http://jsgt.org/ajax/ref/lib/ref.htm',
		name	: 'sendRequest', 
		version	: 0.51, 
		license	: 'Public Domain',
		author	: 'Toshiro Takahashi http://jsgt.org/mt/01/',memo:''
	};
	function sendRequest(callback,data,method,url,async,sload,user,password)
	{
		//XMLHttpRequest 오브젝트 생성
		var oj = createHttpRequest();
		if( oj == null ) return null;
		
		//강제 로드의 설정
		var sload = (!!sendRequest.arguments[5])?sload:false;
		if(sload || method.toUpperCase() == 'GET')url += '?';
		if(sload)url=url+'t='+(new Date()).getTime();
		
		//브라우저 판정
		var bwoj = new chkAjaBrowser();
		var opera	  = bwoj.bw.opera;
		var safari	  = bwoj.bw.safari;
		var konqueror = bwoj.bw.konqueror;
		var mozes	  = bwoj.bw.mozes ;
				
		//callback 분해
		//{onload:xxxx,onbeforsetheader:xxx}
		if(typeof callback=='object'){
			var callback_onload = callback.onload;
			var callback_onbeforsetheader = callback.onbeforsetheader;
		} else {
			var callback_onload = callback;
			var callback_onbeforsetheader = null;
		}

		//송신 처리
		//opera는 onreadystatechange에 중복 응답이 있을 수 있어 onload가 안전
		//Moz,FireFox는 oj.readyState==3에서도 수신하므로 보통은 onload가 안전
		//Win ie에서는 onload가 동작하지 않는다
		//Konqueror은 onload가 불안정
		//참고 http://jsgt.org/ajax/ref/test/response/responsetext/try1.php
		if(opera || safari || mozes){
			oj.onload = function () { callback_onload(oj); }
		} else {
		
			oj.onreadystatechange =function () 
			{
				if ( oj.readyState == 4 ){
					//alert(oj.status+'--'+oj.getAllResponseHeaders());
					callback_onload(oj);
				}
			}
		}

		//URL 인코딩
		data = uriEncode(data,url);
		if(method.toUpperCase() == 'GET') {
			url += data
		}
		
		//open 메소드
		oj.open(method,url,async,user,password);

		
		//リクエストヘッダカスタマイズ用コールバック
		//使う場合は、呼び出しHTML側のwindow直下へグローバルな関数setHeadersを
		//記述し、その中でsetRequestHeader()をセットしてください
		//@sample function setHeaders(oj){oj.setRequestHeader('Content-Type',contentTypeUrlenc)}
		//
		if(!!callback_onbeforsetheader)callback_onbeforsetheader(oj);

		//헤더 application/x-www-form-urlencoded 설정
		setEncHeader(oj);
		
		
		//디버그
		//alert('////jslb_ajaxxx.js//// \n data:'+data+' \n method:'+method+' \n url:'+url+' \n async:'+async);
		
		//send 메소드
		oj.send(data);

		//URI 인코딩 헤더 설정
		function setEncHeader(oj){
	
			//헤더 application/x-www-form-urlencoded 설정
			// @see  http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#h-17.13.3
			// @see  #h-17.3
			//   ( enctype의 기본값은 "application/x-www-form-urlencoded")
			//   h-17.3에 의해、POST/GET 상관없이 설정
			//   POST에서 "multipart/form-data"을 설정할 필요가 있는 경우에는 커스터마이즈 해주세요.
			//
			//  이 메소드가 Win Opera8.0에서 에러가 나므로 분기(8.01은 OK)
			var contentTypeUrlenc = 'application/x-www-form-urlencoded; charset=UTF-8';
			if(!window.opera){
				oj.setRequestHeader('Content-Type',contentTypeUrlenc);
			} else {
				if((typeof oj.setRequestHeader) == 'function')
					oj.setRequestHeader('Content-Type',contentTypeUrlenc);
			}	
			return oj
		}

		//URL 인코딩
		//引数dataは、stringかobjectで渡せます
		function uriEncode(data,url){
			var encdata =(url.indexOf('?')==-1)?'?dmy':'';
			if(typeof data=='object'){
				for(var i in data)
					encdata+='&'+encodeURIComponent(i)+'='+encodeURIComponent(data[i]);
			} else if(typeof data=='string'){
				if(data=='')return '';
				//&와=로 일단 분해해서 encode
				var encdata = '';
				var datas = data.split('&');
				for(var i=1;i<datas.length;i++)
				{
					var dataq = datas[i].split('=');
					encdata += '&'+encodeURIComponent(dataq[0])+'='+encodeURIComponent(dataq[1]);
				}
			} 
			return encdata;
		}

		return oj
	}

예제)

<script language=JavaScript>
	var obj;
	var iDate;
	var Day;
	var iDay;
	var iTime;
	var now = new Date();
	

	// date.php를 통해서 서버시간을 가져온후 now에 세팅
	function junTime() { 
        req = createHttpRequest() 
        req.onreadystatechange = function() { 
            if( req.readyState == 4 ) {										// 4 = 응답완료
																			// 2006-09-28 18:19:47			
				obj	= req.responseText;										// 0123456789012345678
																			// return value 를 obj에 넣음.
				now.setFullYear( obj.substr(0,4) );							// 년도 설정
				now.setMonth( obj.substr(5,2) - 1 );						// 월 설정
				now.setDate( obj.substr(8,2) );								// 날짜 설정
				now.setHours( obj.substr(11,2) );							// 시간 설정
				now.setMinutes( obj.substr(14,2) );							// 분 설정
				now.setSeconds( obj.substr(17,2) );							// 초 설정				

				realTime();													// 서버시간을 세팅완료후 realTime() 호출
            } 
        } 
        req.open("GET","date.php?d="+Date.parse(new Date()));										// date.php를 get으로 호출 2006-07-11 16:06:51 3
        req.send("");														// 던지는값 없음
    }     
	
	// 1초마다 시간 갱신
	function realTime() {

		now.setTime( Date.parse(now)+1000 );								// 현재시간 + 1초
		iDate	= now.getFullYear() + '년'									// 날자값 정리
				+ twoDigit( (now.getMonth()+1).toString() ) + '월' 
				+ twoDigit( now.getDate().toString() ) + '일';
		iDayArray = new Array("(<span style='color:red;'>일요일</span>)","(월요일)","(화요일)","(수요일)","(목요일)","(금요일)","(<span style='color:red'>토요일</span>)");
		Day		= now.getDay();
		iDay	= iDayArray[Day]
		iTime	= twoDigit( now.getHours().toString() ) + '시'				// 시간값 정리
				+ twoDigit( now.getMinutes().toString() ) + '분' 
				+ twoDigit( now.getSeconds().toString() ) + '초';
		Clock.innerHTML = iDate + ' ' + iDay + ' ' + iTime;
		window.setTimeout( realTime, 1000);									// 1초마다 realTime() 호출
	}
	
	// 1자리로 되어 있다면 2자리로 변환
	function twoDigit(oj) {
		if(oj.length == 1) return '0'+oj;
		else return oj;
	}

    window.onload = junTime; 
</script>