教你如何使用JSONP数据格式,如何使用jQuery

前端之家收集整理的这篇文章主要介绍了教你如何使用JSONP数据格式,如何使用jQuery前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

介绍


在这篇文章中,我将解释执行跨域服务电话从客户端浏览器和工作需要做它使用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>

安全编码的Boot Camp

这跨域调用一定会成功的结果将返回一个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跨域调用

原文链接:https://www.f2er.com/json/290378.html

猜你在找的Json相关文章