JS跨域请求之JSONP

在项目开发中遇到跨域的问题，一般都是通过JSONP来解决的。但是JSONP到底是个什么东西呢，实现的原理又是什么呢。在项目的空闲时间可以好好的来研究一下了。

JSONP的产生

1.众所周知，Ajax请求资源受同域的限制，不管是静态资源，动态页面，web服务都不行

2.同时我们发现web页面上调用JS文件时则不受跨域的影响（不仅如此，我们还发现凡是拥有‘src’这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>等）

3.可想而知，当前阶段如果想通过web端（ActiveX控件、服务器代理、HTML5的websocket等方式不算）跨域访问数据就只有一种可能，那就是服务端把数据装进JS格式的文件里，供客户端调用和处理

4.数据的传输，我们知道一种叫JSON的纯字符数据格式可以简洁的描述复杂的数据结构，而且还被JS原生支持，在客户端可以很容易的处理这种格式的数据

5.这样解决方案的一目了然了，web端通过和调用脚本一模一样的方式，来调用跨域服务器上动态生成的JS文件。服务器之所以要动态生成JS文件，目的在于获取客户端的回调函数名并把客户端需要的数据通过JSON（也可以是纯字符串）的格式传进去

6.在客户端对JS文件调用成功后，也就获取到了回调函数里的参数，剩下的就是对数据的处理了，这种方法和Ajax看起来很像，但是却并不一样（Jquery将JSONP和Ajax封装在一起，如果不了解的人会混为一谈）

7.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了

好了，不知道大家对JSONP理解了没有，如果没有的话，鄙人就出来总结一下，说的不好，不要打我。

其实原理就是，客户端请求一个链接，并把需要的参数加上，callback表示是一个JSONP的请求（这个前端和后台可以自己统一），后台解析这个请求链接，发现是一个JSONP的请求，然后生成一个调用方法，并根据请求参数动态生成一个字符串（可以是JSON,也可以是纯字符串）塞进调用方法里，这样客户端就可以那到数据并做后续的处理了。

说了这么多，不上代码不是我的风格啊，上代码。。

function test(data){ console.log(data)}var url="http://www.x.com/test?a=1&callback=test"//向x.com/test传递参数a值为1，并告诉他要调用的函数名是“test”//后台拦截到callback，知道要生成一个调用方法，方法名是test，并传递参数，后台处理生成如下（数据虚构）test("aaaaaa")test({a:1,b:2})//然后前端通过script标签去访问并执行，上面的东西var script = document.createElement('script');  script.setAttribute('src', url);// 把script标签加入head，此时调用开始document.getElementsByTagName('head')[0].appendChild(script); //然后就会调用页面的test方法，这就是jsonp的实现原理。

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：JS跨域请求之JSONP

关键词：JS