AJAX jQuery на WCF REST и не только
Сайтостроение | создано: 01.04.2011 | опубликовано: 01.04.2011 | обновлено: 13.01.2024 | просмотров: 7832
Речь пойдет об очень полезной 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).