jQuery jsonp跨域请求

最新推荐文章于 2024-09-13 22:06:15 发布
最新推荐文章于 2024-09-13 22:06:15 发布
阅读量1.1k 收藏 2
点赞数 2
分类专栏： SSM Framework 文章标签： jquery ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52226803/article/details/120500496
版权

当前端和后端不属于同源策略就会访问不到数据

同源策略就是相同的协议，域名，端口。如果前后端不属于同源策略又想获得后端的数据我们就可以通过跨域开获得数据

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

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

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

如果要在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脚本却是可以的，就像你可以在自己的页面上使用<img src=""> 标签来随意显示某个域上的图片一样。

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

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

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

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

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

<%@ 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 (result) {
            var data = JSON.stringify(result); //json对象转成字符串
            $("#text").val(data);
        }

        $(document).ready(function () {

            $("#btn").click(function () {
                //向头部输入一个脚本，该脚本发起一个跨域请求
                $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
            });

        });
    </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("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行代码

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

　　然后看调用结果，发现，请求时带的参数是：callback=showData；调用回调函数的时候，先调用了指定的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>

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

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

        $(document).ready(function () {

//            window.showData = function  (data) {
//                console.info("调用showData");
//
//                var result = JSON.stringify(data);
//                $("#text").val(result);
//            }

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

                $.ajax({
                    url: "http://localhost:9090/student",
                    type: "GET",
                    dataType: "jsonp",  //指定服务器返回的数据类型
                    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>

效果图：

再看看如何改变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的实现方式其实就是<script>脚本请求地址的方式一样，只是ajax的jsonp对其做了封装，所以可想而知，jsonp是不支持POST方式的。

<%@ 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: "POST",   //post请求方式
                    dataType: "jsonp",
                    jsonp: "callback",
                    success: function (data) {
                        var result = JSON.stringify(data);
                        $("#text").val(result);
                    }
                });
            });

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

效果图：

再补充一点，回到第一条：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);
}

其他跨域的解决方法：

app.all('*', function (req, res, next) {

    res.header("Access-Control-Allow-Origin", "*");

    res.header("Access-Control-Allow-Headers", "X-Requested-With");

    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

    res.header("X-Powered-By", ' 3.2.1')

    res.header("Content-Type", "application/json;charset=utf-8");

    next();

});

代码敲上天.
关注
专栏目录
jQuery使用JSONP实现跨域获取数据的三种方法详解
10-19
主要介绍了jQuery使用JSONP实现跨域获取数据的三种方法,结合实例形式对比分析了jsonp跨域获取数据的3种常用操作技巧,需要的朋友可以参考下
轻松搞定jQuery+JSONP跨域请求的解决方案
10-18
以上是基于jQuery和JSONP实现跨域请求的解决方案。具体到代码层面，可以通过示例来更清晰地展示如何操作。在这个例子中，客户端页面需要从另一域下的服务端接口获取数据，并将这些数据显示在页面中。通过上述提到的...
跨域&解决方案（CORS，JSONP）
最新发布
2301_80719975的博客
09-13 967
跨域解决方案（CORS、JSONP）
jquery发送jsonp请求
你，若盛开的专栏
02-15 417
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="jquery.js"></script> ...
17.JQuery发送JSONP请求
yujiabao702的博客
04-14 291
此时会发现写的时候url后面拼接的callback是个问号 ，但是发送的时候是有值的。服务端是可以把这个参数接收到的，接收到以后会把这个值作为调用的函数名。此后就是调用这个方法，把值放在 result 盒子里。此时点击按钮，会发现值已经放上去了作为会点函数名。
jQuery JSONP 跨域请求原理及实现
"使用jquery的jsonp发起跨域请求及其原理详解" JSONP（JSON with Padding）是一种常见的解决浏览器同源策略限制的技术，它允许JavaScript通过动态插入`<script>`标签来实现跨域请求。jQuery提供了对JSONP的支持，...
jQuery JSONP 跨域请求原理详解
"使用jquery的jsonp发起跨域请求及其原理详解" 在Web开发中，由于浏览器的同源策略限制，JavaScript通常不能直接从一个域名访问另一个域名的资源，这是为了保护用户的安全。然而，有时我们需要从不同的源获取数据，...
jsonp跨域请求实现示例
10-20
JSONP（JSON with Padding）是一种解决跨域请求的方法，主要用于解决不同域之间因浏览器同源策略限制而无法进行AJAX请求的问题。在AJAX请求中，浏览器的同源策略限制了与当前页面不同域的服务器进行数据交互，而...
【Ajax】笔记-JQuery发送jsonp请求
德仔
07-31 660
height;border;functiondata'#result'html名称:${dataname校区:${datacity;;
jquery ajax使用JSONP解决跨域问题
weixin_30361641的博客
06-25 85
参考文章：http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 什么是跨域 JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下： 首先什么是跨域，简单地理解就是因为J...
使用jQuery jsonp解决跨域(案例展示)
weixin_42541725的博客
02-24 493
使用jQuery jsonp解决跨域(案例展示)
Ajax解决跨域--jQuery发送jsonp请求
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-27 680
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
jQuery发送jsonp请求
qq_54255845的博客
04-10 628
原生jsonp和jQuery发送jsonp的方式出入比较大，所以想在这里记录一下jQuery发送jsonp请求的方式~~ 文字版： 使用jQuery发送jsonp请求，主要使用jQuery函数的getJSON()方法，$.getJSON()。 需要传两个参数，第一个参数是url，需要添加url参数callback=?（固定写法），浏览器在发送请求时会自动为？赋值，这个值可以在后台接收，后台接收之后会将它作为函数调用的函数，接收方式会在稍后以实例说明。 ；第二个参数是回调函数，指定形参（实参是后台响应
jquery ajax jsonp 跨域请求
Hello World
06-06 287
【代码】jquery ajax jsonp 跨域请求。
jQueryAJAX的$.ajax()用jsonp解决跨域问题
sanshuiwang
08-11 3787
jsonp解决跨域访问服务器的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码敲上天.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值