0%

jsonp

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

一、介绍

      JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于server1.example.com的网页无法与不是server1.example.com的服务器沟通,而HTML<script>元素是一个例外。利用<script>元素的这个开放策略,网页可以得到从其他来源动态产生的JSON资料,而这种使用模式就是所谓的JSONP。用JSONP抓到的资料并不是JSON,而是任意的JavaScript,用JavaScript直译器执行而不是用JSON解析器解析。

二、使用

  1. index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsonp</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<script type="text/javascript">
$(function(){
// 方式一
// $.ajax({
// url:"index.php",//将要请求的方式
// type:'get',
// data:"",
// dataType:'jsonp',
// jsonp: "callback",
// contentType: "application/json",//contentTy类型
// jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称
// success: function(data) {
// alert(data);
// },
// error: function() {
// alert(0);
// }
// });
});
// 方式二步骤1
function flightHandler(data) {
alert(data);
}
</script>
<!-- 方式二步骤2 -->
<script src="index.php?callback=flightHandler"></script>
<body>
<div id="showcontent">Result:</div>
</body>
</html>
  1. index.php
1
2
3
$call = $_GET['callback'];
$data = '["111","222"]';
echo $call."(" . $data . ")";