Ajax
지각생 연습장
목차 |
Ajax 개요
- DIV + CSS 로 페이지를 코딩한다
- 브라우저에 따라 맞게 XMLHttpRequest 를 만든다
- 데이터를 처리할 클라이언트측, 서버측 함수/코드를 각각 만든다.
- XML로 데이터를 encode, decode 해서 주고 받는다.
- 결과 값은 HTML로 변환해서 DIV의 내용을 변경한다( .innerHtml 사용)
참고
- http://www.bindows.net/ The leading object-oriented platform for developing AJAX applications
- http://ajaxpatterns.org/Whats_Ajax
- http://ko.wikipedia.org/wiki/AJAX
프레임워크
Sajax
- php 로 코딩한 함수를 export 할 수 있는 프레임워크.
- 다운로드 : http://www.modernmethod.com/sajax/download.phtml
- 사용법
- 라이브러리 인크루드
- requrire("Sajax.php");
- 함수 정의하고 내보내기(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
- 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 등을 사용할 수 있는 웹 메신저입니다.
- http://projects.backbase.com/RUI/shop.html Ajax로 구현된 재미있는 해외 쇼핑몰 샘플입니다.
- http://www.netvibes.com/
기술문서
- "AJAX에서 즐겨찾기와 뒤로가기를 다루는 방법" http://network.hanbitbook.co.kr/view.php?bi_id=1162
- 애플의 XMLHttpRequest 객체 설명 문서 http://developer.apple.com/internet/webcontent/xmlhttpreq.html
- http://www-128.ibm.com/developerworks/kr/library/j-ajax1/index.html IBM developerWorks 자바 개발자를 위한 Ajax: 동적 자바 애플리케이션 구현
- 한글문서입니다. JAVA로 작성된 Ajax샘플코드도 있습니다.
- drag & drop
예제
- XMLHttpRequest 예제
- 달력 http://h2dj.key.or.kr/ajax/cal/cal.php
- 게시판 http://h2dj.key.or.kr/ajax/board/board.php
- Post 되는 data 얻기 : Drupal 모듈 만들때처럼 다른 라이브러리를 활용할때 검증용으로 필요했다.
파일업로드
- 업로드 프로그래스바 구현하기
- http://blog.joshuaeichorn.com/archives/2006/03/14/php-ajax-file-upload-progress-meter-updates/
- http://blog.joshuaeichorn.com/archives/2005/05/01/ajax-file-upload-progress/