跨域：JSONP

最新推荐文章于 2024-06-20 20:55:24 发布

白小宇

最新推荐文章于 2024-06-20 20:55:24 发布

阅读量228

点赞数

分类专栏： web前端 jQuery JavaScript

本文链接：https://blog.csdn.net/b954960630/article/details/79301413

版权

web前端同时被 3 个专栏收录

121 篇文章 4 订阅

订阅专栏

JavaScript

48 篇文章 0 订阅

订阅专栏

jQuery

10 篇文章 0 订阅

订阅专栏

一、简介

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

原理：
由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的< script> 元素是一个例外。利用 < script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。

用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

实现步骤：

首先是利用script标签的src属性来实现跨域。
通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回
实现服务器端向客户端通信。
由于使用script标签的src属性，因此只支持get方法

二、实例讲解

如客户想访问 :
http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction
假设客户期望返回JSON数据：[“customername1”,”customername2”]。

真正返回到客户端的数据显示为:
callbackFunction([“customername1”,”customername2”])。

1、JavaScript使用 JSONP

客户端页面完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实例</title>
    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
</head>
<body>
    <div id="divCustomers"></div>
    <script type="text/javascript">
     // 后端返回直接执行的方法，相当于执行这个方法，由于后端把返回的数据放在方法的参数里，所以这里能拿到result和methodName两个参数
        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="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

服务端jsonp.php文件完整代码：

<?php
//header('Content-type: application/json');

//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);

//json数据
$json_data = '["customername1","customername2"]';

//后端返回一个直接执行的方法给前端，由于前端是用script标签发起的请求，所以返回了这个方法后相当于立马执行，并且把要返回的数据放在方法的参数里。
echo $jsoncallback . "(" . $json_data . ")";
?>

执行结果：
这里写图片描述

2、jQuery 使用 JSONP

客户端页面完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("http://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>

服务端jsonp.php文件完整代码：
和上面js的一样

三、Ajax 和Jsonp的区别

1、Ajax工作原理
相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。

对于用户请求ajax引擎会做一些数据验证和数据处理，不是所有请求都提交给服务器，当需要从服务器读取新数据时由Ajax引擎代为向服务器提交请求。AJAX最大优点就是不刷新整个页面的前提下与服务器通信维护数据。
2、Jsonp工作原理
动态创建一个script标签，利用script标签src属性访问没有限制，实现跨域。
web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json)，服务器动态生成json文件把客户端需要的数据装入进去。
允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据这样客户端就可以随意定制自己的函数来自动处理返回数据。
3、Ajax 和 Jsonp的区别
（1）ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
（2）实质不同：
　ajax的核心是通过xmlHttpRequest获取非本页内容
　jsonp的核心是动态添加script标签调用服务器提供的js脚本（后缀.json)
（3）区别联系：
　不在于是否跨域
　ajax通过服务端代理一样跨域；
　jsonp也不并不排斥同域的数据的获取
（4）jsonp是一种方式或者说非强制性的协议；
　ajax也不一定非要用json格式来传递数据　
（5）jsonp只支持get请求，ajax支持get和post请求

白小宇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域：JSONP

一、简介JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。原理：由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的&amp;amp;amp;lt; script&amp;amp;amp;gt; 元素是一个例外。利用 &amp;amp;amp;lt; script&amp;amp;amp;gt;
复制链接

扫一扫

专栏目录