четверг, 26 августа 2010 г.

Основы Asp.Net – Часть 2

Продолжим нашу серию статей про web-приложения и в этой статье поговорим о клиентских скриптах и о классическом asp.

Клиентские скрипты

Одной из больших проблем для множества web-приложений является необходи­мость вновь обращаться с повторными запросами на web-сервер для внесения из­менений в то, что показывается пользователю в окне браузера. Конечно, во многих случаях такие обращения неизбежны, но если есть возможность сократить их ко­личество, то этой возможностью надо пользоваться. Один из способов сократить количество запросов на web-сервер заключается в применении клиентских (браузерных) скриптов, например, для проверки введенных пользователем данных пе­ред передачей этих данных на сервер.

Например, в нашей ситуации пользователю необходимо ввести имя пользователя и пароль для аутентификации. Если какое-либо из полей останется незаполненным, аутентификация все равно не произойдет. Поэтому вполне можно сделать так, чтобы пользователь не мог отправить данные на сервер, не заполнив оба поля. Конечно, в этой ситуации только кодом HTML нам не обойтись: HTML - это язык разметки, а не программирования. Для того чтобы реализовать проверку введенных пользователем

данных, нам придется использовать какой-либо из языков для работы со скриптами.

Существует множество языков для работы со скриптами, но для скриптов, выполняющихся в браузерах, подойдут далеко не все. Inretnet Explorer поддерживает два языка: VBScript (диалект Visual Ваsic для работы со скриптами) и JavaScript, а Netscape Navigator - только JavaScript. Если мы можем гарантировать, что клиенты нашего приложения будут использовать только Internet Explorer, можно использовать любой из языков для работы со скриптами. Но на обычных web-сайтах, открытых для доступа самых разных клиентов, как правило, используется только один язык для браузерных скриптов - JavaScript.

JavaScript - очень популярный язык скриптов, который де-факто является стандартом для создания браузерных скриптов. Сразу заметим, что JavaScript никоим образом не является частью языка jаvа. JavaScript - это совершенно отдель­ный язык программирования, который предназначен для решения специальных задач и в котором предусмотрено гораздо меньше возможностей, чем в java. Jscript - это название реализации JavaScript от Мiсrоsоft.

Пример клиентского скрипта

Как правило, клиентские скрипты выполняются в ответ на события графических элементов HTML. Как же происходит перехват таких событий? Проще всего показать это на примере.

Предположим, что мы работаем с очень простой web-страницей, представленной на рис. 5. Единственная кнопка на этой странице будет называться testBtn (проще всего присвоить это имя из свойств кнопки). Чтобы настроить перехват события, возникающего при нажатии этой кнопки, перейдем в режим просмотра HTML и выберем нашу кнопку в левом ниспадающем списке. Затем в правом списке выберем для этой кнопки событие onclick (рис. 6).

clip_image002

Рис. 5. Новая страница HTML

clip_image004

Рис. 6. Перехват событий элементов управления HTML

Выполнив эти действия, мы сможем обнаружить в коде HTML следующие изменения:

<HTML>

<НЕАD>

<ТITLE></TIТLE>

<МЕТА NAME="GENERATOR" Content="Microsoft Visual Studio"> <МЕТА HTTP-ЕQUIV="Соntеnt- Туре" content="text/html ">

<Script ID=clientEventHandlerJS Language=javascript>

<!­

function testВtn_onclick() {}

//->

</script>

</НЕАD>

<BODY>

<p align = center>

<font size = 5>Неге is а single button which responds to clicks...</font></p>

<p align = center>

<input id =testBtn type=button value=Button name=testBtn language=javascript

onclick="return testBtn_onclick()">

</p>

</BODY>

</HTML>

Как мы видим, на нашей странице в разделе <head></head> появился блок <script>, для которого в качестве используемого языка указан JavaScript. Обратите внимание, что сам код скрипта помещен в блок комментария HTML. Причина понятна - если страница будет открыта в браузере, который не поддерживает JavaScript, то этот код будет воспринят как комментарий и проигнорирован.

