jQuery jsonp跨域请求

最新推荐文章于 2023-08-22 16:44:46 发布
最新推荐文章于 2023-08-22 16:44:46 发布
阅读量90 收藏
点赞数
分类专栏： 前端

jQuery jsonp跨域请求

 

跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。

浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。

如果要在js里发起跨域请求，则要进行一些特殊处理了。或者，你可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。

 

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

 

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

获取数据：获取数据的端口为9090

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

 

1、先看下直接发起ajax请求会怎么样

下面是发起请求端的代码：

复制代码

 1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
 2 <html>
 3 <head>
 4     <title>跨域测试</title>
 5     <script src="js/jquery-1.7.2.js"></script>
 6     <script>
 7         $(document).ready(function () {
 8             
 9             $("#btn").click(function () {
10                 $.ajax({
11                     url: 'http://localhost:9090/student',
12                     type: 'GET',
13                     success: function (data) {
14                         $(text).val(data);
15                     }
16                 });
17 
18             });
19             
20         });
21     </script>
22 </head>
23 <body>
24     <input id="btn" type="button" value="跨域获取数据" />
25     <textarea id="text" style="width: 400px; height: 100px;"></textarea>
26 </body>
27 </html>

复制代码

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

 

2、接下来看如何发起跨域请求。解决跨域请求的方式有很多，这里只说一下jquery的jsop方式及其原理。

首先我们需要明白，在页面上直接发起一个跨域的ajax请求是不可以的，但是，在页面上引入不同域上的js脚本却是可以的，就像你可以在自己的页面上使用<img src=""> 标签来随意显示某个域上的图片一样。

比如我在8080端口的页面上请求一个9090端口的图片：可以看到直接通过src跨域请求是可以的。

 

3、那么看下如何使用<script src="">来完成一个跨域请求：

　　当点击"跨域获取数据"的按钮时，添加一个<script>标签，用于发起跨域请求；注意看请求地址后面带了一个callback=showData的参数；

　　showData即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。

　　至此，我们算是跨域把数据请求回来了，但是比较麻烦，需要自己写脚本发起请求，然后写个回调函数处理数据，不是很方便。

复制代码

 1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
 2 <html>
 3 <head>
 4     <title>跨域测试</title>
 5     <script src="js/jquery-1.7.2.js"></script>
 6     <script>
 7         //回调函数
 8         function showData (result) {
 9             var data = JSON.stringify(result); //json对象转成字符串
10             $("#text").val(data);
11         }
12 
13         $(document).ready(function () {
14 
15             $("#btn").click(function () {
16                 //向头部输入一个脚本，该脚本发起一个跨域请求
17                 $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
18             });
19 
20         });
21     </script>
22 </head>
23 <body>
24     <input id="btn" type="button" value="跨域获取数据" />
25     <textarea id="text" style="width: 400px; height: 100px;"></textarea>
26 
27 </body>
28 </html>

复制代码

服务端：

复制代码

 1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2     response.setCharacterEncoding("UTF-8");
 3     response.setContentType("text/html;charset=UTF-8");
 4 
 5     //数据
 6     List<Student> studentList = getStudentList();
 7 
 8 
 9     JSONArray jsonArray = JSONArray.fromObject(studentList);
10     String result = jsonArray.toString();
11 
12     //前端传过来的回调函数名称
13     String callback = request.getParameter("callback");
14     //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
15     result = callback + "(" + result + ")";
16 
17     response.getWriter().write(result);
18 }

复制代码

结果：

 

4、再来看jquery的jsonp方式跨域请求：

服务端代码不变，js代码如下：最简单的方式，只需配置一个dataType:'jsonp'，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。

这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数。

