网站布局 下载,wordpress个人支付插件,wordpress照片小工具,仓库改造类网站怎么做JSONP#xff08;JSON with Padding#xff09;可以看成是JSON的一种“使用模式”#xff0c;用以解决“跨域访问”的问题. 下面是一个简单的例子用于模拟如何通过jQuery以JSONP的访问调用一个WCF REST服务。 在这个例子中#xff0c;我们将定义一个用于返回所有员工信息的…JSONPJSON 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: IEnumerableEmployee 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 IEnumerableEmployee GetAll()8: {9: return new ListEmployee10: {11: new Employee{ Id 001, Name张三, Department开发部, 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: configuration2: system.serviceModel3: standardEndpoints4: webHttpEndpoint5: standardEndpoint crossDomainScriptAccessEnabledtrue/6: /webHttpEndpoint7: /standardEndpoints8: bindings9: webHttpBinding10: binding crossDomainScriptAccessEnabledtrue /11: /webHttpBinding12: /bindings13: services 14: service nameArtech.WcfServices.Service.EmployeesService15: endpoint kindwebHttpEndpoint 16: addresshttp://127.0.0.1:3721/employees17: contractArtech.WcfServices.Service.Interface.IEmployees/18: /service19: /services20: /system.serviceModel21: /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.dtd2: html xmlnshttp://www.w3.org/1999/xhtml3: head4: title员工列表/title5: style typetext/css6: ...7: /style8: script srcScripts/jquery-1.7.1.js typetext/javascript/script9: script typetext/javascript10: $(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 trtd;19: html value.Id /tdtd;20: html a href detailUrl value.Name /a/tdtd;21: html value.Grade /tdtd;22: html value.Department /td/tr;23: $(#employees).append(html);24: });25: $(#employees tr:odd).addClass(oddRow);26: }27: });28: });29: /script30: /head31: body32: table idemployees width600px33: tr34: thID/th35: th姓名/th36: th级别/th37: th部门/th38: /tr39: /table40: /body41: /html 转载于:https://www.cnblogs.com/besuccess/articles/3489514.html
