您当前的位置:HTML5培训 > 前端开发 > JS

JSONP跨域原理及淘宝商品查询的实现

来源:移动互联培训 2017-11-23

安全的同源策略

出于安全及数据保护考虑,浏览器中有“同源策略”这么个概念。同源策略不允许用一个域上的脚本代码去获取或操作另一个域上的数据,比如AJAX你在请求数据时,如果数据处理域和当前访问域不同,是无法正常执行的。比如www.my.com下的一个页面使用AJAX的方式访问www.your.com.cn/c.php页面,是行不通的,浏览器不允许这种操作套路存在。

JSONP就是用来解决跨域问题的,你可以跨到提供JSONP机制数据的各大平台,包括淘宝这样的网站;

下面我们来看下他的基本原理及具体实现方式;

JSONP的基本原理

AJAX请求受同源策略影响,不允许跨域,然而script标签src属性中的引用地址却可以访问其它域下的JS文件,比如我们在使用jQuery时,就可以使用如下文件地址:https://cdn.bootcss.com/jquery/3.2.1/jquery.js。这么一来,Server上的数据处理程序可以不返回JSON格式的数据,而是返回调用一个函数的js代码,这样就可以实现跨域。

如果两个域都是自己可配置的,用JSONP操作起来比较简单,只要返回的函数和调用域的JS函数名称一致就可以了。那么我们如何通过跨域去获取淘宝网站商品数据那?请看例子!

淘宝商品查询具体实现

首先我们需要一个可以操作的简单页面;

代码如下:

JS文件里面使用JSONP跨域去淘宝获取商品数据;

JSONP的方式去获取数据,淘宝网站返回的不是JSON格式的数据,而是返回了一段将JSON数据作为传入参数的函数执行代码;

其中打印到控制台的数据就是JSON格式的商品数据,只要我们能拿到数据,那么如何处理数据就不是问题了,JS处理起来比较简单;

如果我们自己提供这种JSONP方式的数据,代码应该怎么写那?请参考如下代码;

400-611-6270

Copyright ©2004-2018 华清远见教育科技集团 版权所有
京ICP备16055225号,京公海网安备11010802025203号