京东中关于jsonp的运用

最新推荐文章于 2021-09-17 20:41:22 发布
最新推荐文章于 2021-09-17 20:41:22 发布
阅读量293 收藏
点赞数
文章标签： json xhtml javascript ViewUI

以商品详情页为例：

文件头部出现很多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" οnclick="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，我们现在就完成了，您不妨自己实践一下。

 

weixin_33862993
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Python】京东抢购脚本
猫敷雪
02-14 1万+
此时验证 Ticket 有效后使用 pickle 库将程序会话中的 cookie 保存到本地以便下次使用。可以参考pyinstaller或者auto-py-to-exe用法。由于使用账号密码时有验证码限制，此处采用扫码登录方式绕过。编写脚本监听商品库存，一旦查询到货源便开始尝试自动下单。采用京东 WEB 端接口实现我们的脚本程序。进行抓包分析，找到几个有用接口.抢购成功增加微信通知。
问题解决：如何获取京东页面请求到的json中的商品数据（爬虫请求json，提取数据）
刘文刚的博客
04-10 2908
**问题介绍：**京东商品的部分信息是具备一定的反爬措施的，例如价格、评论相关信息的那个。那么我们要如何获得这部分数据呢？ **问题分析：**对于这部分数据，分析相关请求内容或json，能够找到对应的数据是存在json中的，我们只需要获得将json请求出来，再通过一些简单步骤即可获取json数据。当然是需要使用json库的。 解决步骤： 1.找到数据所在json 令书博客，具体可查看：京东反爬措施...
XSS结合JSONP获取网站访客社交账号信息
weixin_30265103的博客
04-29 1035
　　我在本地环境搭建了一个WordPress网站，并在该网站中植入JavaScript文件。如果访客在浏览网站时登录了百度账号，该js文件能够利用JSONP获取网站访客的百度账号信息。 具体情况如下： 1、首先修改WordPress的footer.php文件，引入2个外部JavaScript文件。第一个是jQuery库，第二个是jsonp代码。在实际渗透中，如果该网站存在存储型XSS漏洞，我们...
淘淘商城第104讲——jsonp的原理及两种实现方式
李阿昀的博客
06-15 5027
首先，说下什么是跨域？有以下两种方式的跨域： 域名不同 域名相同，端口不同 解决js的跨域问题可以使用jsonp。那接下来说下什么是jsonp？ jsonp不是新技术，它只是一种跨域的解决方案，使用js的特性绕过跨域请求，利用的特性便是js可以跨域加载js文件！！举个非常常见的例子，我们在html头部一般都会引入很多js，甚至我们直接引用在线的js，比如我们引用官方网站的jQuery路径加载进来也
简易jsonp建立介绍和利用允许跨域调用京东的某些商品接口
weixin_44649210的博客
09-17 215
jsonp使用原理 原理:引入资源不受同源策略的限制. 因为script标签支持跨域访问，所以我们可以创建script标签，src指向一个跨域文件。 那么，该跨域文件的响应内容，就变成script标签内的内容了。 所以，该内容也可以被理解成是正在被执行的js代码。 如果该代码中有一个正在被执行的函数，该函数中又有参数。 我们就可以把这个参数理解成服务器传给客户端的数据 (函数的调用)。 客户端去定义这个函数，我们就能够对参数做任意处理了 举个例子： 先建立一个js文件，此文件里面只写一个函数
JavaScript中模拟实现jsonp
10-24
主要介绍了JavaScript中模拟实现jsonp,本文直接给出实现代码,代码中包含详细注释,需要的朋友可以参考下
java中的JSONP使用实例详解
10-19
在JavaScript中，由于同源策略的限制，Ajax通常无法进行跨域请求，而JSONP提供了一种规避这种限制的方法。 在Java中，我们可以创建一个服务端接口来支持JSONP。例如，上面的代码片段展示了如何在Java中实现JSONP。...
AngularJS中的JSONP实例解析
01-19
 首先呢，Json和JSONP是不一样的哦。Json呢，是众多数据存储的其中一种格式，是数据书写方式的其中一种。好比是大中华众多诗体的一种(比如说是七言诗吧)。这种诗体规定了: 这种诗体要包含题目，每行诗句的字数(7个...
详解如何在Vue项目中发送jsonp请求
12-13
在页面a中由前端发送一个jsonp请求到客户方，得到一个token值 前端得到token值后向自己后端发送一个请求，后端根据token去redis(token的值就是redis里的key)里取值(key=token的值，value=用户信息等)判断用户是否已...
跨域请求京东接口
qq_26445509的博客
06-16 2330
我在跨域异步请求时踩到的坑，以及解决方法。
Jsonp 跨域访问
Zemo 学习笔记
02-10 3803
XMLHttpRequest cannot load http://xxx.xxx.com/xxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. 我们在使用ajax进行跨域访问的时候就经常看到类似上面的报错。 跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B
json与jsonp区别浅析（json才是目的，jsonp只是手段）
weixin_33856370的博客
03-23 1060
一言以蔽之，json返回的是一串数据；而jsonp返回的是脚本代码（包含一个函数调用）； JSON其实就是JavaScript中的一个对象，跟var obj={}在质上完全一样，只是在量上可以无限扩展。简单地讲，json其实就是JavaScript中的对象(Object)和数组(Array，其实也是对象)这倆好基友在那儿你嵌我我嵌你地套上n多层，以此模拟出许多复杂的数据结构。 json易于人阅...
nodejs京东接口分析系列-实现京东自动化功能 之 扫码登陆，需要puppeteer
能
05-10 5131
最近想要实现一个京东扫码登陆和自动下单，自动抢购的功能（ps:实现京东自动化功能）， ！！！本项目纯属学习性质，禁止商业用途 给大家分享一下我是如何一步步通过分析京东的网站请求，查看京东网站的源代码去找到对应的接口和参数 爬虫必备，准备好接口的基础headers头部信息,下面所有接口请求需要在头部传入这些参数，以表示你是个正常用户~ let header = { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) Ap
爬取京东的一些思路
困难是否磨灭你的自信
01-02 8597
简介在之前的一个爬取知乎问题和答案的项目中遇到了许许多多的问题，写下此篇文章作为总结和回顾项目文章 http://blog.csdn.net/sinat_34200786/article/details/78770356项目地址 https://github.com/Dengqlbq/JDSpider
爬虫 京东登录协议分析
embzheng的专栏
05-12 3732
最近在研究京东登录的协议，这里简单记录下分析过程 京东登录的流程可分解如下： 请求登录界面（url是京东-欢迎登录 (jd.com)） 输入用户名密码 点击登录 滑块验证码验证 登录成功 协议报文分析用Fiddler抓包，这里直接从最后一步登录作为切入点 登录请求 从抓包中可以明显发现登录的请求url是：https://passport.jd.com/uc/loginService 请求的报文如下 一个个字段来看看： uuid：可以在登录页面请求中得到 r：是一个时间戳，写
在vue中使用JSONP
最新发布
08-17
在Vue中使用JSONP，首先需要安装JSONP插件。可以在package.json文件的dependencies中添加"jsonp":"^0.2.1"来安装JSONP插件。安装完成后，可以在Vue组件中使用二次封装的JSONP函数来发送跨域请求。 在.vue文件中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值