Обратите также внимание, что в теге для нашей кнопки появился новый атрибут onclick, который ссылается на метод JаvаSсriрt. В результате при нажатии на эту кнопку будет вызван этот метод. Сильно усложнять содержание метода мы не будем, и для наших целей его код будет таким:

<script id = clientEventHandlersJS language = javascript>

<! –

function testBtn onclick()

{

// Аналог MessageВox в JavaScript

alert"Hey. stop clicking me... ");

}

//->

</script>

При нажатии на кнопку мы получим окно сообщения: Hey, stop cliking me...

Реализация проверки введенных пользователем данных

Давайте теперь займемся более сложной ситуацией и реализуем проверку ввода пользователя на нашей странице default.htm. Задача проста: при нажатии на кноп­ку Submit должен вызываться метод JavaScript, который будет проверять, не остав­лено ли какое-либо из текстовых полей пустым. Если так оно и есть, пользователю будет выдаваться сообщение Internet Explorer с информацией о допущенной им ошибке. Прежде всего нам потребуется определить для кнопки Submit событие onclick. При возникновении этого события должен вызываться метод JavaScript ValidateData(). Этот метод будет проводить проверку на отсутствие данных в тек­стовых полях:

<script language = javascript>

<!- Необходимо использовать полные имена текстовых полей в формате имя_формы.имя_поля!

Function ValidateData()

{

// Если что-то забыто, выводим окно сообщения

if ((MainForm.txtUserName.value = = "")||(MainForm.txtPassword.value = = ""))

{

alert("You must supply а user пате and Password!");

return false;

}

return true;

}

->

...

<input id=btnSubmit onclick="return ValidateData()" type=submit value=Submit name=btnSubmit>

С проверкой данных в нашей форме все. Однако в этом примере были проде­монстрированы лишь самые примитивные возможности JavaScript. Чтобы дать хотя бы небольшое представления о других возможностях этого языка и браузер­ных скриптов в целом, давайте создадим еще одну функцию, которая будет вызы­ваться при загрузке страницы и выводить информацию о дате и времени входа пользователя. Для этой функции (она будет называться GetTheDate()) нам потре­буется еще один тег <script>. Обратите внимание на применение метода write() объекта Document, представляющего текущий документ, загруженный в Internet Explorer.

<HTML>

<НЕАD>

<ТIТLЕ>НТМL is unavoidable</TITLE>

<script language = javascript>

<!- Методы JavaScript для этой формы

function ValidateData()

{

// Если что-то забыто, выводим окно сообщения

if ((MainForm.txtUserName.value = = "")||(MainForm.txtPassword.value = = ""))

{

alert("You must supply а user пате and Password!");

return false;

}

return true;

}

function GetTheDate() {return Date();}

->

</script>

</HEAD>

<BODY bgColor=#66ccff>

<! - Приглашение пользователю для ввода ->

<Center>

<H1>The Cars Login Page</H1>

<H2> Today is: </H2>

<script language=javascript>

// Метод document.write - часть объектной модели IE

document.write(GetTheDate()):

</script>

<BR>

</HЗ>Рleasе enter your <i>user name</i> and <i>password</i>.</HЗ>

<! - Создает форму для приема ввода данных пользователем ->

<form name=MainForm>

<p>User Name: &nbsp; <input type=text name=txtUserName></p>

<p>Password:&nbsp;&nbsp;&nbsp; <input type=passord name=txtPassword> </p>

<input id=btnSubmit onclck=ValidateData() type=submit value=Submit

name=btnSubmit>&nbsp;&nbsp;

<input type=reset value=Reset name=btnReset>

</form>

</Center>

</BODY>

</HTML>

Передаем данные формы (методы GET и POST)

Будем считать, что с вводом данных пользователем и их проверкой мы уже разобрались. Однако введенные и проверенные данные обычно необходимо отправить получателю - например, другому файлу HTML на web-сервере, почтовому серверу, странице ASP (Active Server Page) и т. п. Получатель данных формы указывается при помощи атрибута action. Давайте добавим этот атрибут в тег нашей формы:

<form name=MainForm action="http://localhost/Cars/ClassiCASPPage.asp" method= "GEТ">

...

</form>

