JSONP的问题与解决

来源：互联网发布：php是什么货币编辑：程序博客网时间：2024/06/08 08:49

JSONP的问题与解决

我是一个刚实习没多久的前端工程师，前不久我遇到了一个技术难题，
这里写图片描述
这是一个ajax跨域访问引起的问题，经过网上各种查找学习，最后解决了这个问题。然后我整理并分享一下自己的所得，希望同样遇上这个问题的朋友能够在看了这篇文章后也能解决这个问题。

首先，为什么会显示错误:这是由于浏览器的同源策略—-它是一种约定，是浏览器最核心也最基本的安全功能，一般来说位于 www.example.com 的网页无法与不是 www.example.com的服务器沟通。
所谓同源是指，域名，协议，端口相同。

然后，什么是跨域: 一个域名下的文件去请求了和它不一样的域名下的资源文件，那么就会产生跨域请求，而由于同源策略的存在，就会导致上面的错误
这里写图片描述

嗯，接下来是解决方法，我主要针对我使用的JSOP来进行分享
JSONP,一看到这个词，大家肯定很容易联想到JSON,没错，JSONP是JSON的一种使用模式，它的全称是JSON with Padding，用于解决主流浏览器的跨域数据访问的问题。它利用 script 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP

比如我们写网站时，有时会使用CDN公共库，<script src=""http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js>，这就是一个跨越的访问，但并不会出现错误。

所以，我们可以使用script来加载数据，txt的内容是 var a = 123456
<script src="test.txt"></script> <script type="text/javascript"> alert(a); </script>
然后，打开网页可以看到弹出的内容123456，但是，JS应该尽可能的少申明全局变量，所以我们可以申明函数 <script type="text/javascript"> function callback(data){ alert(data); } </script> <script src="test.txt"></script>
test.txt的内容 callback(1234)

总的来说

在数据加载之前，我们先定义一个函数，这个函数接收一个参数（数据）
再通过script标签加载对应远程文件资源，当远程的文件资源被加载时候，我们之前定义的函数就会被执行

例如，百度搜索用的就是跨域访问
这里写图片描述
在输入a之后，网络中发送了一条请求，整理之后就是记事本中的的链接，将它打开，可以看到

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jQuery110206103742084975678_1482040945687

这里写图片描述这就像我 test.txt 的内容一样，所以剩下的就是在接收数据之前申明一个函数(PS:jQuery110206103742084975678_1482040945687就是服务端返回的函数名，它是jQuery的ajax jsonp在发送请求中随机定义的一个函数，这里我们可以自定义函数名)

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=callback

这里写图片描述

<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>无标题文档</title><script type="text/javascript">    function callback(data){        var content = document.getElementById("test");        var html = "";        if (data.s.length) {            for(var i=0;i<data.s.length;i++){                html += '<li><a href="">' + data.s[i] + '</a></li>';            }        }        content.innerHTML = html;    }    window.onload = function(){        var content = document.getElementById("test");        var sScript = document.createElement("script");        sScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=callback";        document.body.appendChild(sScript);    }       </script></head><body>        <ul id="test"></ul></body></html>

最后，第一次写博客，有什么不足的地方请见谅，有什么没有考虑到的也欢迎各位指点

0 0