DB를 이용한 데이타 출력 확장 - 로딩 메시지 보이기
이제! 지금까지 배운것을 확장해보자! 처리할 양이 많아서 페이지가 느려진다고 보자. 예를 들자면..검색을 했을 경우이다. 검색을 했을경우 좀 큰 사이트의 경우 검색결과 페이지가 늦게 뜬다. 참고로 내가 맡고 있는 사이트의 경우 테이블의 조인에..뷰의 조인에.. 등등 해서 어떤 데이타를 가져올때는 1분이 넘는 경우도 있다 -_-;;; 이럴경우 그 보려는 페이지는 흰색으로 보이면서(마치 다운된것처럼) 로딩을 계속 하고 있는것이다. 이것을 TDC를 이용하면 좀 더 보기 좋게 만들수 있다. 다음을 보자
list_asp_ex2.asp
<%
' 변수 선언및 초기화
Dim DBCon
Dim strConn
Dim strQry
Dim szHead
Dim szBody
szHead = ""
szBody = ""
strConn = ""
' DB 연결 문자 변수
strConn = strConn&"Provider=SQLOLEDB.1;Persist Security Info=True;"
strConn = strConn&"Data Source=localhost;" ' Server Name
strConn = strConn&"User ID=sa;" ' User ID
strConn = strConn&"Password=;" ' User Password
strConn = strConn&"Initial Catalog=NorthWind;" ' DataBase
' DB 객체 생성및 DB 오픈
Set DBCon = Server.CreateObject("ADODB.Connection")
DBCon.Open strConn
' 쿼리문 실행결과를 레코드셋으로 반환
strQry = "select CustomerID,CompanyName,ContactName from Customers"
Set rs = DBCon.Execute(strQry)
Do While not rs.eof
db_CustomerID = rs(0)
db_CompanyName = rs(1)
db_ContactName = rs(2)
' TDC 형식으로 데이타를 가공한다.
szBody = szBody&"|"& db_CustomerID &"|¶"
szBody = szBody&"|"& db_CompanyName &"|¶"
szBody = szBody&"|"& db_ContactName &"|^"
rs.MoveNext()
Loop
' TDC 형식으로 헤더를 만든다.
szHead = "CustomerID¶CompanyName¶ContactName^"
' 데이타가 나오는 속도를 늦추기 위해서 쓰레기 루프를 돌린다. -_-
for i = 0 to 10000000 : next
Response.Write szHead
Response.Write szBody
%>
list_asp_ex2.htm
<OBJECT id=List CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="UseHeader" VALUE="true">
<PARAM NAME="DataURL" VALUE="list_asp_ex2.asp">
<PARAM NAME="TextQualifier" VALUE="|">
<param NAME="FieldDelim" VALUE="¶">
<PARAM NAME="RowDelim" VALUE="^">
<PARAM NAME="CharSet" VALUE="euc-kr">
</OBJECT>
<SCRIPT for="List" event="ondatasetcomplete">
loading.style.display = "none";
</SCRIPT>
<table border="1" DataSrc="#List">
<thead>
<tr>
<th>CustomerID</th>
<th>CompanyName</th>
<th>ContactName</th>
</tr>
<tr id="loading">
<td colspan="3" align="center">데이타를 읽는 중입니다. 잠시만 기다려 주세요...</td>
</tr>
</head>
<tbody>
<tr>
<td><span datafld="CustomerID" DATAFORMATAS="HTML"></span></td>
<td><span datafld="CompanyName" DATAFORMATAS="HTML"></span></td>
<td><span datafld="ContactName" DATAFORMATAS="HTML"></span></td>
</tr>
</tbody>
</table>
처음엔 위와같이 메시지가 나오다가 시간이 조금 지나면 다음과 같이 나온다
list_asp_ex2.asp 페이지를 보면 이전에 보았던 list_asp.asp 페이지에서 한줄 코드만 추가하였다.
for i = 0 to 10000000 : next
이 코드를 추가해서 일부로 데이타가 늦게 뿌려지도록 하였다. (심심하다고 10000000 에서 공하나 뒤에 더 붙이지 말아라 장난아니게 늦게 나온다. -_-;) 이번엔 list_asp_ex2.htm 페이지를 보자. 2곳에 코드가 추가되었다.
<tr id="loading">
<td colspan="3" align="center">데이타를 읽는 중입니다. 잠시만 기다려 주세요...</td>
</tr>
테이블을 살펴보면 위와같은 코드를 추가했다. tr 태그를 하나 추가하여 거기에 id 값을 할당하였다. 중요한 것은 이 태그는 <thead></thead> 이나 <tfoot></tfoot> 안에 위치해야한다.<tbody></tbody> 안에 위치하면 그 tr 태그안에 있는 메시지까지 루프돌면서 보인다. -_-
<SCRIPT for="List" event="ondatasetcomplete">
loading.style.display = "none";
</SCRIPT>
자바스크립트를 이용해서 List 객체가 데이타를 모두가져왔을시 실행되는 코드이다. 데이타를 모두 가져오는 이벤트가 발생하였을때 id값이 loading을 가진 객체는 숨겨지도록 하였다. 즉 데이타가 모두 가져올 시점은 list_asp_ex2.asp 파일이 실행이 다 되었을 경우인데 그 동안은 "데이타를 읽는 중입니다. 잠시만 기다려 주세요..." 메시지가 보이고 데이타를 모두 가져오면 이 메시지를 보이는 태그는 안보이도록 숨기는것이다. (SCRIPT 태그의 for, event 속성을 유의해서 살펴보자)
여기서는 event의 속성에 ondatasetcomplete란 값이 할당되어 있는데 이 이벤트 이외에도 여러가지 있는데 이러한 부분들은 각자 검색해봐라..음..사실은 그 event 들 여기다가 적으려고 했는데 꽤 많다. -_- 그래서 귀찮아서 안적으려고 한다. -_- 정 궁금하면 empas 같은데 가서 ondatasetcomplete 이런식으로 검색해보면 나온다. -_-
