利用jsonp实现跨域请求

时间 2019-11-12

标签利用 jsonp 实现请求栏目 JSON 繁體版

原文原文链接

　　同源策略，它是由Netscape提出的一个著名的安全策略。如今全部支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪一个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。若是非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。javascript

　　因为同源策略，咱们在使用ajax请求资源时不能跨域请求，也就是说必须是同一个域名，协议，端口。但咱们在开发的时候常常会须要请求到其余服务器（跨域）的数据，其中一种方法就是jsonp。html

　　另外提一下，通常都是使用json这种数据格式来传递数据，由于javascript原生支持json格式，因此使用起来很方便。不要把json和jsonp混淆了，他们根本不是一个次元的东西！！！好比说两个中国人进行对话，json就是汉语（具体内容），而jsonp就是两我的交流的方式（用嘴）。java

什么是jsonp？　jquery

　　咱们都知道script标签是能够跨域请求的，例如咱们引入jquery.js的时候常常使用cdn上的资源，并无把jquery.js这个文件真正地下载到本身的服务器上。那么利用script能够跨域请求的特性，咱们就能请求其余服务器的资源。这种技术也就是所谓的jsonp。多说无益，下面是一个简单的实例，看了以后相信你就能对jsonp的原理有了理解。　　ajax

<!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）这个文件，里面的代码以下：json

demo1({"name": "lin"}); /*在远程服务器上的js代码，也就是说该服务器上的数据咱们均可以传入函数，那么html执行的时候也就获取到了这些远程数据*/

　 html文件渲染以下，可见远程服务器的数据已经被请求过来：跨域

　　工做流程解析：咱们先在html定义了demo1这个函数，而后引入远程jsonp.js文件，该js文件执行html定义的demo1函数（执行时传入的参数就是想要传递的数据）。这样html也就变相的获取到了远程服务器的数据。浏览器

　　 总结：script标签也就是一个简单的get请求，服务器处理该get请求，返回一个函数，传入该函数的参数也就是客户端但愿得到的数据。其实不仅是script能够跨域请求，只要有src属性的标签均可以借助一样的原理进行跨域请求，例如img, iframe安全