[ajax] 크로스 브라우저 Ajax용 라이브러리
로빈아빠
본문
크로스 브라우저 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
//==============================================================================
// 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> 관련링크
댓글목록
등록된 댓글이 없습니다.