复制代码

 1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
 2 <html>
 3 <head>
 4     <title>跨域测试</title>
 5     <script src="js/jquery-1.7.2.js"></script>
 6     <script>
 7 
 8         $(document).ready(function () {
 9 
10             $("#btn").click(function () {
11 
12                 $.ajax({
13                     url: "http://localhost:9090/student",
14                     type: "GET",
15                     dataType: "jsonp", //指定服务器返回的数据类型
16                     success: function (data) {
17                         var result = JSON.stringify(data); //json对象转成字符串
18                         $("#text").val(result);
19                     }
20                 });
21 
22             });
23 
24         });
25     </script>
26 </head>
27 <body>
28     <input id="btn" type="button" value="跨域获取数据" />
29     <textarea id="text" style="width: 400px; height: 100px;"></textarea>
30 
31 </body>
32 </html>

复制代码

效果：

 

再看看如何指定特定的回调函数：第30行代码

　　回调函数你可以写到<script>下(默认属于window对象)，或者指明写到window对象里，看jquery源码，可以看到jsonp调用回调函数时，是调用的window.callback。

　　然后看调用结果，发现，请求时带的参数是：callback=showData；调用回调函数的时候，先调用了指定的showData，然后再调用了success。所以，success是返回成功后必定会调用的函数，就看你怎么写了。

复制代码

 1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
 2 <html>
 3 <head>
 4     <title>跨域测试</title>
 5     <script src="js/jquery-1.7.2.js"></script>
 6     <script>
 7 
 8         function showData (data) {
 9             console.info("调用showData");
10 
11             var result = JSON.stringify(data);
12             $("#text").val(result);
13         }
14 
15         $(document).ready(function () {
16 
17 //            window.showData = function  (data) {
18 //                console.info("调用showData");
19 //
20 //                var result = JSON.stringify(data);
21 //                $("#text").val(result);
22 //            }
23 
24             $("#btn").click(function () {
25 
26                 $.ajax({
27                     url: "http://localhost:9090/student",
28                     type: "GET",
29                     dataType: "jsonp",  //指定服务器返回的数据类型
30                     jsonpCallback: "showData",  //指定回调函数名称
31                     success: function (data) {
32                         console.info("调用success");
33                     }
34                 });
35             });
36 
37         });
38     </script>
39 </head>
40 <body>
41     <input id="btn" type="button" value="跨域获取数据" />
42     <textarea id="text" style="width: 400px; height: 100px;"></textarea>
43 
44 </body>
45 </html>

复制代码

效果图：

 

再看看如何改变callback这个名称：第23行代码

　　指定callback这个名称后，后台也需要跟着更改。

复制代码

 1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
 2 <html>
 3 <head>
 4     <title>跨域测试</title>
 5     <script src="js/jquery-1.7.2.js"></script>
 6     <script>
 7 
 8         function showData (data) {
 9             console.info("调用showData");
10 
11             var result = JSON.stringify(data);
12             $("#text").val(result);
13         }
14 
15         $(document).ready(function () {
16 
17             $("#btn").click(function () {
18 
19                 $.ajax({
20                     url: "http://localhost:9090/student",
21                     type: "GET",
22                     dataType: "jsonp",  //指定服务器返回的数据类型
23                     jsonp: "theFunction",   //指定参数名称
24                     jsonpCallback: "showData",  //指定回调函数名称
25                     success: function (data) {
26                         console.info("调用success");
27                     }
28                 });
29             });
30 
31         });
32     </script>
33 </head>
34 <body>
35     <input id="btn" type="button" value="跨域获取数据" />
36     <textarea id="text" style="width: 400px; height: 100px;"></textarea>
37 
38 </body>
39 </html>

复制代码

后台代码：

复制代码

 1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2     response.setCharacterEncoding("UTF-8");
 3     response.setContentType("text/html;charset=UTF-8");
 4 
 5     //数据
 6     List<Student> studentList = getStudentList();
 7 
 8 
 9     JSONArray jsonArray = JSONArray.fromObject(studentList);
10     String result = jsonArray.toString();
11 
12     //前端传过来的回调函数名称
13     String callback = request.getParameter("theFunction");
14     //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
15     result = callback + "(" + result + ")";
16 
17     response.getWriter().write(result);
18 }

