AJAX jQuery на WCF REST и не только

Сайтостроение | создано: 01.04.2011 | опубликовано: 01.04.2011 | обновлено: 13.01.2024 | просмотров: 7828

Речь пойдет об очень полезной js-библиотеке, которая называется jQuery. Недавно озадачился, а можно ли используя jQuery.getJSON получить данные с WCF-сервиса, тот который REST. Оказалось очень просто.

Что такое jQuery

Не думаю, что надо объяснять, что такое jQuery, и где эту библиотеку можно взять, но тем не менее... Не буду оригинальным и позаимствую определение из сети:

jQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.

Как лаконично и точно подмечено. В данной статье речь пойдет именно о работе с ajax. Библиотеку можно скачать и положить на свой сайт, а можно воспользоваться одним из сервисов доставки контента (CDN), благо их на данный момент существует множество. Есть и у Microsoft, и у Google, и даже у Яндекса.

Что может jQuery или сказ про .get() и .getJSON()

Ответ прост как дважды два: практически всё что угодно. Попробую продемонстрировать примеры, невдаваясь в подробности реализации. Вообще библиотека подкупает своей простотой использования. Всё просто и хорошо оптимизировано. Но Вы можете не использовать библиотеку делать ajax-вызовы непосредственно использую ActiveXObject, "оберткой" над которой как раз и является jQuery. Это один из полезнейших функционалов реализованных в jQuery.

Итак, примеры.

Я создал небольшой сайт на ASP.NET, добавли несколько файлов. Для главной странице сделал default.js и подключил через ScriptManager:

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <scripts>
          <asp:ScriptReference Path="~/js/jquery-1.4.4.min.js" />
          <asp:ScriptReference Path="~/js/default.js" />
      </scripts>
  <services>
          <asp:ServiceReference Path="~/Service1.svc" />
      </services>
</asp:ScriptManager>

Да, Service1.svc этот WCF-сервис будет использоваться для получения данных через jQuery.getJSON. Но об этом позже. Сначала создал функцию, которая запускает скрипты:

jQuery(document).ready(function () {
  loadingContent();
  getData("#element");
});
function loadingContent() {
  var elementsCount = 6

  for (var i = 0; i < elementsCount; i++) {
    var element = "<p id='element" + i + "'><img src='progress.gif'/>... </p><hr/>";
    jQuery("p#output").append(element);
  }
}

Функция loadingContent() добавляет на страницу html для вывода результатов запросов, предварительно подставляя в тело тега "р" индикатор загрузки.

Ну, и собственно говоря, самая основная функция, которая и получает данные.

function getData(element) {

  // получение контента из текстового файла
  jQuery.get("/text.txt", '{}', function (e) {
    jQuery(element + "0").text(e);
  });

  // получение контента со одной из страниц сайта
  jQuery.get("/About.aspx", '{}', function (e) {
    var txt = jQuery("p#about", e);
    jQuery(element + "1").html(txt);
  });

  // получение контента с WCF REST сервиса стороннего сайта
  // (когда писался проект, локально, то этот адрес был "сторонний")
  jQuery.getJSON("http://www.calabonga.com/services/musorservice.svc/ajax/54", '{}', function (e) {
    jQuery(element + "2").html(e.text);
  });

  var url = "/Service1.svc/";

  // получение контента (JSON) с WCF REST сервиса
  // для .html()
  jQuery.getJSON(url, '{}', function (e) {
    jQuery(element + "3").html("Имя: " + e.Name + "<br />Возраст: " + e.Age);
  });

  // получение контента (string) с WCF REST сервиса
  jQuery.getJSON(url + "hello", '{}', function (e) {
    jQuery(element + "4").html(e);
  });

  // получение контента (JSON) с WCF REST сервиса
  // для .text()
  jQuery.getJSON(url, '{}', function (e) {
    jQuery(element + "5").text(e.Name);
  });
}

Хотелось бы привести еще некоторую информацию относительно настроек WCF REST сервиса. В частности про, сервис используемый в примере. Вот его методы и контракты:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{

  [WebGet(UriTemplate = "", ResponseFormat = WebMessageFormat.Json)]
  [OperationContract]
  public Person GetPerson()
  {
    return new Person() { Age = 35, Name = "Валера" };
  }

  [WebGet(UriTemplate = "/hello", ResponseFormat = WebMessageFormat.Json)]
  [OperationContract]
  public string Hello()
  {
    return "Hello again from WCF-service";
  }
}

[DataContract]
public class Person
{
  [DataMember]
  public Int32 Age { get; set; }
  [DataMember]
  public String Name { get; set; }
}

Чтобы WCF сервис стал "вдруг" понимать REST запросы, то есть аттрибут [WebGet] возимел место быть и работать, сервис надо соответственно настроить.

 <system.serviceModel>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"  />
    <behaviors>

      <endpointBehaviors>
        <behavior name="ajaxBehavior">
          <webHttp />
        </behavior>
      </endpointBehaviors>

      <serviceBehaviors>
        <behavior name="MyServiceTypeBehaviors">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="true"/>
        </behavior>
      </serviceBehaviors>

    </behaviors>
    <bindings>
  <webHttpBinding>
    <binding name="webBinding"/>
  </webHttpBinding>
    </bindings>
    <services>
      <service name="Sample.Service1"
               behaviorConfiguration="MyServiceTypeBehaviors">
        <endpoint address=""
                  binding="webHttpBinding"
                  bindingConfiguration="webBinding"
                  behaviorConfiguration="ajaxBehavior"
                  contract="Sample.Service1"/>
      </service>

    </services>
  </system.serviceModel>

Ключевые моменты выделены жирным шрифтом. А ниже показан результат работы запросов:

Это текстовой файл для проверки работы текста.

Это просто текст со странице "О компании"

Сидят мужики, квасят. Один не пьет.
- Жена, - говорит, - учует запах, домой не пустит!
- Ерунда! Заешь чем-нибудь, запах заглушишь, ни фига не почует!
Выпил мужик. Заел зубчиком чеснока, лавровый лист пожевал, покурил, напоследок зажевал жвачкой. Приходит домой, стучит в дверь.
Жена из-за двери кричит:
- Опять нажрался, сволочь!
- Да нет, ты что!
- А ну дыхни в замочную скважину"
Мужик дыхнул.
Жена из-за двери кричит:
- Ты хорош шутки шутить! Ты ртом дыхни!

Имя: Валера
Возраст: 35

Hello again from WCF-service

Валера

Вот, собственно говоря, и всё. Данная статья является лишь демонстрацией вызовов jQuery Ajax. (А если честно... Просто, лично для себя, в кучу собрал полезную информацию, относительно jQuery+AJAX).

jquery rest ajax wcf