當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
jQuery以JSONP的访问调用一个WCF REST服务
生活随笔
收集整理的這篇文章主要介紹了
jQuery以JSONP的访问调用一个WCF REST服务
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
JSONP（JSON with Padding）可以看成是JSON的一種“使用模式”，用以解決“跨域訪問”的問題.
下面是一個簡單的例子用于模擬如何通過jQuery以JSONP的訪問調用一個WCF REST服務。
在這個例子中，我們將定義一個用于返回所有員工信息的服務，
下面是用于表示員工信息的Employee的類型和契約接口。
契約接口IEmployees的GetAll操作用以返回所有員工列表，我們指定了Uri模板并將回復消息格式設置為JSON。
1: using System.Collections.Generic;2: using System.ServiceModel;3: using System.ServiceModel.Web;4: namespace Artech.WcfServices.Service.Interface5: {6: [ServiceContract]7: public interface IEmployees8: {9: [WebGet(UriTemplate = "all",ResponseFormat =WebMessageFormat.Json)] 10: IEnumerable<Employee> GetAll();11: }12: public class Employee13: {14: public string Id { get; set; }15: public string Name { get; set; }16: public string Department { get; set; }17: public string Grade { get; set; }18: }19: }?
在如下所示的服務類型EmployeesService 中，我們直接讓服務操作GetAll返回一個包含3個Employee對象的列表。
1: using System.Collections.Generic;2: using Artech.WcfServices.Service.Interface;3: namespace Artech.WcfServices.Service4: {5: public class EmployeesService : IEmployees6: {7: public IEnumerable<Employee> GetAll()8: {9: return new List<Employee>10: {11: new Employee{ Id = "001", Name="張三", Department="開發(fā)部", Grade = "G6"}, 12: new Employee{ Id = "002", Name="李四", Department="人事部", Grade = "G7"}, 13: new Employee{ Id = "003", Name="王五", Department="銷售部", Grade = "G8"}14: };15: }16: }17: }?
我們通過控制臺程序對服務進行寄宿。從下面的配置可以看到我們采用了標準終結點WebHttpEndpoint。
為了讓服務具有跨域支持的能力，我們必須將標準終結點的crossDomainScriptAccessEnabled屬性設置為True。
WebHttpBinding也具有同名的屬性，如果直接使用WebHttpBinding也需要將該屬性設置為True。
1: <configuration>2: <system.serviceModel>3: <standardEndpoints>4: <webHttpEndpoint>5: <standardEndpoint crossDomainScriptAccessEnabled="true"/>6: </webHttpEndpoint>7: </standardEndpoints>8: <bindings>9: <webHttpBinding>10: <binding crossDomainScriptAccessEnabled="true" />11: </webHttpBinding>12: </bindings>13: <services> 14: <service name="Artech.WcfServices.Service.EmployeesService">15: <endpoint kind="webHttpEndpoint" 16: address="http://127.0.0.1:3721/employees"17: contract="Artech.WcfServices.Service.Interface.IEmployees"/>18: </service>19: </services>20: </system.serviceModel>21: </configuration>?
在客戶端，我們在一個Web頁面中通過jQuery進行Ajax調用這個服務，并將得到的員工列表顯示在一個表格中。
注意dataType選項設置成“jsonp”而不是“json”。
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2: <html xmlns="http://www.w3.org/1999/xhtml">3: <head>4: <title>員工列表</title>5: <style type="text/css">6: ...7: </style>8: <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>9: <script type="text/javascript">10: $(function () {11: $.ajax({12: type: "get",13: url: "http://127.0.0.1:3721/employees/all",14: dataType: "jsonp",15: success: function (employees) {16: $.each(employees, function (index, value) {17: var detailUrl = "detail.html?id=" + value.Id;18: var html = "<tr><td>";19: html += value.Id + "</td><td>";20: html += "<a href='" + detailUrl + "'>" + value.Name + "</a></td><td>";21: html += value.Grade + "</td><td>";22: html += value.Department + "</td></tr>";23: $("#employees").append(html);24: });25: $("#employees tr:odd").addClass("oddRow");26: }27: });28: });29: </script>30: </head>31: <body>32: <table id="employees" width="600px">33: <tr>34: <th>ID</th>35: <th>姓名</th>36: <th>級別</th>37: <th>部門</th>38: </tr>39: </table>40: </body>41: </html>?
轉載于:https://www.cnblogs.com/besuccess/articles/3489514.html
總結
以上是生活随笔為你收集整理的jQuery以JSONP的访问调用一个WCF REST服务的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C 文件读写 容易疏忽的一个问题
- 下一篇： [Javascript_库编写]创建自己