JSONP跨域
Posted 学如逆水行舟，不进则退。
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JSONP跨域相关的知识，希望对你有一定的参考价值。
JSON
JSON就不多说了，JSON是一种轻量级数据格式，因其被javascript原生和几乎所有后台语言支持，所以用起来很方便，对其热爱，渐渐超过XML。想具体理解请使劲戳JSON.
同源协议
JavaScript是一种在Web开发中经常使用的前端动态脚本技术，在JavaScript中有一项很重要的安全性限制，被称为“Same-Origin Policy”（同源策略），对JavaScript能够访问的页面进行了限制，即如果A页面URL和B页面的URl是同源的，那就两个页面就可以用JavaScript进行相互的访问，否则就无法访问。
这里的同源指的是“同协议，同域名，同端口”。
现在几乎所有的浏览器都支持JavaScript，所以同源策略就显得尤为重要。
JSONP原理
JSONP是"JSON with Padding"的缩写，代表的是JSON填充的意思，我们常用JSONP来进行跨域GET的HTTP请求。
下面说一些JSONP的产生过程：
1、这时我们会产生跨域操作的需求，但同源策略限制了我们的自由，但这时就有人发现使用script标签的src属性引进资源是不受同源策略的限制的（事实上所有带有src的标签都不受同源策略的影响，例如img，iframe等等），通过script引进的js文件代码在引进后是立刻执行的。
2、于是人们就想根据script标签这一漏洞来跨域向服务器请求数据，然后服务器设法将数据装进js文件中返回，供客户端处理使用。
3、此时我们又知道JSON这一种被JavaScript原生支持的轻量数据格式，在客户端我们可以用js方便的处理JSON数据。 4、在经过一段时间的的实践后,JSONP这个非正式传输协议诞生了，该协议允许我们传递一个 callback参数给服务器。 5、具体流程就是：
（1）、客户端通过script标签跨域请求数据，并附带传递一个callback参数
（2）、服务器在接受到数据后动态生成JSON数据，然后用callback参数作为函数名来包裹住JSON数据，然后将之返回。 （3）、客户端接受到callback作为函数名包裹住JSON数据的js代码后，会立即执行之。 （4）、所有只要客户端提前定义好数据处理回调函数，然后在请求数据时将callback参数赋值为我们定义好的数据处理函数名，等数据返回后，执行的自然是我们事先定义好的数据处理函数，且其参数为我们请求的数据。
P.S.当然客户端要事先和服务器端定义好callback接口。
JSONP的代码实现
随着进来一大批新技术比如react、redux、webpack、es6等等的冲击，使用JQuery的原来越少，而且JQuery使用的越多，导致代码越混乱，所以此处仅仅贴上使用原生js实现的JSONP小Demo
利用百度搜索的一个接口，从本地跨域请求百度搜索数据，并简单处理，将数据打印出即可.
接口：http://suggestion.baidu.com/su?wd= + 搜索关键字 + &cb= + 回调函数名(注意此处是回调函数名，是纯文本，而不是回调函数的引用)
我们只要将搜索的关键字和我们定义的数据处理函数名拼接进接口即可 本地A页面js代码
function handle(json)百度服务器会将请求的json数据用cb函数包裹住,返回，客户端在接受到后会立刻执行代码，就相当于将服务器端数据拿过来 ，然后用我们定义handle函数处理之
参考博文：
以上是关于JSONP跨域的主要内容，如果未能解决你的问题，请参考以下文章