전체 파일 구성은 아래와 같습니다.
- ./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");
}
{
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 ...";
}
{
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.";
}
}
}
{
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()
함수를 사용했습니다.
테스트 페이지
전체 소스 다운은 아래를 클릭 하세요.
list.rar
