jsonp理解及使用

最新推荐文章于 2023-05-30 10:48:41 发布

tuantuan_yf

最新推荐文章于 2023-05-30 10:48:41 发布

阅读量283

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/tuantaun_/article/details/97761606

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：Jsonp是用来解决跨域问题的古老方法，而跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源(同源策略），典型的例子如iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。

Jsonp是什么？

Jsonp即JSON with Padding，顾名思义那就是把JSON填充到一个盒子里（jsonp通过在服务端用一个回调函数把数据一起包裹起来并返回给客户端），它的基本思想是，网页通过添加一个script元素，向服务器请求JSON数据，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。这种做法不受同源政策限制。
？为什么是添加script
Script中的src属性是不受同源策略影响的。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的script 元素是一个例外。
Jsonp的实现原理？（需要目标服务器配合一个callback函数）
script标签是不受同源策略影响的，它可以引入来自任何地方的js文件。利用 script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。
jsonp的原理就是，在客户端和服务端定义一个callback（回调函数），当客户端发起一个请求时，服务端返回一段javascript代码，其中调用了在客户端定义的callback（回调函数），并将相应的数据作为参数传入该函数，返回给客户端。利用script标签没有跨域限制的“漏洞”，通过javascript callback的形式实现跨域访问。

Jsonp和Json的区别？

1.json是一种轻量级的数据交换格式，用于描述复杂的数据，被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输
2.jsonp是一种跨域数据交互协议。为了保证用户访问的安全，现代浏览器使用了同源策略，即不允许访问非同源的页面，在ajax中，不允许请求非同源的URL，JSONP就是用来解决跨域请求问题的

Jsonp应用（代码）

如客户想访问 : https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
假设客户期望返回数据：[“customername1”,“customername2”]。
真正返回到客户端的数据显示为: callbackFunction([“customername1”,“customername2”])。
php代码

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

Js方案

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)//服务端利用回调函数
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    //包裹数据
    document.getElementById('divCustomers').innerHTML = html;
    //传给客户端，客户端处理回调函数
}
</script>
<script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
<!-- 通过src属性来调用服务端返回的回调函数-->
</body>
</html>

JQuery方案:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) { 
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});
</script>
</body>
</html>