js-转载-《jsonp跨域请求，原理及应用》

最新推荐文章于 2023-07-22 23:27:32 发布
最新推荐文章于 2023-07-22 23:27:32 发布
阅读量147 收藏
点赞数
文章标签： js jsonp jquery jsonp

原文地址：https://www.cnblogs.com/chiangchou/p/jsonp.html
作者：bojiangzhou
出处：http://www.cnblogs.com/chiangchou/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。
浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。
如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。
如果要在js里发起跨域请求，则要进行一些特殊处理了。或者，你可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。

这里讲下使用jquery的jsonp如何发起跨域请求及其原理。

先看下准备环境：两个端口不一样，构成跨域请求的条件。
获取数据：获取数据的端口为9090

在这里插入图片描述

请求数据：请求数据的端口为8080

在这里插入图片描述

1、先看下直接发起ajax请求会怎么样
下面是发起请求端的代码：

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        $(document).ready(function () {
            
            $("#btn").click(function () {
                $.ajax({
                    url: 'http://localhost:9090/student',
                    type: 'GET',
                    success: function (data) {
                        $(text).val(data);
                    }
                });

            });
            
        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

请求的结果如下图：可以看到跨域请求因为浏览器的同源策略被拦截了。

在这里插入图片描述

2、接下来看如何发起跨域请求。解决跨域请求的方式有很多，这里只说一下jquery的jsop方式及其原理。
首先我们需要明白，在页面上直接发起一个跨域的ajax请求是不可以的，但是，在页面上引入不同域上的js脚本却是可以的，就像你可以在自己的页面上使用 标签来随意显示某个域上的图片一样。
比如我在8080端口的页面上请求一个9090端口的图片：可以看到直接通过src跨域请求是可以的。

在这里插入图片描述

3、那么看下如何使用

服务端：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    //数据
    List<Student> studentList = getStudentList();


    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();

    //前端传过来的回调函数名称
    String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";

    response.getWriter().write(result);
}

结果：

在这里插入图片描述

4、再来看jquery的jsonp方式跨域请求：
服务端代码不变，js代码如下：最简单的方式，只需配置一个dataType:‘jsonp’，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。
这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>

        $(document).ready(function () {

            $("#btn").click(function () {

                $.ajax({
                    url: "http://localhost:9090/student",
                    type: "GET",
                    dataType: "jsonp", //指定服务器返回的数据类型
                    success: function (data) {
                        var result = JSON.stringify(data); //json对象转成字符串
                        $("#text").val(result);
                    }
                });

            });

        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>

效果：

在这里插入图片描述

再看看如何指定特定的回调函数：第30行代码
　　回调函数你可以写到

效果图：
在这里插入图片描述

在这里插入图片描述

再看看如何改变callback这个名称：第23行代码
　　指定callback这个名称后，后台也需要跟着更改。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>

        function showData (data) {
            console.info("调用showData");

            var result = JSON.stringify(data);
            $("#text").val(result);
        }

        $(document).ready(function () {

            $("#btn").click(function () {

                $.ajax({
                    url: "http://localhost:9090/student",
                    type: "GET",
                    dataType: "jsonp",  //指定服务器返回的数据类型
                    jsonp: "theFunction",   //指定参数名称
                    jsonpCallback: "showData",  //指定回调函数名称
                    success: function (data) {
                        console.info("调用success");
                    }
                });
            });

        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>

后台代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    //数据
    List<Student> studentList = getStudentList();


    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();

    //前端传过来的回调函数名称
    String callback = request.getParameter("theFunction");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";

    response.getWriter().write(result);
}

效果图：
在这里插入图片描述

最后看看jsonp是否支持POST方式：ajax请求指定POST方式
　　可以看到，jsonp方式不支持POST方式跨域请求，就算指定成POST方式，会自动转为GET方式；而后端如果设置成POST方式了，那就请求不了了。
　　jsonp的实现方式其实就是

效果图：
在这里插入图片描述

在这里插入图片描述

再补充一点，回到第一条：CORS头缺少“Access-Control-Allow-Origin”。
　　有时候你会发现其它都没问题，出现这个错误：这个错误代表服务端拒绝跨域访问。如果出现这个错误，就需要在服务端设置允许跨域请求。
　　response.setHeader(“Access-Control-Allow-Origin”, “*”); 设置允许任何域名跨域访问

在这里插入图片描述

设置可以跨域访问：第6行代码或第8行代码，设置其中一个即可。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    // * 表示允许任何域名跨域访问
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 指定特定域名可以访问
    response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");

    //数据
    List<Student> studentList = getStudentList();

    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();

    //前端传过来的回调函数名称
    String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";

    response.getWriter().write(result);
}

总结：jQuery ajax方式以jsonp类型发起跨域请求，其原理跟<script>脚本请求一样，因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要服务端配合，设置callback，才能完成跨域请求。

zdj5495
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax访问后台500 (Internal Server Error)问题
tracymcgrady1314的博客
11-09 1万+
ajax访问后台action，页面报POST http://localhost:8080/group/queryRefundOrders.do 500 (Internal Server Error)问题 后台控制台没有报错，使用的google浏览器报上面错误，检查发现js代码没有问题，并且后台代码也没有问题。接收mybaties 返回的数据RefundOrderVO也实现了Serializabl
vue-resource中的jsonp跨域请求
ZZY1078689276的专栏
11-03 4064
文章目录jsonp的用法jsonp跨域原理示例源码运行结果分析 jsonp的用法   jsonp请求主要是用来解决ajax跨域请求问题，使用jsonp实现跨域首先要保证服务器api支持jsonp请求的格式。   写法格式： this.$http.jsonp('url',[可选参数，使用{}传参]).then(成功回调函数，失败回调函数); jsonp跨域原理   由于当前页面所在的域名为http...
js----jsonp跨域及原理
Crazy_LinkFern的博客
04-14 163
原理 jsonp的原理就是利用标签的src可绕过同源限制，跨域请求。img,script,这种标签如果有相应的src，那么便会发起一个htttp请求来请求相应的资源,如果有script标签对应的路径是一个js文件，那么在下载完毕这个js之后会马上执行。 缺点 只能发送get请求。因为script只能发送get请求 需要后台配合。此种请求方式应该前后端配合，将返回结果包装成callb...
JavaScript学习 -- jsonp跨域请求
weixin_41489908的博客
07-22 1197
JSONP 是一个使用非常广泛的跨域请求技术。通过简单的回调的方式，能方便地实现从不同域名的服务端动态地获得 JSON 数据。虽然使用起来比较方便，但也存在某些限制。JSONP 体现了一种传统 JavaScript 方式，如果不需要传输敏感数据或处理安全要求比较高的场景，我们仍然可以使用此技术。
Ajax解决跨域--jQuery发送jsonp请求
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-27 655
1. jQuery发送jsonp请求 需求 在"点击发送 jsonp 请求"后，将服务器返回的响应体渲染到窗口中。 ajaxDemo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
vue解决跨域问题- vue-jsonp
a_靖的博客
03-01 2805
vue解决跨域问题- vue-jsonp
JSONP跨域请求原理解析
shao_xuan_的博客
12-15 1172
JSONP跨域请求原理解析什么是同源策略什么是JSONP 什么是同源策略 同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。 简单来讲，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面。当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。 什么是JSONP JSONP是J
JSONP跨域请求原理及优缺点
热门推荐
杜小白的博客
04-13 1万+
一、JSONP与JSON的区别：    JSONP  是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON  数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。    JSONP  和 JSON  的区别： JSON  是一种传输格式，而 JS...
JSONP跨域的原理
weixin_44286392的博客
10-25 2324
JSONP跨域请求
jsonp跨域请求原理
Kaizd的博客
01-02 306
jsonp跨域请求原理 今天咱们讲讲jsonp跨域请求原理吧！ 在进行网站开发的过程中经常会用到第三方的数据，但是由于同源策略的限制导致ajax不能发送请求，因此也无法获得数据。解决ajax的跨域问题有两种方法： 一、jsonp 二、XMLHttpRequest2中可以配合服务端来解决，在响应头中加入Access-Control-Allow-Origin:* 1、同源： 同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口号完全相同 　　1.1目的：保护用户信息安全 　　1.2限制：cookie、
使用webpack-dev-server处理跨域请求的方法
08-27
使用webpack-dev-server处理跨域请求的方法 在前端开发中，跨域请求一直是一个棘手的问题。跨域请求是指从一个域名下的网页去请求另一个域名下的资源，而这种请求会被浏览器的同源策略所阻止。常见的解决方法包括...
Vue2.0 vue-source jsonp 跨域请求
12-10
本文介绍了Vue2.0 vue-source jsonp 跨域请求，分享给大家，希望对大家有所帮助 以调用百度的输入提示接口为例 main.js import Vue from 'vue' import VueResouse from 'vue-resource' import App from './App....
原生js实现ajax请求和JSONP跨域请求操作示例
10-15
主要介绍了原生js实现ajax请求和JSONP跨域请求操作,结合实例形式分析了基于原生js实现的ajax请求和JSONP跨域请求相关操作技巧与使用注意事项,需要的朋友可以参考下
JavaScript用JSONP跨域请求数据实例详解
10-20
Javascript跨域访问是web开发者经常遇到的问题，什么是跨域，就是一个域上加载的脚本获取或操作另一个域上...下面这篇文章主要介绍了JavaScript用JSONP跨域请求数据的方法,需要的朋友可以参考借鉴，下面来一起看看吧。
使用jquery的jsonp如何发起跨域请求及其原理详解
10-19
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过JavaScript callback...下面这篇文章主要给大家介绍了关于使用jquery的jsonp如何发起跨域请求及其原理的相关资料，需要的朋友可以参考下。
分布式电网动态电压恢复器模拟装置设计与实现.doc
最新发布
07-06
本装置采用DC-AC及AC-DC-AC双重结构，前级采用功率因数校正（PFC）电路完成AC-DC变换，改善输入端电网电能质量。后级采用单相全桥逆变加变压器输出的拓扑结构，输出功率50W。整个系统以TI公司的浮点数字信号控制器TMS320F28335为控制电路核心，采用规则采样法和DSP片内ePWM模块功能实现SPWM波，采用DSP片内12位A/D对各模拟信号进行采集检测，简化了系统设计和成本。本装置具有良好的数字显示功能，采用CPLD自行设计驱动的4.3英寸彩色液晶TFT-LCD非常直观地完成了输出信号波形、频谱特性的在线实时显示，以及输入电压、电流、功率，输出电压、电流、功率，效率，频率，相位差，失真度参数的正确显示。本装置具有开机自检、输入电压欠压及输出过流保护，在过流、欠压故障排除后能自动恢复。
【无人机通信】基于matlab Stackelberg算法无人机边缘计算抗干扰信道分配【含Matlab源码 4957期】.mp4
07-06
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
电网公司数字化转型规划与实践两个文件.pptx
07-05
电网公司数字化转型规划与实践两个文件.pptx
React Native Ruby 前后端分离系统案例介绍文档
07-06
React Native Ruby 前后端分离系统案例介绍文档
ajax jsonp跨域请求
09-11
Ajax JSONP（JSON with Padding）是一种允许跨域请求的技术。在同源策略的限制下，浏览器要求请求和响应的域名、协议和端口号必须一致。而通过使用JSONP，可以绕过这种限制。 JSONP利用了<script>标签不受同源策略限制的特点。它通过动态创建<script>标签，将请求发送到目标服务器上的一个特定的URL，该URL返回一个回调函数的调用，将数据作为参数传递给回调函数。 下面是一个使用Ajax JSONP跨域请求的示例： ```javascript function handleResponse(data) { // 处理返回的数据 } var script = document.createElement('script'); script.src = 'http://example.com/api?callback=handleResponse'; document.body.appendChild(script); ``` 在上面的示例中，我们动态创建了一个<script>标签，并设置其src属性为目标服务器上的API地址，同时指定了一个名为`handleResponse`的回调函数。当服务器返回响应时，会调用这个回调函数，并将数据作为参数传递进去。 需要注意的是，在使用JSONP时，服务端需要支持JSONP格式的响应。通常情况下，服务端会根据请求中携带的`callback`参数来动态生成响应内容。 希望这个示例能帮助你理解Ajax JSONP跨域请求的基本原理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值