ASP Request 개체를 사용하여 HTML 폼으로 모은 데이터를 수집하고 처리하기 위한 간단하면서도 강력한 스크립트를 작성할 수 있습니다. 이 항목에서는 스크립트를 처리하는 기본 폼 작성 방법뿐 아니라 웹 서버와 사용자의 브라우저에서 폼 정보를 확인하는 유용한 기술을 배웁니다.
웹 기반의 정보를 수집하는 데 가장 많이 사용하는 방법인 HTML 폼은 사용자 인터페이스 요소들을 웹 페이지에서 사용할 수 있게 하는 특수 HTML 태그들입니다. 입력란, 단추, 확인란 등은 사용자들이 웹 페이지와 상호 작용하고 정보를 웹 서버로 보낼 수 있게 하는 컨트롤들의 예입니다.
예를 들어, 다음 HTML 예제는 사용자가 이름과 나이를 입력하고 웹 서버에 정보를 보내기 위한 단추가 들어 있는 폼을 만듭니다. 폼에는 또한 웹 브라우저에 의해 표시되지 않는 숨겨진 태그가 들어 있습니다. 이것을 사용하여 추가 정보를 웹 서버에 보낼 수 있습니다.
<FORM METHOD="Get" ACTION="Profile.asp"> <INPUT TYPE="Text" NAME="FirstName"> <INPUT TYPE="Text" NAME="LastName"> <INPUT TYPE="Text" NAME="Age"> <INPUT TYPE="Hidden" NAME="UserStatus" VALUE="New"> <INPUT TYPE="Submit" VALUE="Enter"> </FORM>
이 항목에서는 모든 HTML 폼 태그에 대한 모든 설명을 자세히 하지 않겠지만 유용한 HTML 폼을 만드는 방법에 대해서는 여러 가지 정보를 제공합니다. 예를 들어, 웹 브라우저의 원본 보기 기능을 사용하여 다른 웹 사이트의 HTML 폼이 어떻게 만들어졌는지 확인할 수 있습니다. 또한 그 밖의 인터넷 기술을 사용하여 HTML 폼을 사용하는 새로운 혁신적인 방법을 배우려면 MSDN Online을 방문하십시오.
HTML 폼을 작성한 다음에는 입력한 내용을 처리해야 합니다. 즉, 정보를 해석하고 조작할 수 있도록 .asp 파일로 보내야 합니다. 이전 예제의 HTML 코드를 다시 한 번 확인하십시오. <FORM> 태그의 ACTION 속성은 Profile.asp 파일을 참조합니다. 사용자가 HTML 정보를 보내면 브라우저에서 POST 메서드를 사용하여 정보를 서버의 .asp 파일(이 경우 Profile.asp)로 보냅니다. .asp 파일에는 정보를 처리하고 다른 스크립트, COM 구성 요소, 리소스(예: 데이터베이스)와 상호 작용할 수 있는 스크립트가 들어 있을 수 있습니다.
ASP를 사용하면 세 가지 방법으로 HTML 폼의 정보를 수집할 수 있습니다.
처음 두 방법은 ASP를 사용하여 폼 정보를 수집하고 처리하는 작업이 매우 간단하다는 것을 제외하고, 다른 웹 서버 프로그램과 상호 작용하는 폼과 동일한 방법으로 작동합니다. 세 번째 방법은 특히 유용하며 폼 입력 검증 절에서 설명합니다.
ASP Request 개체는 URL 요청과 함께 전달된 폼 정보를 검색할 수 있는 두 개의 컬렉션을 제공합니다.
QueryString 컬렉션은 요청 URL에 물음표와 함께 쓰여진 텍스트로 웹 서버에 전달된 양식 값을 검색합니다. 폼 값들은 HTTP GET 메서드를 사용하거나 URL에 폼 값을 수동으로 추가하여 요청 URL에 첨부할 수 있습니다.
예들 들어, 앞의 폼 예제가 GET 메서드(ACTION = "GET")를 사용하고 사용자가 Clair, Hector, 30을 입력하면 다음 URL 요청이 서버로 전달됩니다.
http://Reskit/Workshop1/Painting/Profile.asp?FirstName=Clair&LastName=Hector&Age=30&UserStatus=New
Profile.asp에는 다음의 폼 처리 스크립트가 포함될 수 있습니다.
Hello <%= Request.QueryString("FirstName") %> <%= Request.QueryString("LastName") %>.
You are <%= Request.QueryString("Age") %> years old!
<%
If Request.QueryString("UserStatus") = "New" Then
Response.Write "This is your first visit to this Web site!"
End if
%>
이 경우, 웹 서버는 다음 텍스트를 사용자의 웹 브라우저로 반환합니다.
Hello Clair Hector. You are 30 years old! This is your first visit to this Web site!
QueryString 컬렉션에는 URL 요청(GET 메서드 사용)에 나타나는 여러 값들 중에서 하나를 액세스하는 데 사용할 수 있는 선택적 매개 변수가 들어 있습니다. Count 속성을 사용하여 특정 형식의 값이 나타나는 개수를 셀 수도 있습니다.
예를 들어, 여러 항목이 들어 있는 목록 상자가 포함된 양식은 다음과 같은 요청을 할 수 있습니다.
http://Reskit/OrganicFoods/list.asp?Food=Apples&Food=Olives&Food=Bread
다음 명령을 사용하여 여러 값을 셀 수 있습니다.
Request.QueryString("Food").Count
여러 값 유형을 표시하려면 List.asp에 다음 스크립트를 포함합니다.
<%
lngTotal = Request.QueryString("Food").Count
For i = 1 To lngTotal
Response.Write Request.QueryString("Food")(i) & "<BR>"
Next
%> 위의 스크립트의 결과는 다음과 같습니다.
Apples Olives Bread
다음을 사용하여 전체 값 목록을 쉼표로 구분한 문자열로 표시할 수도 있습니다.
<% Response.Write Request.QueryString("Item") %>
다음 문자열이 나타납니다.
Apples, Olives, Bread
HTTP GET 메서드를 사용하여 길고 복잡한 양식 값을 웹 서버에 전달할 때 정보를 잃어 버릴 수도 있습니다. 일부 웹 서버는 URL 쿼리 문자열 크기를 제한하므로 GET 메서드로 전달되는 양식 값이 너무 길면 일부를 자릅니다. 양식에서 웹 서버로 대량의 정보를 보낼 때는 HTTP POST 메서드를 사용합니다. HTTP 요청 본문 속에 양식 데이터를 넣어 발송하는 POST 메서드는 사실상 거의 제한 없는 개수의 문자를 서버로 보낼 수 있습니다. ASP Request 개체의 Form 컬렉션을 사용하여 POST 메서드로 보낸 값을 찾을 수 있습니다.
Form 컬렉션은 QueryString 컬렉션과 비슷한 방법으로 값을 저장합니다. 예를 들어, 사용자가 긴 이름 목록을 입력하여 양식을 작성하면 다음과 같은 스크립트를 사용하여 음식 이름을 검색할 수 있습니다.
<%
lngTotal = Request.Form("Food").Count
For i = 1 To lngTotal
Response.Write Request.Form("Food")(i) & "<BR>"
Next
%>
잘 작성된 웹 양식에는 정보를 서버로 보내기 전에 사용자 입력을 검증하는 클라이언트 스크립트가 포함되어 있는 경우가 많습니다. 스크립트 검증은 사용자가 유효한 숫자를 입력했는지, 또는 입력란이 비어 있지 않은지 등을 확인하는 작업입니다. 웹 사이트에 사용자가 투자 수익률을 계산할 수 있는 양식이 있다고 가정합시다. 이러한 경우에는 잘못된 정보를 서버로 보내기 전에 사용자가 숫자 및 텍스트 정보를 해당 양식 필드에 정확하게 입력했는지 확인해야 합니다.
일반적으로, 클라이언트쪽에서 되도록 많은 양식 검증을 하는 것이 좋습니다. 클라이언트쪽 검증을 사용하면 사용자에게 입력 오류를 더 신속하게 알릴 수 있으며 응답 시간을 빠르게 하고, 서버 로드를 줄이며, 다른 응용 프로그램을 위해 대역폭을 절약할 수 있습니다.
다음 클라이언트쪽 스크립트는 정보를 서버로 보내기 전에 사용자 입력을 검증합니다(이 경우, 스크립트는 사용자가 입력한 계정 번호가 숫자인지 확인).
<SCRIPT LANGUAGE="JScript">
function CheckNumber()
{
if (isNumeric(document.UserForm.AcctNo.value))
return true
Else
{
alert("유효한 계정 번호를 입력하십시오. ")
return false
}
}
//양식 값이 숫자인지를 확인하는 함수입니다.
//참고: JScript의 isNaN는 값이 숫자인지를 알아보는 뛰어난 메서드입니다.
// 그러나 일부 이전 브라우저에서는 이 메서드를 지원하지 않습니다.
function isNumeric(str)
{
for (var i=0; i < str.length; i++)
{
var ch = str.substring(i, i+1)
if( ch < "0" || ch>"9" || str.length == null)
{
return false
}
}
return true
}
</SCRIPT>
<FORM METHOD="Get" ACTION="balance.asp" NAME="UserForm" ONSUBMIT="return CheckNumber()">
<INPUT TYPE="Text" NAME="AcctNo">
<INPUT TYPE="Submit" VALUE="Submit">
</FORM>
양식을 검증할 때 데이터베이스 액세스가 필요한 경우에도 서버쪽 양식 검증을 사용하는 것이 좋습니다. 서버쪽 검증을 쉽게 수행하려면 정보를 자기 자신에 추가하는 양식을 만듭니다. 즉, .asp 파일에는 실제로 사용자 입력을 검증하는 HTML 양식이 들어 있습니다. ASP를 사용하여 클라이언트쪽 스크립트 및 HTML과 상호 작용할 수 있습니다. 자세한 내용은 클라이언트쪽 스크립트와 상호 작용을 참조하십시오. 입력한 내용은 .asp 파일로 반환되며, 이 파일은 다음 정보를 검증하고 잘못된 경우 사용자에게 알립니다.
이러한 처리 및 사용자 입력 검증 방법을 사용하여 웹 기반 양식의 사용성과 응답성을 크게 향상시킬 수 있습니다. 예를 들어, 오류 정보를 양식 필드와 가까운 곳에 두어 잘못된 정보가 입력되었을 때 사용자가 오류의 원인을 쉽게 찾아 볼 수 있게 할 수 있습니다. 특히, 웹 기반의 양식은 요청을 오류 정보가 들어 있는 별도의 웹 페이지로 전송합니다. 따라서 이 정보를 금방 이해할 수 없는 사용자는 곤란해질 것입니다.
예를 들어, 다음 스크립트는 정보를 자기 자신(Verify.asp)에 추가하고 데이터베이스에 대해 쿼리를 실행하는 사용자 정의 함수를 호출하여 사용자가 계정 번호를 제대로 입력했는지 확인합니다.
<%
strAcct = Request.Form("Account")
If Not AccountValid(strAcct) Then
ErrMsg = "<FONT COLOR=Red>유효하지 않은 계정 번호를 입력하셨습니다. </FONT>"
Else
사용자 입력을 처리합니다.
.
.
.
Server.Transfer("Complete.asp")
End If
Function AccountValid(strAcct)
데이터베이스 연결 스크립트나 구성 요소 메서드 호출을 작성합니다.
End Function
%>
<FORM METHOD="Post" ACTION="Verify.asp">
Account Number: <INPUT TYPE="Text" NAME="Account"> <%= ErrMsg %> <BR>
<INPUT TYPE="Submit">
</FORM>
이 예에서 스크립트는 HTML 양식이 들어 있는 같은 파일인 Verify.asp 파일에 있습니다. 이 스크립트는 ACTION 속성의 Verify.asp를 지정하여 자기 자신에 정보를 추가합니다.
중요 서버쪽 검증을 위해 JScript를 사용하는 경우에는 컬렉션을 로컬 변수에 할당할 때 Request 컬렉션 항목(QueryString 또는 Form) 뒤에 빈 괄호 쌍을 두어야 합니다. 괄호가 없으면 컬렉션에서 문자열이 아닌 개체를 반환합니다. 다음 스크립트는 JScript로 변수를 할당하는 방법을 설명합니다.
<%
var Name = Request.Form("Name")();
var Password = Request.Form("Password")();
if(Name > "")
{
if(Name == Password)
Response.Write("이름과 암호가 같습니다. ")
Else
Response.Write("이름과 암호가 다릅니다. ");
}
%>
VBScript는 컬렉션에 쉼표로 구분되거나 인덱스로 작성할 수 있는 여러 값이 있을 때 똑같은 기능을 수행합니다. 즉, VBScript와 JScript 모두 Request 컬렉션 항목 뒤에 빈 괄호 쌍을 두는 것 외에도, 원하는 값의 인덱스를 지정해야 합니다. 예를 들어, 다음 JScript 행은 양식 요소의 여러 값 중 첫 번째 값을 반환합니다.
var Name = Request.Form("Name")(1);