간단한 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()

함수를 사용했습니다.


테스트 페이지

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

invalid-file