复制代码

效果图：

 

最后看看jsonp是否支持POST方式：ajax请求指定POST方式

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

　　jsonp的实现方式其实就是<script>脚本请求地址的方式一样，只是ajax的jsonp对其做了封装，所以可想而知，jsonp是不支持POST方式的。

复制代码

 1 <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
 2 <html>
 3 <head>
 4     <title>跨域测试</title>
 5     <script src="js/jquery-1.7.2.js"></script>
 6     <script>
 7 
 8         $(document).ready(function () {
 9 
10             $("#btn").click(function () {
11 
12                 $.ajax({
13                     url: "http://localhost:9090/student",
14                     type: "POST",   //post请求方式
15                     dataType: "jsonp",
16                     jsonp: "callback",
17                     success: function (data) {
18                         var result = JSON.stringify(data);
19                         $("#text").val(result);
20                     }
21                 });
22             });
23 
24         });
25     </script>
26 </head>
27 <body>
28     <input id="btn" type="button" value="跨域获取数据" />
29     <textarea id="text" style="width: 400px; height: 100px;"></textarea>
30 </body>
31 </html>

复制代码

效果图：

 

再补充一点，回到第一条：CORS头缺少“Access-Control-Allow-Origin”。

　　有时候你会发现其它都没问题，出现这个错误：这个错误代表服务端拒绝跨域访问。如果出现这个错误，就需要在服务端设置允许跨域请求。

　　response.setHeader("Access-Control-Allow-Origin", "*"); 设置允许任何域名跨域访问

 

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

复制代码

 1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2     response.setCharacterEncoding("UTF-8");
 3     response.setContentType("text/html;charset=UTF-8");
 4 
 5     // * 表示允许任何域名跨域访问
 6     response.setHeader("Access-Control-Allow-Origin", "*");
 7     // 指定特定域名可以访问
 8     response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");
 9 
10     //数据
11     List<Student> studentList = getStudentList();
12 
13     JSONArray jsonArray = JSONArray.fromObject(studentList);
14     String result = jsonArray.toString();
15 
16     //前端传过来的回调函数名称
17     String callback = request.getParameter("callback");
18     //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
19     result = callback + "(" + result + ")";
20 
21     response.getWriter().write(result);
22 }

复制代码

 

 

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

