JSONP实现Ajax跨域

Posted 清风徐来xyd

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JSONP实现Ajax跨域相关的知识,希望对你有一定的参考价值。

同源策略,它是由Netscape提出的一个著名的安全策略
现在所有支持javascript 的浏览器都会使用这个策略。
所谓同源是指,域名,协议,端口相同。
当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,
即检查是否同源,只有和百度同源的脚本才会被执行。
如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。
而标签带有src的可以突破同源策略。例如<img> <sccript> <Iframe>标签。
JSONP两大机制是:
  • 1:浏览器有同源策略,采用script即可将数据发送过去,但拿回数据不正确
  • 2:dataType=\'jsonp\',是的拿回数据正确

例子(1):

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="content"></div>
    <input type="button" value="发送1" onclick="submitJsonp1();">
    <input type="button" value="发送2" onclick="submitJsonp2();">
    <input type="button" value="发送3" onclick="submitJsonp3();">
    <script src="/static/jquery-3.2.0.js"></script>
    <script>
        function submitJsonp1(){
            $.ajax({
                url:\'/ajax3.html\',
                type:\'GET\',
                data:{nid:2},
                success:function (arg) {
                    $(\'#content\').html(arg);
                }
            })
        }

#采用
submitJsonp1,由于我的url是同源,则发送数据接收数据都可正确

结果:

 

 

 

例子(2):若为不同源情况,新创建sunkai project 将端口改为9000

 <input type="button" value="发送2" onclick="submitJsonp2();">
    <input type="button" value="发送3" onclick="submitJsonp3();">
    <script src="/static/jquery-3.2.0.js"></script>
    <script>
        function submitJsonp1(){
            $.ajax({
                url:\'/ajax3.html\',
                type:\'GET\',
                data:{nid:2},
                success:function (arg) {
                    $(\'#content\').html(arg);
                }
            })
        }
        function submitJsonp2() {
            var tag = document.createElement(\'script\');
            tag.src = \'http://127.0.0.1:9000/xiaokai.html\';
            document.head.appendChild(tag);
            document.head.removeChild(tag);

        }
        function func(arg) {
           $(\'#content\').html(arg);
        }

#采用 submitJsonp2,这里的关键就是func()联系了两个不同源网页

结果 (发送二):

例子三(和例子二做对比):

 function submitJsonp3() {
            $.ajax({
                url:\'http://127.0.0.1:9000/xiaokai.html\',
                type:\'GET\',
                dataType:\'jsonp\'
            })
        }
        function func(arg) {
           $(\'#content\').html(arg);
        }
这里的重点就是
dataType:\'jsonp\',虽然都是Ajax发送,但是jsonp内部封装一种方式,使之简单。

结果:

 

结论:JSONP是一种方式,随机生成script块,添加到<head>里面再移除掉,==》可以和其他网站交互。

 

以上是关于JSONP实现Ajax跨域的主要内容,如果未能解决你的问题,请参考以下文章

ajax基础4--什么是跨域以及如何解决跨域

AJAX 跨域请求 - JSONP获取JSON数据

jquery下的ajax和jsonp实现与区别

AJAX jsonp实现过程

JSONP跨域ajax请求

Ajax+Spring MVC实现跨域请求(JSONP)(转)