一个通过JSONP跨域调用WCF REST服务的例子（以jQuery为例）

JSONP（JSON with Padding）可以看成是JSON的一种“使用模式”，用以解决“跨域访问”的问题，这篇简单的文章给出一个简单的例子用于模拟如何通过jQuery以JSONP的访问调用一个WCF REST服务。[源代码从这里下载]

　　在这个例子中，我们将定义一个用于返回所有员工信息的服务，下面是用于表示员工信息的Employee的类型和契约接口。契约接口IEmployees的GetAll操作用以返回所有员工列表，我们指定了Uri模板并将回复消息格式设置为JSON。

using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Web;
namespace Artech.WcfServices.Service.Interface
{
    [ServiceContract]
    public interface IEmployees
    {
        [WebGet(UriTemplate = "all",ResponseFormat =WebMessageFormat.Json)]      
        IEnumerable<Employee> GetAll();
    }
    public class Employee
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Department { get; set; }
        public string Grade { get; set; }
    }
}

　　在如下所示的服务类型EmployeesService 中，我们直接让服务操作GetAll返回一个包含3个Employee对象的列表。

using System.Collections.Generic;
using Artech.WcfServices.Service.Interface;
namespace Artech.WcfServices.Service
{
    public class EmployeesService : IEmployees
    {
        public IEnumerable<Employee> GetAll()
        {
            return new List<Employee>
            {
                new Employee{ Id = "001",Name="张三",Department="开发部",Grade = "G6"},new Employee{ Id = "002",Name="李四",Department="人事部",Grade = "G7"},new Employee{ Id = "003",Name="王五",Department="销售部",Grade = "G8"}
            };
        }
    }
}

　　我们通过控制台程序对服务进行寄宿。从下面的配置可以看到我们采用了标准终结点WebHttpEndpoint。为了让服务具有跨域支持的能力，我们必须将标准终结点的crossDomainScriptAccessEnabled属性设置为True。WebHttpBinding也具有同名的属性，如果直接使用WebHttpBinding也需要将该属性设置为True。

<configuration>
  <system.serviceModel>
    <standardEndpoints>
      <webHttpEndpoint>
        <standardEndpoint crossDomainScriptAccessEnabled="true"/>
      </webHttpEndpoint>
    </standardEndpoints>
    <bindings>
      <webHttpBinding>
        <binding crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
    </bindings>
    <services>      
      <service name="Artech.WcfServices.Service.EmployeesService">
        <endpoint kind="webHttpEndpoint" 
                  address="http://127.0.0.1:3721/employees"
                  contract="Artech.WcfServices.Service.Interface.IEmployees"/>
      </service>
    </services>
  </system.serviceModel>
</configuration>

　　在客户端，我们在一个Web页面中通过jQuery进行Ajax调用这个服务，并将得到的员工列表显示在一个表格中。出CSS之外的页面代码如下所示，需要注意的是在进行Ajax调用的使用将dataType选项设置成“jsonp”，而不是“json”。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>员工列表</title>
<style type="text/css">
body
{
font-size: 12px;
text-align: center;
}
#employees
{
border: 1px solid #000000;
margin: 10px auto;
background-color: #eee;
}
#employees tr
{
line-height: 23px;
}
#employees th
{
background-color: #ccc;
color: #fff;
}
.oddRow
{
background-color: #fff;
}
</style>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "get",
url: "http://127.0.0.1:3721/employees/all",
dataType: "jsonp",
success: function (employees) {
$.each(employees,function (index,value) {
var detailUrl = "detail.html?id=" + value.Id;
var html = "<tr><td>";
html += value.Id + "</td><td>";
html += "<a href='" + detailUrl + "'>" + value.Name + "</a></td><td>";
html += value.Grade + "</td><td>";
html += value.Department + "</td></tr>";
$("#employees").append(html);
});
$("#employees tr:odd").addClass("oddRow");
}
});

});

function callServer() {
var id = Number($("#id").val());
var title = String($("#title").val());
var content = String($("#content").val());
$.ajax({
cache: false,
async: true,
type: "POST",
dataType: "json",
url: "http://127.0.0.1:3721/employees/InsRow",
data: '{"id":' + id + ',"title":"' + title + '","content":"' + content + '"}',
contentType: "application/json;charset=utf-8",
success: function (msg) {
var a = eval('(' + msg + ')');
if (String(a.d).length > 0) { alert(a.d); }
else { alert("服务器超时"); }
}
});

}

</script>
</head>
<body>
<table id="employees" width="600px">
<tr>
<th>ID</th>
<th>姓名</th>
<th>级别</th>
<th>部门</th>
</tr>
</table>
</p>
<div>
文章标题：<input type="text" id="title" />
<br />
文章内容：<textarea id="content"></textarea>
<input type="hidden" id="id" value="1" /><br />
<input type="button" value="提交" onclick="callServer();" />
</div>

</body>
</html>

当服务启动后在浏览器中显示上面这个Web页面，会得到如下所示的员工列表。

一个通过JSONP跨域调用WCF REST服务的例子（以jQuery为例）

猜你在找的Json相关文章