IT Notes: Основы Asp.Net

Продолжим нашу серию статей про 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).

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

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

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

<HTML>

<НЕАD>

<ТITLE></TIТLE>

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

function testВtn_onclick() {}

//->

</script>

</НЕАD>

<BODY>

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

<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. В результате при нажатии на эту кнопку будет вызван этот метод. Сильно усложнять содержание метода мы не будем, и для наших целей его код будет таким:

<! –

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(). Этот метод будет проводить проверку на отсутствие данных в текстовых полях:

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

Function ValidateData()

{

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

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

{

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

return false;

}

return true;

}

...

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

<HTML>

<НЕАD>

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

<!- Методы 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>

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

<H1>The Cars Login Page</H1>

<H2> Today is: </H2>

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

document.write(GetTheDate()):

</script>

<BR>

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

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

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

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

name=btnSubmit>  

</form>

</Center>

</BODY>

</HTML>

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

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

...

</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>

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

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

</center>

</BODY>

</HTML>

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

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

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

<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).

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

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

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

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

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

<BODY>

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

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

dim pwd

pwd = Request.Form(“txtPassword”)

Reaponse.Write(pwd)

</center>

</BODY>

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

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

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

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

IT Notes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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