介绍

在这篇文章中，我将解释执行跨域服务电话从客户端浏览器和工作需要做它使用jQuery的JSONP调用的障碍。我会还提供了一个一步一步实现的例子JSONP调用。NET 4.0中的WCF服务。

跨域调用限制

跨域服务的限制是由于安全策略被命名为同源策略。它定义了到客户端的脚本语言的编程语言，如实施的政策。这一政策将限制任何以下情况下调用。

1. 呼叫从客户端的资源比实际的页面服务协议，通过该协议通过不同的协议。
2. 呼叫从客户机到不同的域/域/服务页面的Web服务器的Web服务器比躺在资源。
3. 端口是不同的。

同源策略基本上被定义为网络安全的目的。同源策略的唯一的例外是脚本标记。脚本标记可以通过交叉域脚本调用的。

JSONP消息格式

JSONP消息格式基本上是一个正常的JSON格式填充。我将解释什么填充是所有关于JSONP。正如我在上一节的同源策略<SCRIPT>的标签豁免。所以跨域调用是可以做到的，如下图所示。

<script type="text/javascript" src="http://www.ilixin.net/orderservice.svc/GetOrders"></script>

这跨域调用一定会成功的结果将返回一个JSON格式如下所示。

[

{"OrderId":1000,"OrderItem":"Cricket Bat","Quantity": 10,"TotalPrice":20000}

{"OrderId":1001,"OrderItem":"Football","Quantity": 100,"TotalPrice":50000}

]

但是，这是没有用的，因为我们已经收到的数据和处理。现在让我们看看JSONP做什么。修改脚本URL一个额外的查询字符串值，如下所示：

<script type="text/javascript" src="http://www.ilixin.net/orderservice.svc/GetOrders?jsonp=processResults"></script>

JSONP调用上面的跨域服务将返回JSON填充给定的查询字符串值作为一个脚本回调方法。

parseResults([

])

您可以实现JSONP回调JavaScript函数，如下所示。

function parseResults(results) {

      alert('Cross domain JS call achieved. Have your implementation going in here!');

}

JSONP服务调用使用jQuery样品

在本节中，我们将着眼于使用JSONP和jQuery调用WCF服务。jQuery的开始支持JSONP从1.2版本和WCF JSONP格式还具有内置支持。

创建WCF服务使用如下所示的代码：

public class OrderService : IOrderService

{

  public List<Order> GetOrders()

  {

    return FetchOrdersFromDatabase();

  }

  private List<Order> FetchOrdersFromDatabase()

    List<Order> orderList = new List<Order>();

    //DB call and population

    return orderList;

}

这里是合同执行：

[的ServiceContract]

public interface IOrderService

  [OperationContract]

  [WebGet(ResponseFormat=WebMessageFormat.Json)]

  List<Order> GetOrders();

 在上面的代码注意，是getOrders方法装饰WebGet属性。这是必需的，因为JSONP调用将被获取，而不是发布。移动配置文件WCF 4.0引入了一个新的绑定属性命名crossDomainScriptAccessEnabled WCF的WebHttpBinding。下面是配置的变化。
 
<bindings>
 
  <webHttpBinding>                             <binding name="jsonpWebHttpBinding" crossDomainScriptAccessEnabled="true"/>
 
   </webHttpBinding>
 
</bindings>
 
 现在，在客户端网页编写jQuery代码如下。
 
<script type="text/javascript">
 
  $(document).ready(function () {
 
$.getJSON('http://www.ilixin.net/orderservice.svc/GetOrders?callback=?',null,function (results) {
 
        alert('Cross domain JS call achieved. Have your implementation going in here!');
 
      });
 
   });
 
</script>
 
 这将成功进行跨域调用和执行我们的回调JavaScript函数，在这里我们可以处理我们的研究结果从服务。
 
 
 
 
 结论
 
 
 
 
 
 为了使用jQuery和：JSONP目标资源（在我们的案例中，它是一个WCF服务）也应该是能够给JSONP格式的响应。我希望这篇文章教你如何进行深度使用JSONP跨域调用。