마음의 안정을 찾기 위하여 - [My Library] AJax Library
2266126
463
804
관리자새글쓰기
태그위치로그방명록
별일없다의 생각
dawnsea's me2day/2010
색상(RGB)코드 추출기(Color...
Connection Generator/2010
최승호PD, '4대강 거짓말 검...
Green Monkey**/2010
Syng의 생각
syng's me2DAY/2010
천재 작곡가 윤일상이 기획,...
엘븐킹's Digital Factory/2010
[My Library] AJax Library
My Library | 2007/06/22 11:06

=====================================================================
구현부 (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();
    }
  }
}
2007/06/22 11:06 2007/06/22 11:06
Article tag list Go to top
View Comment 0
Trackback URL :: 이 글에는 트랙백을 보낼 수 없습니다
From. JamesQ 블로그 2007/06/26 15:49삭제
AJax Library
<P><STRONG>=====================================================================<BR>구현부 (ajax_kckim.js)<BR>=====================================================================<BR></STRONG>&lt;!--<BR><FONT color=#008000>&nbsp; /*------------------..
 
 
 
 
: [1] ... [15][16][17][18][19][20][21][22][23] ... [32] :
«   2024/03   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
전체 (1317)
출판 준비 (0)
My-Pro... (41)
사는 ... (933)
블로그... (22)
My Lib... (32)
게임 ... (23)
개발관... (3)
Smart ... (1)
Delphi (93)
C Builder (0)
Object... (0)
VC, MF... (10)
Window... (1)
Open API (3)
Visual... (0)
Java, JSP (2)
ASP.NET (0)
PHP (5)
Database (12)
리눅스 (29)
Windows (25)
Device... (1)
Embedded (1)
게임 ... (0)
Web Se... (2)
Web, S... (21)
잡다한... (6)
프로젝트 (0)
Personal (0)
대통령... (13)
Link (2)