zoukankan      html  css  js  c++  java
  • jsonp的介绍及使用

    Jsonp

    今天写爬虫抓取上海科创板数据时发现其接口是通过Jsonp来获取的,于是对此进行了下了解。

    什么是Jsonp

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取。

    Jsonp跨域的原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码。

    实例

    我们要跨域请求某个服务器上的数据:

    { "name":"Bill Gates", "age":62, "city":"Seattle" }
    

    为了方便举例实现,我在可用的服务器上放置了一个静态文件,其内容为:

    foo({ "name":"Bill Gates", "age":62, "city":"Seattle" });
    

    然后,我写了一个简单的html进行测试,使用ajax 获取jsonp数据实现数据的跨域请求:

    <html>
    <head>
    	<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <div>
    	<button onclick="self_test()">test</button>
    </div>
    
    <script>
    	function foo(data) {
    		console.log(data)
    	}
    
    	function self_test() {
    		$.ajax({
    			type: "get",
    			url: 'http://d.epmap.org/static/test.txt?callback=?',
    			dataType: "jsonp",
    			success: function(data) {
    			}
    		})
    	}
    </script>
    </html>
    

    打开测试html页面,打开调试工具,然后点击test按钮,可以看到如下结果:


    参考:jquery ajax jsonp
    github jsonp的介绍及使用

  • 相关阅读:
    排序算法比较
    直接选择排序
    静态查找表和动态查找表
    memset函数
    二叉树
    使用vue+Element的Upload+formData实现图片传到SpringBoot,再上传到fastdfs
    vue中的export与export default的区别
    人人开源
    SpringBoot注解
    大厂薪资
  • 原文地址:https://www.cnblogs.com/liangping/p/12036209.html
Copyright © 2011-2022 走看看