=====================================================================
구현부 (ajax_kckim.js)
=====================================================================
<!--
/*------------------------------------------------------------------------------
사용자가 사용중인 브라우저가 AJax를 지원하는 브라우저인가 체크.
@사용 예 if(!checkAjaxBrowser()) { location.href = "nonajax.html"}
@사용 예 obj = new checkAjaxBrowser(); if(obj.agent.msie) { // IE Code
@반환값 true / false
------------------------------------------------------------------------------*/
function checkAjaxBrowser() {
var a,ua = navigator.userAgent;
this.agent= {
safari : ((a=ua.split('AppleWebKit/')[1])?(a.split('(')[0]).split('.')[0]:0)>=412 ,
konqueror : ((a=ua.split('Konqueror/')[1])?a.split(';')[0]:0)>=3.4 ,
mozes : ((a=ua.split('Gecko/')[1])?a.split(" ")[0]:0) >= 20011128 ,
opera : (!!window.opera) && (document.body.style.opacity=="") ,
msie : (!!window.ActiveXObject)?(!!(new ActiveXObject("Microsoft.XMLHTTP"))):false
}
return (this.agent.safari || this.agent.konqueror || this.agent.mozes || this.agent.opera || this.agent.msie)
}
/*------------------------------------------------------------------------------
사용자가 사용중인 브라우저에 알맞은 XML Object 생성.
@사용 예 xmlhttp = createHttpRequest()
@반환 값 null / XML object
------------------------------------------------------------------------------*/
function createHttpRequest() {
if(window.XMLHttpRequest) { // IE7.0과 기타 브라우저(mozila, firefox, opera,..)
try {
return new XMLHttpRequest();
} catch(e) {
return null;
}
} else if(window.ActiveXObject) { // IE4.0, IE 5.0, IE6.0
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return null;
}
}
}
}
-->
=====================================================================
사용 예=====================================================================
1. 초기화
xmlhttp = createHttpRequest();
2. 동적으로 페이지 불러오기
[SAMPLE1.HTML]
<script language="javascript" src="ajax_kckim.js"></script>
<script language="javascript">
{초기화루틴}
...
function getData(serverURL, objID) {
var xmlhttp = createHttpRequest();
var obj = document.getElementById(objID);
if(xmlhttp) {
xmlhttp.open("GET", serverURL);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
} else {
obj.innerHTML = "test.html 파일 Load Failed";
}
}
</script>
<body>
<form>
<input type=button value="서버결과 받아서 다시 쓰기" onClick="getData('test.html', 'maintext'); return false;">
</form>
<div id="maintext"><p>버튼을 누르면 test.html의 내용으로 변경됩니다.</p></div>
</body>
</html>
[TEST.HTML] - UTF8 형태로 저장되어야 함.
TEST.HTML의 파일내용입니다.
- 동작전
http://dolba.net/tt
http://dolba.net/tt
=====================================================================
도움말 / 참고자료
=====================================================================
- XMLHttpRequest의 중요 Methods
1) open(method, url, async, (username), (password))
method : "GET" or "POST"
url : 요청하고자 하는 곳의 URL서버주소(절대경로로 줄 수 없다. 자신의 호스트에서만 사용가능)
async : true(비동기), false(동기). 생략가능하며 디폴트는 비동기임.
username, password (인증이 필요할때 사용)
2) send(content)
content: HTTP request body. method가 POST일때 파라미터값 입력, GET일때는 주로 NULL 사용
xmlhttp.send(null) 또는 xmlhttp.send("")의 형태로 사용이 가능함.
- XMLHttpRequest의 상태
1) UNINITIALIZED(0) : XMLHttpRequest객체가 생성이 되었지만 아직 open()을 호출하지 않은 상태
2) LOADING(1) : open()을 호출한 후 send()를 호출하기 전 상태.
3) LOADED(2) : send()를 호출하여 웹서버에 요청을 보내고 아직 응답을 받지 않은 상태.
4) INTERACTIVE(3) : HTTP 요청을 보내고 응답을 받기 전까지 결과를 다운로딩하고 있는 상태.
5) COMPLETE(4) : 웹서버로부터의 응답이 완료된 상태.
- XMLHttpRequest의 Property
1) onreadystatechange : XMLHttpRequest 객체의 상태가 변할 때 실행할 핸드러를 지정한다.
2) readyState : XMLHttpRequest 객체의 상태가 변할 때 각 상태값을 반환한다.
0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete
3) responseText : HTTP 요청 결과를 문자열 형태로 변환한다.
4) responseXML : HTTP 요청 결과를 XMLDocument 오브젝트로 변환한다.
5) status : HTTP 응답 코드를 반환한다. 성공인 경우 200
6) statusText : HTTP 응답 문자열을 반환한다. 성공인 경우 OK
- XMLHttpRequest의 동기적 이용 예
xmlhttp.open("GET", "test.html", false);
xmlhttp.send(null);
if(xmlhttp.status == 200) {
alert(xmphttp.response.text);
}
- XMLHttpRequest의 비동기적 이용 예제
xmlhttp.open("GET", "test.html", true);
xmlhttp.onreadystatechange = function() {
if(xmphttp.readyState == 4) {
alert(xmphttp.status == 200) {
alert(xmphttp.responseText();
}
}
}
