Здесь в выделенном фрагменте кода с помощью вспомогательного метода Ajax.BeginForm объявляется форма для ввода данных. Устанавливаются параметры формы: действие, контроллер, которые требуется вызвать. С помощью определения экземпляра AjaxOptions определяются параметры Ajax-запроса: при успешном запросе будет вызвана JavaScript-функция onLogon, при возникновении ошибки будет вызваана другая функция — onError. Определим логику этих JavaScript-функций, которые будут реагировать на результат Ajax-запросов (листинг 7.3).
Листинг 7.3. JavaScript-код для реагирования на события
<script type="text/javascript">
function OnLogon(result) {
var response = result.get_response();
var resString = response.get_responseData();
var resultData = Sys.Serialization
.JavaScriptSerializer.deserialize(resString) ;
if (resultData.IsSuccess) {
document.getElementById('loginPanel').style.display = 'none';
document.getElementById('logoutPanel').style.display = '';
var username = document.getElementById('userName');
document.getElementById('username')
.innerHTML = "<b>" + username.value + "</b>";
} else {
document.getElementById('message')
.innerText = resultData.ErrorString;
}
}
function OnError(result) {
alert(result);
}
</script>
Здесь определяются две JavaScript-функции: OnLogon и OnError. Первая функция предназначена для обработки результата успешного выполнения авторизации. Функция OnLogon принимает один параметр — result, который содержит результат выполнения запроса и дополнительные данные. Для получения JSON-данных, которые были получены от действия LogOn, в функции OnLogon используются сужебные функции ASP.NET Ajax:
□ get_response — возвращает объект с данными ответа от сервера;
□ get_responseData — позволяет получить строку данных, которые были возвращены действием контроллера;
□ Sys.Serialization.JavaScriptSerializer.deserialize — преобразует строку с JSON-данными в объект с соответствующими полями.
После обработки ответа и извлечения полученных данных, в зависимости от результата, формируется либо разметка, соответствующая приглашению пользователя, либо выводится строка с сообщением об ошибке.
Реализация на jQuery
Для реализации поставленной задачи с помощью jQuery необходимо определить следующую разметку элементов управления:
<div id="loginPanel">
<form id="loginForm" method="post" action="Account/LogOn">
Логин: <input id="userName" type="text" />
Пароль: <input id="password" type="password" />
<input id="RememberMe" type="checkbox" />
запомнить <input type="submit" value="Логин" /><br/>
<span id="message"></span>
</form>
</div>
Здесь определена стандартная форма для отправки данных на сервер. Для обработки работы формы и формирования Ajax-запроса необходимо переопределить поведение формы с помощью JavaScript. Далее представлен фрагмент кода, определяющий логику работы формы:
<script type="text/javascript">
$('document').ready(function() {
$('#loginForm').submit(function(event) {
var postData = new Object();
postData.userName = $('#userName').val();
postData.password = $('#password').val();
postData.rememberMe = $('#RememberMe').is(':checked');
$.post('Account/LogOn',
postData,
function OnResult(result) {
if (result.IsSuccess) {
$('#loginPanel').hide();
$('#logoutPanel').show();
var username = $('#userName').val();
$('#username')
.html("<b>" + username + "</b>");
} else {
$('#message').text(result.ErrorString);
}
},
'json');
event.preventDefault();
})
});
</script>
Здесь определяется обработчик окончания загрузки документа, который после загрузки сайта в браузере у клиента выполнит необходимые привязки к разметке. Так, с помощью $('#loginForm').submit определяется функция, которая будет вызвана в момент, когда данные с формы будут передаваться на сервер. Обратите внимание на параметр event этой функции. После определения своей логики поведения при отправке данных с формы мы вызываем event.preventDefault(), который предотвращает поведение по умолчанию, т. е. позволяет нам отменить отправку данных с формы стандартным путем.
Для отправки данных мы используем функцию $.post, передав в нее предварительно сформированные данные, полученные с элементов управления. При вызове $.post мы определяем функцию OnResult, которая должна быть вызвана после завершения Ajax-запроса. Эта функция определяет обработку результата запроса и выводит либо сообщение об ошибке, либо приглашения для пользователя, в случае когда вход в систему был произведен удачно.
Полезные советы
В этой части главы мы рассмотрим несколько моментов, связанных с использванием технологии Ajax и библиотек jQuery и ASP.NET Ajax на практике.
Вопросы безопасности
Использование Ajax открывает новые возможности для разработчика и предлагает новый опыт для посетителя веб-ресурса. Но вместе с тем использование Ajax открывает новое поле действия для злоумышленников. Рассмотрим основные вопросы безопасности, которые следует иметь в виду при работе с запросами, в том числе и Ajax-запросами.
Обработка пользовательских данных
При работе с данными, полученными от пользователей, всегда необходимо соблюдать правила безопасности. Нужно относиться к любым таким данным как к потенциально опасным для отображения в разметке. Представим себе ситуацию, когда злоумышленник вместо того, чтобы ввести в поле своего логина какой-то текст, вводит туда опасный JavaScript-код. Тогда, если не принять никаких мер предосторожности, каждый из пользователей, который будет открывать страницу с выведенными данными злоумышленника на нашем сайте, потенциально будет уязвим. Предотвращение таких атак достигается путем декодирования опасного содержимого перед отображением на клиенте. В ASP.NET MVC существует метод расширения Html.Encode, который позволяет представить любой набор текстовых данных как безопасную последовательность символов и их HTML-представлений. Рассмотрим пример:
<div>
<%= Html.Encode("<script>alert('Атака удалась')</script>") %>
</div>
Очевидно, что если вывести строку, содержащую тег <script>, то она будет интерпретироваться браузером как JavaScript-код и ее содержимое выполнится. Но используя Html.Encode, мы получаем возможность избежать атаки. Результатом работы этой функции станет следующий текст разметки:
<div>
<script>alert('Атака удалась')</script>
</div>
