AJAX Sample( AJAX Class )
07 22, 2007 10:49
XMLHttpRequest Class
서버와의 통신을 수행하는 XMLHttpRequest 객체를 생성하기 위해서는 ajax.js 파일을 포함하고 사용한다. 사용법은 다음과 같다.
<script language="javascript" type="text/javascript" src=“ajax.js"></script>
- ajax.js
| var AJAX = { |
| XmlHttp: null, |
| create: function () |
| { |
| if ( window.XMLHttpRequest )// branch for native XMLHttpRequest object |
| { |
| try |
| { |
| AJAX.XmlHttp = new XMLHttpRequest(); |
| // 일부의 모질라 버전을은 readyState property, onreadystate event |
| // 를 지원하지 않으므로. - from xmlextrs |
| if ( this.XmlHttp.readyState == null ) |
| { |
| this.XmlHttp.readyState = 1; |
| this.XmlHttp.addEventListener("load", function () { |
| this.XmlHttp.readyState = 4; |
| if ( typeof this.XmlHttp.onreadystatechange == "function" ) |
| tmpXmlHtp.onreadystatechange(); |
| }, false); |
| } |
| } |
| catch(e) |
| { |
| AJAX.XmlHttp = false; |
| alert("Your browser does not support XmlHttp objects"); |
| } |
| } |
| else if ( window.ActiveXObject )// branch for IE/Windows ActiveX version |
| { |
| try |
| { |
| AJAX.XmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); |
| } |
| catch(e) |
| { |
| try |
| { |
| AJAX.XmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); |
| } |
| catch(e) |
| { |
| AJAX.XmlHttp = false; |
| alert("Your browser does not support XmlHttp objects"); |
| } |
| } |
| } |
| } |
| } |
| AJAX.openXML = function ( method, url, async, uname, pswd ) |
| { |
| if ( AJAX.XmlHttp != null ) |
| { |
| if ( uname == undefined ) |
| { |
| AJAX.XmlHttp.open( method, url, async ); |
| } |
| else |
| { |
| AJAX.XmlHttp.open( method, url, async, uname, pswd ); |
| } |
| AJAX.XmlHttp.onreadystatechange = function () |
| { |
| if ( AJAX.XmlHttp.readyState == 4 ) |
| { |
| if ( AJAX.XmlHttp.status == 200 ) |
| { // 200 은 HTTP에서 성공 i.e) 404 : not found |
| AJAX.statusSuccessHandler( AJAX.XmlHttp.responseXML.xml ); |
| } |
| else |
| { |
| AJAX.statusErrorHandler(); |
| alert('Error while loading!'); |
| } |
| } |
| } |
| } |
| else |
| { |
| alert("need to create xmlhttp object"); |
| } |
| } |
| AJAX.openText = function ( method, url, async, uname, pswd ) |
| { |
| if ( AJAX.XmlHttp != null ) |
| { |
| if ( uname == undefined ) |
| { |
| AJAX.XmlHttp.open( method, url, async ); |
| } |
| else |
| { |
| AJAX.XmlHttp.open( method, url, async, uname, pswd ); |
| } |
| AJAX.XmlHttp.onreadystatechange = function () |
| { |
| if ( AJAX.XmlHttp.readyState == 4 ) |
| { |
| if ( AJAX.XmlHttp.status == 200 ) |
| { // 200 은 HTTP에서 성공 i.e) 404 : not found |
| AJAX.statusSuccessHandler( AJAX.XmlHttp.responseText ); |
| } |
| else |
| { |
| AJAX.statusErrorHandler(); |
| alert('Error while loading!'); |
| } |
| } |
| } |
| } |
| else |
| { |
| alert("need to create xmlhttp object"); |
| } |
| } |
| AJAX.send = function ( content ) |
| { |
| if ( content == undefined ) |
| AJAX.XmlHttp.send( null ); |
| else |
| AJAX.XmlHttp.send( content ); |
| } |
| AJAX.setOnReadyStateChange = function ( funcname ) |
| { |
| if ( AJAX.XmlHttp ) |
| { |
| AJAX.XmlHttp.onreadystatechange = funcname; |
| } |
| else |
| { |
| alert ("need to create xmlhttp object"); |
| } |
| } |
| // status 200 일 때 처리 함수 |
| AJAX.statusSuccessHandler = function ( data ) |
| { |
| //alert(data); |
| } |
| // status 200 일 때 기본 처리 함수 |
| // setStatusSuccessHandler() 로 대체 가능 |
| AJAX.statusErrorHandler = function ( status ) |
| { |
| AJAX.rtnText = AJAX.XmlHttp.responseText; |
| } |
| AJAX.setStatusSuccessHandler = function ( funcname ) |
| { |
| AJAX.statusSuccessHandler = funcname; |
| } |
| AJAX.setStatusErrorHandler = function ( funcname ) |
| { |
| AJAX.statusErrorHandler = funcname; |
| } |
| AJAX.setRequestHeader = function ( label, value ) |
| { |
| AJAX.XmlHttp.setRequestHeader( label, value ); |
| } |
| AJAX.formData2QueryString = function ( docForm ) |
| { |
| var submitContent = ''; |
| var formElem; |
| var lastElemName = ''; |
| for( i = 0; i < docForm.elements.length; i++ ) |
| { |
| formElem = docForm.elements[i]; |
| switch( formElem.type ) |
| { |
| // Text fields, hidden form elements |
| case 'text': |
| case 'hidden': |
| case 'password': |
| case 'textarea': |
| case 'select-one': |
| submitContent += formElem.name + '=' + escape(formElem.value) + '&' |
| break; |
| // Radio buttons |
| case 'radio': |
| if ( formElem.checked ) |
| { |
| submitContent += formElem.name + '=' + escape(formElem.value) + '&' |
| } |
| break; |
| // Checkboxes |
| case 'checkbox': |
| if ( formElem.checked ) |
| { |
| // Continuing multiple, same-name checkboxes |
| if ( formElem.name == lastElemName ) |
| { |
| // Strip of end ampersand if there is one |
| if ( submitContent.lastIndexOf('&') == submitContent.length - 1 ) |
| { |
| submitContent = submitContent.substr(0, submitContent.length - 1); |
| } |
| // Append value as comma-delimited string |
| submitContent += ',' + escape(formElem.value); |
| } |
| else |
| { |
| submitContent += formElem.name + '=' + escape(formElem.value); |
| } |
| submitContent += '&'; |
| lastElemName = formElem.name; |
| } |
| break; |
| } |
| } |
| // Remove trailing separator |
| submitContent = submitContent.substr(0, submitContent.length - 1); |
| return submitContent; |
| } |
| // 사용법 |
| // AJAX.create(); |
| // AJAX.openText('GET','jsontest.php', true); |
| // AJAX.setStatusSuccessHandler(proc); |
| // AJAX.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;'); |
| // AJAX.send("test=테스트"); |
| // |
| // function proc(abc) |
| // { |
| //document.getElementById('test').innerHTML = abc; |
| // } |