amyloverice
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中jsonp的原理
一只大海
02-27 701
在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，即一般的 ajax是不能进行跨域请求的。但 img、iframe 、script等标签是个例外，这些标签可以通过 src属性请求到其他服务器上的数据。利用 script标签的开放策略，我们可以实现跨域请求数据，当然这需要服务器端的配合。 Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容，而jsonp...
jQuery使用之（三）
maoye的博客
10-30 394
jQuery 的插件   一，jQuery UI   jQuery官网：https://jqueryui.com/ jQuery中文网：http://www.jqueryui.org.cn/ jQuery学习网：http://www.runoob.com/jqueryui/jqueryui-use.html   下面是一个对话框的应用例子：   &lt;!DOCTYPE ht...
jQuery基础
ac果的博客
08-22 2649
jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、 制作动画效果、事件处理、使用 Ajax 以及其他功能。$(“.class 属性值”);jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。7.通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象。5.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象。6.通过 JQuery 包装的 Dom 对象，也是 JQuery 对象。
jQuery jsonp跨域原理
┟枫※殇§的专栏
10-21 745
实际上单jQuery还是实现不了跨域加载数据的，由于XMLHttpRequest的安全设置，是不允许直接跨域的。jQuery的jsonp虽然能跨域，但是还得请求的页面支持才行，如果请求的页面不理会jQuery发送的参数，是无法跨域的，实际上来说是获取不到输出的页面内容。 　　jQuery jsonp跨域原理实际就是使用script标签加载配置对象中的跨域url，再使用script标签加载之前
轻松搞定jQuery+JSONP跨域请求的解决方案
10-18
了解了jsonp之后，大家应该也都明白了，jsonp主要就是用来实现跨域的获取数据，今天我们就来详细探讨下如何在实际中应用jsonp实现跨域
使用jquery的jsonp如何发起跨域请求及其原理详解
10-19
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过JavaScript callback...下面这篇文章主要给大家介绍了关于使用jquery的jsonp如何发起跨域请求及其原理的相关资料，需要的朋友可以参考下。
AJax与Jsonp跨域访问问题小结
10-23
本文给大家汇总介绍了JavaScript的AJax，JQuery的AJax以及利用jsonp实现跨域访问的问题，非常的细致全面，有需要的小伙伴可以参考下。
JSONP和JQuery实现跨域
十二的博客
03-11 156
test
jquery $.get() $.post 跨域请求cors解决方法
静下心来写代码
11-13 4732
解决办法：再请求的phpheader("Access-Control-Allow-Origin:*");
jsonp原理详解——终于搞清楚jsonp是啥了
学Java，找哪吒
07-14 1万+
一、JSONP的由来 1、Ajax直接请求普通文件存在跨域无权限访问的问题，不管是静态页面、动态页面、web服务，只要是跨域请求，一律不准。 2、不过我们发现，web页面调用js文件则不受跨域的影响（不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>）。 3、于是可以判断，当前阶段如果想通过纯web端跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用
Jquery AJAX 跨域POST 请求
热门推荐
liuhai的博客
06-10 1万+
项目中遇到了要使用跨域的post请求，在IE10以下遇到了坑 跨域使用的是CORS 1、前端脚本 function tests(){ //请求类型 为了满足IE8,IE9通过cors跨域请求 var contentType ="application/x-www-form-urlencoded; charset=utf-8"; //var contentType ="text/p
JQUERY的AJAX中 get()、post()的跨域方法
hyz5525的专栏
08-09 1152
get()请求： $.ajax({ type: "get", url: "你的请求地址", dataType: 'jsonp', //【jsonp进行跨域请求 只支持get】 data:{ //【这里填写是传给服务端的数据 可传可不传 数据必须是json格式】 "a":"b", ...
用jQuery与JSONP轻松解决跨域访问的问题
u013358378的专栏
05-13 445
时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作，然后在浏览器
ajax跨域postjson,ajax(jquery) post json 跨域访问问题
weixin_35803802的博客
08-05 426
因为后端需要json或raw格式数据,按照网上的例子,发送的总是form-data数据设置contentType:"application/json; charset=utf-8"后发现发送的不是POST请求,而是OPTIONS请求$(document).ready(function(){$("button").click(function(){$.ajax({type:"POST",url:...
前端：jquery ajax 跨域请求问题解决汇总
焱敦的博客
10-10 2703
一般情况下跨域分两种请求方式：post、get； 1、post请求解决方式： spring cloud 项目下： 后台demo： @CrossOrigin(allowCredentials = "true", allowedHeaders = "*", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.DELE...
js post方式请求另外一个php,jquery、javascript实现(get、post两种方式)跨域解决方法...
weixin_35552177的博客
03-19 164
一、实现get方式跨域请求数据浏览器端$(document).ready(function(){$.ajax({url:"http://www.xxx.cn/index.php",type:"get",dataType:"jsonp",//指定服务器返回的数据类型success:function(data) {console.log(data);}});});服务器端$data = [‘info‘...
JQuery跨域请求的方法
行成于思毁于随
01-29 651
写JS很多时候用到Ajax异步请求方法，一般来说同一个域的时候一般以下写法就通用了： $.ajax({ type: "",//get或post url: "", data: { }, beforeSend: function () { },
jq ajax jsonp跨域请求
最新发布
09-11
关于使用jQuery的ajax方法进行JSONP跨域请求，您可以按照以下步骤操作： 1. 确保您已经引入了jQuery库文件，如果没有，请在页面中引入jQuery库文件。 2. 使用ajax方法发送跨域请求，设置dataType为"jsonp"，并指定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值