京东中关于jsonp的运用

以商品详情页为例:

文件头部出现很多jsonp的调用:

 

对于这个jsonp的函数回调放在iplocation_server.js这个文件中

//stock callback
function getProvinceStockCallback(result) {
var stockdesc="<strong>现货</strong>";
if (result.stock) {
if(result.stock.D&&result.stock.D.id){
pageConfig.product.popInfo = result;
}
stockdesc = (result.stock.StockStateName=="统计中"|| result.stock.StockStateName=="无货")?"<strong class='store-over'>无货</strong>":("<strong>"+result.stock.StockStateName+"</strong>");
$("#store-selector .text div").html(currentLocation);
pageConfig.product.yfinfo={};
if(result.stock.D&&result.stock.D.prompt){
var proarray=result.stock.D.prompt.split("|");
if (proarray[0]&&new Number(proarray[0])>0){
pageConfig.product.yfinfo={nofree:true,cash:proarray[0]};
}
if(proarray[1]){
pageConfig.product.yfinfo.service=proarray[1];
}
}
$("#store-prompt").html(stockdesc+","+$.getStockDesc(result.stock)
+(pageConfig.product.yfinfo.nofree?",<span style='cursor:pointer' title='一个店铺购买多件商品,只收取一次运费'>运费:<span style='color:#f00;'>¥"+pageConfig.product.yfinfo.cash+"</span><span>":""));
$.getDeliver(result.stock);
SetNotifyByNoneStock(result.stock.StockState);
}
if (pageConfig.product.skuid>1000000000){
if(!$._ptload){
$._ptload=true;
window._showPopTemplete=function(r){
if(result.stock.StockState==36){
if(r&&r.reserveDeliveryDay){
$._ptloadcon=r.reserveDeliveryDay;
$("#store-prompt").html(stockdesc+","+"此商品为预订商品,下单后在"+$._ptloadcon);
}
}
if(r&&r.wareTemplateContent)$("<div>"+r.wareTemplateContent+"</div>").insertBefore("#product-detail-1 .detail-content:first");
if(r&&r.wareTemplateBottomContent)$("<div>"+r.wareTemplateBottomContent+"</div>").insertAfter("#product-detail-1 .detail-content:last");
};
$.getJSONP("http://rms.shop.360buy.com/json/wareTemplate/queryWareTemplateContent.action?skuId="+pageConfig.product.skuid+"&jsoncallback=_showPopTemplete",_showPopTemplete);
}else{
if($._ptloadcon)$("#store-prompt").html(stockdesc+","+"此商品为预订商品,下单后在"+$._ptloadcon);
}
}
} 

 

为啥这样调用:因为他能解决js跨域的问题;

 

补充知识:

JSONP原理及最简单的JSONP实现  (http://blog.163.com/hurricane_tx@126/blog/static/23850652009227198886/)

1) 什么是JSONP?

  JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

  2) 如何使用JSONP?

  1. 在客户端调用提供JSONP支持的URL Service,获取JSONP格式数据。

  比如客户想访问http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction

  假设客户期望返回JSON数据:[“customername1","customername2"]

  那么直正返回到客户端的Script Tags: callbackFunction([“customername1","customername2"])

  可能的调用方式:

  <script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction" />

  2. 在客户端写callbackFunction函数的实现

  <script type="text/javascript">

  function onCustomerLoaded(result, methodName)

  {

  var html = '<ul>';

  for(var i = 0; i < result.length; i++)

  {

  html += '<li>' + result + '</li>';

  }

  html += '</ul>';

  document.getElementById('divCustomers').innerHTML = html;

  }

  </script>

  3. 页面展示

  <div id="divCustomers"></div>

  4. 最终Page Code

  <!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>Top Customers with Callback</title>

  </head>

  <body>

  <div id="divCustomers"></div>

  <script type="text/javascript">

  function onCustomerLoaded(result, methodName)

  {

  var html = '<ul>';

  for(var i = 0; i < result.length; i++)

  {

  html += '<li>' + result + '</li>';

  }

  html += '</ul>';

  document.getElementById('divCustomers').innerHTML = html;

  }

  </script>

  <script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction"></script>

  </body>

  </html>

  3) JSONP在JQuery中如何体现的

  1. $.getJSON

  <script>

  $(document).ready(function(){

  $.getJSON(http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?,

  function(data){

  $.each(data.items, function(i,item){

  $("<img/>").attr("src", item.media.m).appendTo("#images");

  if ( i == 3 ) return false;

  });

  });

  });

  </script>

  jsoncallback=?,其中?会自动替换为function(data)函数。

  2. $.ajax

  $.ajax({

  dataType: 'jsonp',

  data: 'id=10',

  jsonp: 'jsonp_callback',

  url: 'http://www.yiwuku.com/getdata',

  success: function () {

  // do stuff

  },

  });

  4) 如何在服务器端实现对JSON支持?

  这仅仅需要把服务的JSON数据转换成想要的script tags的形式就可以了,格式可以自已定义,毕竟这是个非官方的协议。

  可参考:Implement JSONP in your Asp.net Application

  注:Callback仅仅是JSONP的简单实现,可以根据具体需要实现更复杂的功能,比如可以在客户端动态集成更多的变量数据来完成分页功能。

 

什么是JSONP协议?

JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

很明显,JSONP是一种脚本注入(Script Injection)行为,需要特别注意其安全性。

在asp.net中实现简单的JSONP非常简单。我们需要两个页面,分别承担协议的客户端和服务器端角色。

假设我们有两个站点,http://www.baa.com.cn  http://www.bitauto.com

我们的客户端页面为 http://www.baa.com.cn/JSONPClient.aspx ;而我们的服务器端页面为http://www.bitauto.com/JSONPServer.aspx 

首先,我们来做客户端页面:

==========Javascript代码段1:JSONP客户端发送请求的方法=================

    function CallJSONPServer(url){                                 // 调用JSONP服务器,url为请求服务器地址
    
        var oldScript =document.getElementById(url);       // 如果页面中注册了调用的服务器,则重新调用
        if(oldScript){
        oldScript.setAttribute("src",url);
        return;
        }
        var script =document.createElement("script");       // 如果未注册该服务器,则注册并请求之
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src",url);
        script.setAttribute("id", url);
        document.appendChild(script);
    }
------------------END------------------------

===========Javascript代码段2:JSONP客户端对服务器开放的接口方法=======================

    function OnJSONPServerResponse(obj){
        alert(obj);
    }
------------------END------------------------

===========HTML代码段1:JSONP客户端向用户提供的UI===============

<input type="button" onclick="CallJSONPServer('http://www.bitauto.com/JSONPServer.aspx')" />
------------------END------------------------

至此,JSONP客户端完成,接下来我们做JSONP服务器端页面:

============C#代码段1:应答JSONP客户端请求================

    protected void Page_Load(object sender, EventArgs e)
    {
        Response.DisableKernelCache();
        Response.Cache.SetNoStore();
        Response.Write("OnJSONPServerResponse('" + DateTime.Now.ToString() + "');");
        Response.End();
    }
------------------END------------------------

OK,我们现在就完成了,您不妨自己实践一下。

 

posted @ 2013-02-18 16:15  一束光  阅读(928)  评论(0编辑  收藏  举报

友情链接

CFC4N