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的介绍及使用

  • 相关阅读:
    关于DOS的常用操作
    <leetcode 第188场周赛>
    大挑战!状压dp!
    41. 缺失的第一个正数
    1095. 山脉数组中查找目标值 (二分查找)
    “人活着就是为了贪心”——贪心算法日
    二分查找
    2020.4.25 leetcode 编程战队赛
    <leetcode c++>221. 最大正方形
    <leetcode c++>面试题51. 数组中的逆序对
  • 原文地址:https://www.cnblogs.com/liangping/p/12036209.html
Copyright © 2011-2022 走看看