Такое значение атрибута action означает, что при нажатии кнопки Submit дан­ные формы будут переданы странице ASP с именем ClassicASPPage.asp, расположенной в нашем виртуальном каталоге Cars на локальном компьютере. Мы определили в качестве метода для передачи данных метод GET. Это значит, что данные формы будут добавлены к запросу в виде пар имя - значение. Вместо метода GET можно использовать метод POST, в этом случае значение соответствующего атрибута должно выглядеть следующим образом:

<form name=MainForm

action=''http://localhostlCars/ClassicASPPage.asp'' method = "POST">

...

</form>

При использовании метода POST данные формы не будут добавляться к строке запроса. Вместо этого для них будет выделена отдельная строка в поле заголовка НТТР. При этом передаваемые данные не будут сразу же видны всем, кто отсле­живает наш трафик, и поэтому метод POST можно считать немного более безопас­ным. Однако еще важнее, что при помощи метода POST можно передавать данные гораздо большего размера, чем при помощи GET. Однако в нашем примере мы будем использовать более традиционный и простой метод GET.

Синтаксис строки запроса HTTP

Файл ASP, которому мы передаем данные из нашей формы, должен суметь из­влечь эти данные из строки запроса. Сама строка запроса с данными формы выглядит как обычный адрес в адресной строке браузера с добавлением нескольких пар имя-значение:

http://localhost/Cars/ ClassicAspPage.asp?txtUserName=Chucky&txtPassword=somepassword&btnSubmit=Submit

Обратите внимание, что вся строка запроса разбивается на две части символом знака вопроса (?). Слева от знака вопроса находится адрес получателя данных, а справа - сами пары имя-значение (например, txtUserName=Chucky).

Как можно убедиться, каждая пара имя-значение отделена от другой пары символом амперсанда (&). Строка в нашем примере не представляет никаких сложностей для анализа, поскольку передаваемые значения очень просты. Однако, к примеру, если бы нам потребовалось поместить внутрь какого-либо значения про­бел (Chucky заменить на Chucky Chuckles), то строка запроса выглядела бы уже сле­дующим образом:

http://localhost/Cars/ ClassicAspPage.asp?txtUserName=Chucky+Chuck1es&txtPassword=somepassword&btnSubmit=Submit

Таким образом, вместо пробелов в передаваемых значениях подставляется символ +. Если нам придет в голову поставить между Chucky и Chuckles пять пробелов,

то строка запроса будет выглядеть так: ­

http://localhost/Cars/ ClassicAspPage.asp?txtUserName=Chucky+++++Chuckes&txtPassword=somepassword&btnSubmit=Submit

А что будет, если в передаваемом значении попадутся какие-нибудь служеб­ные символы? Они будут переданы в виде символа процента, за которым следует шестнадцатеричное значение соответствующего символа ASCII. Например, если пользователь придумал себе пароль, который выглядит как Hello^77, то этот па­роль будет передан так:

http://localhost/Cars/

ClassicAspPage.asp?txtUserName=Chucky+++++Chuckles&txtPassword=Hello%5E77&btnSubmit=Submit

Создание классической страницы ASP

Наша форма уже в состоянии передавать данные, однако принимать их пока неко­му. Давайте ликвидируем этот недостаток нашего web-приложения и создадим страницу - приемник наших данных. Вначале мы создадим ее не на ASP.NET, а с помощью классических ASP.

Первое, с чего нам нужно начать - добавить новую страницу Active Server Page при помощи Visual Studio.NET (New File®Active Server Page). Присвоим этой странице то имя, которое мы указали в атрибуте action для формы (ClassicASPPage.asp) и сохраним ее в физическом каталоге, которому соответствует виртуальный каталог Cars.

Страницу ASP можно воспринимать как набор из кода HTML и скриптов, предназначенных для выполнения на сервере. Можно сказать, что основной смысл ASP заключается в генерации кода HTML «на лету» при помощи серверных скриптов.

Например, можно создать страницу ASP, которая будет считывать данные из ис­точника данных (при помощи АDО) и представлять возвращаемые строки в виде кода HTML.

В нашем примере страница ASP будет использовать встроенный объект Request для считывания значений из входящей строки запроса и выводить полученные от клиента данные в виде кода HTML. Можно сказать, что клиенту будет возвращать­ся эхо его запроса. Вот код соответствующего скрипта (обратите внимание на блок <%...%>, в который помещен скрипт):

