Ajax

지각생 연습장

목차

Ajax 개요

  1. DIV + CSS 로 페이지를 코딩한다
  2. 브라우저에 따라 맞게 XMLHttpRequest 를 만든다
  3. 데이터를 처리할 클라이언트측, 서버측 함수/코드를 각각 만든다.
  4. XML로 데이터를 encode, decode 해서 주고 받는다.
  5. 결과 값은 HTML로 변환해서 DIV의 내용을 변경한다( .innerHtml 사용)

참고

프레임워크

Sajax

  • php 로 코딩한 함수를 export 할 수 있는 프레임워크.
  • 다운로드 : http://www.modernmethod.com/sajax/download.phtml
  • 사용법
    1. 라이브러리 인크루드
      requrire("Sajax.php");
    2. 함수 정의하고 내보내기(export)
      function multiply($x, $y) { return $x * $y; }
      sajax_init();
      sajax_export("multiply"); / list of functions to export
      sajax_handle_client_request(); // server client instances
    3. HTML 에 반영
      <script>
      <? sajax_show_javascript(); ?>
      function set_math_result(result) {
      document.getElementById("z").value = result;
      }
      function do_the_math() {
      var x, y;
      x = document.getElementById("x").value;
      y = document.getElementById("y").value;
      x_multiply(x,y,set_math_result);
      }
      </script>

XMLHttpRequest

속성 Property

  • onreadystatechange
    이 속성에 정의되는 콜백함수는 readyState가 변경될 때마다 호출됨
  • readyState : 숫자
    0: uninitialized(open() 메소 드가 호출되지 않은 상태)
    1: loading(send() 메소드가 호출되지 않은 상태)
    2: loaded(send() 메소드 호출된 상태. header와 status 사용가능)
    3: interactive(responseText 에 부분적인 데이터가 저장됨)
    4: completed
  • responseText : 문자열
    반환된 일반 텍스트 문자열
  • responseXML : DOM 객체
    반환된 XML
  • status : 응답 상태 코드
    200(Okay), 404(Not Found)등
  • statusText: 문자열
    HTTP 응답 상태를 나타내는 문자열

메소드 Method

  • abort() : 반환값 void
    HTTP요청을 취소
  • getAllResponseHeaders() : 문자열 반환
    모든 헤더 정보를 반환함
  • getResponseHeader(string header) : 문자열 반환
    특정 헤더값을 반환
  • open(string method, string url, boolean asynch) : 반환값 void
    HTTP요청과 동기/비동기 통신에 따른 필요사항을 준비합니다.
  • send(string) : 반환값 void
    HTTP요청을 합니다
  • setRequestHeader(string header, string value) : 반환 값 void
    요청 헤더를 설정. 반드시 open() 메소드를 호출한 다음 사용

결과값 처리

if(request.readyState == 4) { // loaded
  if(request.status == 200) { // OK
  ...
  }
}

자료

ajax 프로그램 (예)

voo2do(http://voo2do.com/) - 개인 관리 툴!
writely(http://www.writely.com/) - Web 워드프로세서
http://www.meebo.com/ AJAX로 만든 AIM, ICQ, MSN, Jabber, Google Talk, Yahoo 등을 사용할 수 있는 웹 메신저입니다.

기술문서

한글문서입니다. JAVA로 작성된 Ajax샘플코드도 있습니다.

예제

출처 - http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=ajax&wr_id=46&page=1
  • Post 되는 data 얻기 : Drupal 모듈 만들때처럼 다른 라이브러리를 활용할때 검증용으로 필요했다.

파일업로드

메모

개인 도구