利用jsonp实现跨域请求
Posted 三十亿少女的梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用jsonp实现跨域请求相关的知识，希望对你有一定的参考价值。
同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持javascript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
由于同源策略，我们在使用ajax请求资源时不能跨域请求，也就是说必须是同一个域名，协议，端口。但我们在开发的时候经常会需要请求到其他服务器（跨域）的数据，其中一种方法就是jsonp。
另外提一下，一般都是使用json这种数据格式来传递数据，因为javascript原生支持json格式，所以使用起来很方便。不要把json和jsonp混淆了，他们根本不是一个次元的东西！！！比如说两个中国人进行对话，json就是汉语（具体内容），而jsonp就是两个人交流的方式（用嘴）。
什么是jsonp？
我们都知道script标签是可以跨域请求的，例如我们引入jquery.js的时候经常使用cdn上的资源，并没有把jquery.js这个文件真正地下载到自己的服务器上。那么利用script可以跨域请求的特性，我们就能请求其他服务器的资源。这种技术也就是所谓的jsonp。多说无益，下面是一个简单的实例，看了之后相信你就能对jsonp的原理有了理解。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <script> var demo1 = function (data) { alert("我是后台通过jsonp传来的数据：" + data.name); } </script> <script src="http://远程服务器域名或ip地址/jsonp/jsonp.js"></script> <!--这里为了保护我的服务器不受攻击，就不放出我的服务器地址啦，哈哈哈--> </body> </html>
请求的服务器下面有对应的jsonp.js（名字自己起，不一定是jsonp.js）这个文件，里面的代码如下：
demo1({"name": "lin"}); /*在远程服务器上的js代码，也就是说该服务器上的数据我们都可以传入函数，那么html执行的时候也就获取到了这些远程数据*/
html文件渲染如下，可见远程服务器的数据已经被请求过来：
工作流程解析：我们先在html定义了demo1这个函数，然后引入远程jsonp.js文件，该js文件执行html定义的demo1函数（执行时传入的参数就是想要传递的数据）。这样html也就变相的获取到了远程服务器的数据。
总结：script标签也就是一个简单的get请求，服务器处理该get请求，返回一个函数，传入该函数的参数也就是客户端希望获得的数据。其实不只是script可以跨域请求，只要有src属性的标签都可以借助同样的原理进行跨域请求，例如img, iframe
以上是关于利用jsonp实现跨域请求的主要内容，如果未能解决你的问题，请参考以下文章