Вызов веб-сервисов и веб-методов архитектуры.net

Данная заметка описывает то, как просто можно вызвать .Net веб-сервис (написанный, например, в asp.net-проекте) используя библиотеку jQuery. Я немного сомневался в том, где поместить эту заметку, тут или в блоге .Net и, наконец, решил, что тема заметки больше касается jQuery и ее особенностей, чем темы программирования .Net.

Итак, начнем.

.Net

Работоспособность проверена на .net framework 3.5, в версиях .net ниже 3.0 данный пример может не работать.

Первым делом необходимо знать особенности веб-сервисов написанных на .net. За сведениями лучше обратиться к первоисточнику и в нашем случае это будет ScottGu, архитектор .Net. В его блоге есть замечательная статья «JSON Hijacking and How ASP.NET AJAX 1.0 Avoids these Attacks».

weblogs.asp.net/scottgu/archive/2007/04/04/json-hijacking-and-how-asp-net-ajax-1-0-mitigates-these-attacks.aspx

В этой статье описаны требования и условия для вызова методов помеченных атрибутом [WebMethod], которые выполняет так же и архитектура AJAX.NET.

Условий, по сути, всего два:
— использовать только POST-запросы;
— в запросе должен быть следующий заголовок
Content-Type: application/json; charset=utf-8.

Веб-сервис

Для начала напишем простенький веб-сервис, который получает текст логина и возвращает булево значение того, есть ли в БД этот логин или его нет.

  [WebMethod]
  public bool CheckLogin(string login)
  {
    bool result = false;
    if (login.Length > 0)
    {
      ORMDataContext db = ORMDataContext.GetDB();
      var user = BisORM.User.GetUser(login);
      if (user != null)
      {
        result = true;
      }
    }
    return result;
  }
* This source code was highlighted with Source Code Highlighter.

Как можно заметить, этот метод весьма простой, он использует Linq to SQL и сгенерированную ORM (ORMDataContext) для определения существует ли переданный логин в БД.

jQuery

Для работы с ajax в jQuery есть несколько функций, одна из которых как раз и подходит под все наши требования. Это функция $.ajax. Я не буду останавливаться на описании данной функции и всех ее параметров, эти данные можно легко почерпнуть на официальном сайте проекта в разделе документации. Определим следующую вспомогательную функцию javascript:

  function ExecuteService(params, url, callbackSuccess, callbackError)
  {
    $.ajax({
     type: «POST»,
     url: url,
     contentType: «application/json; charset=utf-8»,
     dataType: «json»,
     data: params,
     success: callbackSuccess,
     error: callbackError
    });                    
  }* This source code was highlighted with Source Code Highlighter.

Функция ExecuteService принимает следующие параметры:
— params – строка JSON с параметрами, которые необходимо передать для вызова веб-сервиса;
— url – полный адрес веб-сервиса с указанием веб-метода;
— callbackSuccess – функция, которая будет вызвана когда веб-метод выполнится успешно;
— callbackError — функция, которая будет вызвана, когда при выполнении веб-метода возникнет ошибка.

Следует заметить, что в callbackSuccess будет передан один параметр с результатом веб-метода в формате JSON-строки, а в callbackError будет передано три параметра:
— экземпляр запроса;
— текстовое сообщение;
— описание ошибки.

Как можно видеть, ExecuteService выполняет все требования к запросу, которые выдвигает .Net и которые были описаны выше: формируется post-запрос, заголовоку «contentType» присваивается нужное значение.

Использование

Теперь, наконец-то, напишем код, которые взаимодействует с нашим веб-сервисом посредством jQuery:

  function CheckLogin(input, callbackResult, callbackError)
  {    
    var login = $(input)[0].value;
    if (login.length > 0)
    {            
      var params = "{login:'"+login+"'}";
      ExecuteService(
        params,
        «LoginService.asmx/CheckLogin»,
        callbackResult,
        callbackError
      );   
    }
  }
* This source code was highlighted with Source Code Highlighter.

JS-функция CheckLogin принимает через параметры id textbox'a (в виде "#id"), в который введен логин, а так же две функции которые определяют, что делать при получении результат и при возникновении ошибки. Обратите внимание, на код

var params = "{login:'"+login+"'}";

— это формирование JSON-строки для передачи параметра в наш веб-метод, который, я напомню, определен как:

public bool CheckLogin(string login)

Стоит заметить, что в случае, когда ваш веб-метод не принимает никаких параметров необходимо написать var params = "{ }";, но не var params = "";. Так же следует знать, что хоть в Firefox допустимо передать {login: “test”}, но в IE это не сработает, так что необходимо использовать одинарные кавычки {login: ‘test’}

Определим так же функции для передачи callbackResult, callbackError:

  function onCheckLogin(msg)
  {
    if (msg.d)
    {
      $("#loginState").text(«ОК»).css(«color», «green»);
    }
    else
    {
      $("#loginState").text(«Неверный логин»).css(«color», «red»);
    }
  }
  function onError(XMLHttpRequest, textStatus, errorThrown)
  {
    $("#loginMessage").text(«Ошибка при выполнении AJAX-запроса. Попробуйте перезагрузить страницу.»);
  }* This source code was highlighted with Source Code Highlighter.

Обратите внимание на msg.d. Именно здесь будет лежать значение, которое вернется после исполнения веб-метода. Так же надо пояснить, что #loginState – это id элемента, для вывода результата проверки логина, а #loginMessage – id элемента, для вывода сообщения об ошибке.
Наконец, подходим к финальному штриху, подключим к textbox обработчик события потери фокуса:

$("#txtLogin").blur(function (){CheckLogin("#txtLogin", onCheckLogin, onError);})* This source code was highlighted with Source Code Highlighter.

Как видно из кода, используя функции jQuery, регистрируется обработчик события OnBlur для элемента управления, который объявлен как

<input id=«txtLogin» type=«text» />* This source code was highlighted with Source Code Highlighter.

Теперь, когда пользователь введет текст логина в поле ввода и перейдет на другой элемент, например для ввода пароля, автоматически произойдет запрос к веб-серверу для определения правильности ввода логина.

Заключение

jQuery позволяет очень легко обращаться к любым .Net веб-сервисам и веб-методам. В этой заметке были определены требования к таким запросам и реализована функция, которая прозрачно вызывает .Net методы принимая только url и параметры. Так же был рассмотрен пример использования этой функции для автоматической валидации логина введенного пользователем.

PS: кроме того, можно прочитать следующую статью по данной теме (только для подписчиков блога .Net)
ajax.net vs jquery.ajax
habrahabr.ru/blog/net/44190.html