Шрифт:
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-представлений. Рассмотрим пример: