'Ajax'에 해당되는 글 3건

  1. prototype을 이용한 Ajax 멀티 request
  2. 간단한 Ajax Sample 코드 (2)
  3. 웹 개발에 참고할 만한 곳 (1)

prototype을 이용한 Ajax 멀티 request

prototype을 이용해 비동기 방식의 요청을 여러건 해서 순서 상관없이 응답을 받아 처리하는 부분을 구현해 봤다. 

원래 목적은 fund 정보를 웹에서 관리하기 위해 만들려 한것인데...
미완성 프로젝트다..
엑셀에선 간단하던 수식들을 웹으로 옮기려니 만만치 않더라 ㅡㅡ;

소스에는 포함된 내용들은 아래와 같다.
   - Prototype Javascript Lib 사용
   - Javascript Calendar Javascript Lib 사용(한국어 처리 부분 소스 약간 수정)
   - 멀티 Ajax 요청 처리
   - 요청 처리중일때 모래 시계 보여주기
   - Msg 출력을 동적으로
   - select Object에 요청 받은 내용 동적으로 append


common.js 보기



list.html 보기

url
http://www.panghosting.net/~newtype/fund/list.html

간단한 Ajax Sample 코드

먼저 파일 구조를 설명하면..
전체 파일 구성은 아래와 같습니다.

    - ./index.php : XMLHttpRequest를 이용 정보를 요청
    - ./list.php : ./sheet/ 서브 디렉토리에서 skin파일과 db파일을 읽어서 보여줌
    - ./sheet/*.html : skin 파일
    - ./sheet/*.txt: csv형식의 db파일

중요 부분을 설명하겠습니다.

먼저 index.php파일을 보면..

    if (window.XMLHttpRequest)
    {
        HTTPRequestObject = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        HTTPRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }

여기서 Internet Explorer냐 FireFox냐를 구분해 HTTPRequestObject 인스턴스를 생성합니다.

    function doSubmit(sheet)
    {
        var url = "http://" + location.host + "/list/list.php?sheet=" + encodeURIComponent(sheet);
       
        HTTPRequestObject.open("GET", url, true);
        HTTPRequestObject.onreadystatechange = HTTPRequest;
        HTTPRequestObject.send(null);
        document.getElementById("result").innerHTML = "Requesting data ...";
    }   

submit 이벤트 발생시 HTTPRequestObject를 이용해 서버에 요청 합니다.
GET 방식이기 때문에 일부 브라우저 설정에 따라 인코딩 형식이 바뀌기 때문에
encodeURIComponent() 함수를 사용해 UTF-8형식으로 강제 변환 했습니다.

그리고, 응답이 들어오면 수행할 콜백 함수를 HTTPRequest로 지정했습니다.

    function HTTPRequest()
    {
        if (HTTPRequestObject.readyState==4)
        {
            if (HTTPRequestObject.responseText.indexOf('invalid') == -1)
            {    
                document.getElementById("result").innerHTML = HTTPRequestObject.responseText;
            }
            else
            {
                document.getElementById("result").innerHTML = "Error requesting data.";
            }
        }
    }

응답이 들어오면 HTTPRequest() 함수에서 내용을 뿌려 줍니다.

list.php는 별 내용이 없습니다.
인코딩 형식을 변환 하기 위해

       mb_convert_encoding()

함수를 사용했습니다.


테스트 페이지

전체 소스 다운은 아래를 클릭 하세요.


웹 개발에 참고할 만한 곳


웹서핑 하다가 우연히 찾은 곳
Ajax 등이 사용하기 간편하게 클래스로 구현되어 있다.
그 외에도 한 번 둘러보면 괜찮을 듯한 자료들이 있는 듯.

NHN UI Develope Guide

http://html.nhndesign.com/