<%@ Language=VBScript'%>

<!- VBScript вполне подходит для серверных скриптов ->

<HTML>

<НЕАD>

<МЕТА NAМE="GENERATOR" Content=Microsoft Visual Studio 7.0">

</НЕАD>

<BODY>

<!- Возвращаем обратно то, что получили>

<center>

<hl>You said: </hl>

<b>User Name: </b><%= Request.QueryString("txtUserName") %><br>

<b>Password: </Ь><%= Request.QueryString("txtPassword") %><br>

</center>

</BODY>

</HTML>

Первое, что необходимо отметить, - на странице ASP используются те же теги <HTML>, <НЕАD> и <BODY>, что и на обычной web-странице. Мы используем объект Request, который, как и положено объектам, поддерживает некоторое количество свойств, методов и событий. Для того чтобы извлечь данные в виде запроса от кли­ента, используется метод Request.QueryString().

Как же генерируется код HTML который будет возвращен клиенту? Можно сказать, что запись <%... %> означает, «Вставь это в HTTP-ответ». Кроме того, мы можем получить полный контроль над тем, что возвращается пользователю, при помощи объекта Response. Например:

<! - Возвращаем обратно то, что получили ->

<center>

<h1>You said: </h1>

<b>User Name: </b><%= Request.QueryString( "txtUserName") %><br>

<b>Password: </b>

<%

dim pwd

pwd = Request.QueryString(“txtPassword”)

Response.Write(pwd)

%>

</center>

В типах Request и Response, конечно же, предусмотрено множество других очень полезных членов, кроме того, в распоряжении web-разработчика классических ASP также находится набор дополнительных объектов, таких как Session.Server, Ар­plication и ObjectContext. Эти объекты мы рассматривать не бу­дем. Однако отметим, что возможности этих типов реализованы в ASP.NET при помощи типа Page.

Для того чтобы запустить нашу страницу ASP, просто откроем файл default.htm, введем в текстовые поля значения для имени пользователя и пароля и нажмем кнопку Submit. Сработает серверный скрипт ASP, и в окне браузера откроется сгенерированная на основе ваших данных страница (рис. 7).

clip_image006

Рис. 7. Динамически созданная страница HTML

Наш пример, конечно, трудно отнести к разряду очень изощренных, но он хорошо иллюстрирует основной принцип работы ASP (и ASP.NET); данные переда­ются через форму HTML, обрабатываются серверным скриптом, и результат возвращается пользователю в виде сгенерированного кода HTML.

Принимаем данные, переданные методом POST

В нашем примере для передачи данных формы использовался метод GET, при котором пары имя-значение для элементов управления формы добавлялись к концу строки запроса. Затем значения принимались при помощи метода Request.QueryString(). Сразу отметим, что этот метод может использоваться только для приема значе­ний, передаваемых методом GET. Если мы изменим значение соответствующего тега формы на POST и снова запустим наше приложение, ничего хорошего не про­изойдет: нам вернутся пустые значения.

Конечно же, в типе Request предусмотрены члены, которые позволяют принимать данные, отправленные и методом POST. Для этой цели используется коллекция Form. Выглядит это так:

<BODY>

<! - Возвращаем обратно то, что получили ->

<center>

<hl>You said: </hl>

<b>UserName: </Ь><%= Request'iForm( "txtUserName") %><Ьr> <b>Password: </Ь>

<%

dim pwd

pwd = Request.Form(“txtPassword”)

Reaponse.Write(pwd)

%>

</center>

</BODY>

Давайте изменим код страницы ASP в соответствии с вышеприведенным примером и запустим наше web-приложение заново. Все работает! Результат будет таким же как и на рис 7, но теперь в ад­ресной строке браузера переданные нами значения не отображаются и будет лишь путь к нашей странице.

Общая схема работы приложения ASP при использовании различных методов

передачи данных представлена на рис. 8.

clip_image008

Рис. 8. Передача данных на страницу ASP при помощи методов GET и POST

Комментариев нет:

Отправить комментарий